PixiJs系列實戰課程- 基礎篇-04 如何滑動觸發時間軸

時間 2019-11-08

標籤 pixijs 系列實戰課程基礎如何滑動觸發時間軸简体版

原文原文鏈接

基礎篇

第四章如何滑動觸發時間軸

這一章決定了動畫與時間軸經過滑動觸發的核心代碼。先看一下Alloytouch.js滑動庫的基礎基礎代碼打開index.js，輸入下面的代碼html

let alloyTouch;
        function initTouch(vertical,val){
        let scrollDis = app.stage.width+max;
            alloyTouch = new AlloyTouch({
                touch:"body",//反饋觸摸的dom
                vertical: vertical,//沒必要需，默認是true表明監聽豎直方向touch
                min: 0, //沒必要需,運動屬性的最小值
                maxSpeed: 1,
                max: app.stage.width - max-20, //沒必要需,滾動屬性的最大值
                bindSelf: false,
                initialValue: 0,
                change:function(value){  
                    app.stage.position[val] = value;
                    let progress = value/scrollDis;
                    progress = progress < 0 ? 0 : progress;
                    progress = progress > 1 ? 1 : progress;
                    timeline.seek(progress);      
                }
            })
        };
 })
複製代碼

vertical: vertical,豎方向：true，橫方向：false,找到resources.js，在橫豎屏的時候判斷了一下初始化滑動方向。

if (w<h) {   // 豎屏，旋轉舞臺
        app.stage.rotation = 1.5708;
        app.stage.pivot.set(0.5);
        app.stage.x = w;
        initTouch(true,'y');   // 初始化滑動
    }else {   // 橫屏
        initTouch(false,'x');   // 初始化滑動
    } 
複製代碼

最核心的代碼就是change，當滑動的時候如何改變他的值，這樣場景就會移動 app.stage.position[x/y] = ***;
而後就是經過滑動的值除以（場景寬度+當前窗口的寬度==我能夠移動的時間範圍），而後在判斷一下是在0和1之間。

let timeline = new TimelineMax({  // 整個舞臺的時間軸
    paused: true
});
複製代碼

這句話代碼就是整個舞臺的時間，而且在一開始中止播放bash

而後在打開animation.js文件找一下微信

TweenMax.to(target,obj[i].duration,obj[i].to)
 let tm = new TimelineMax({delay:obj[i].delay});
 tm.add(act,0);
 tm.play();
 timeline.add(tm,0)
複製代碼

第一行TweenMax.to就是（選擇器，持續時間，如何運動）第二行TimelineMax({delay:obj[i].delay})，延遲多少秒網絡

持續時間：從哪裏開始
延遲多少秒：到哪裏結束動畫
而後就加入到了時間軸中

如何解決滑動播放音效

在滑動的change時間中加入一個方法,傳入時間，把音頻事先放入在html中，引入音頻文件架構

// 播放背景音樂
playAudio(progress);

//判斷什麼時間播放
function playAudio(progress){
  if (progress>=0.08 && progress<=0.081) {
    playBgmAfterLoading('wechat');
    setTimeout(function(){
      tickerPhone.stop();
      playBgmAfterLoading('talk_5');
    },2000)
  }
}


function playBgmAfterLoading(e,next,wait) {
    playBgm(e);
    if (next) {
      setTimeout(function(){
        playBgm(next);
      },wait);
    }
}
 
function playBgm(e){
  let audio = document.getElementById(e);
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
      WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
          // 在這裏拿到 e.err_msg, 這裏面就包含了全部的網絡類型
          // alert(res.err_msg);
          audio.play();
      });
  } else {
    audio.play();
  }
}
複製代碼