likes
comments
collection
share

PixiJs武术小人滑动淡入淡出动画

作者站长头像
站长
· 阅读数 6

今天这节课涉及到了Alloytouch.js，TimelineMax.js，TimelineMax..js，用户需要通过用手上下滑动触发时间轴来改变精灵的变化,这就是一镜到底的播放方式。

第一步：创建项目，并且导入4js个文件

PixiJs武术小人滑动淡入淡出动画

第二步：导入图片

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了。