PixiJs武術小人滑動淡入淡出動畫

今天這節課涉及到了Alloytouch.js，TimelineMax.js，TimelineMax..js，用戶須要經過用手上下滑動觸發時間軸來改變精靈的變化,這就是一鏡到底的播放方式。

第一步：建立項目，而且導入4js個文件

第二步：導入圖片

http://dongyuan.juzhen02.com/2019/dy0426/images/sjg1.png
複製代碼

第三步：建立舞臺

const w = document.body.clientWidth,  
     h = document.body.clientHeight;
     let app = new PIXI.Application({width: w, height: h});
複製代碼

第四步：加載資源

const loader = new PIXI.loaders.Loader();
loader.add('sjg1', 'imgs/sjg1.png')
複製代碼

第五步：加載進度，完成加載,而且把舞臺添加到body中

loader.on("progress", function(target, resource) {  //加載進度
    console.log(target.progress+"%")
});

loader.once('complete', function(target, resource) {    //加載完成
    document.body.appendChild(app.view)
});

loader.load();  // 開始加載資源
複製代碼

第六步：建立精靈

const sprite = {}
sprite.sjg1 = new PIXI.Sprite.fromImage('sjg1')
sprite.sjg1.position.set(w/2,h/2)
sprite.sjg1.alpha = 0;
sprite.sjg1.anchor.set(0.5,0.5)
app.stage.addChild(sprite.sjg1);
複製代碼

第七步：建立時間軸

let allTimeLine = new TimelineMax({
    paused:true  //默認中止
})
let moveMin = -app.stage.height+圖片的高度;
 alloyTouch = new AlloyTouch({
    touch:"body",//反饋觸摸的dom
    vertical: true,//true表明監聽豎直方向touch,false橫向
    min: moveMin, //沒必要需,運動屬性的最小值
    maxSpeed: 1,
    max: 0, //沒必要需,滾動屬性的最大值
    bindSelf: false,
    initialValue: 0,
    change:function(value){  
       //動畫計算進度
        let myprogress = value / moveMin;
        allTimeLine.seek(myprogress)
    }
 })
複製代碼

第八步：編寫動畫

//子時間軸          
let timeline1 = new TimelineMax({
    delay:0.3 //到時間軸的0.3的位置，讓圖片從透明到不透明
})

//動畫
let tweenMax1 = new TweenMax(sprite.sjg1,0.1,{alpha:1}); //佔總時間軸的10%
//將動畫添加到子時間軸上
timeline1.add(tweenMax1,0)//把動畫添加子時間軸的第0幀
allTimeLine.add(timeline1,0);//把子時間軸添加到主時間軸上
複製代碼

結束

到此在上下滑動屏幕的時候，小人就會從透明度0到1了。