PixiJs系列实战课程- 基础篇-04 如何滑动触发时间轴

基础篇

第四章 如何滑动触发时间轴

这一章决定了动画与时间轴通过滑动触发的核心代码。先看一下Alloytouch.js滑动库的基础基础代码 打开index.js，输入下面的代码

        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
});

这句话代码就是整个舞台的时间，并且在一开始停止播放

然后在打开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();
  }
}

结束语

到此为止一镜到底的基本架构就出来了。 剩下的功能就是

• 制作字幕
• 制作遮罩
• 绘制基本图形
• 如何拖拽
• 制作微信分享
• 生成海报
• 页面测试
• 打包压缩