PIXI学习笔记

一镜到底学习笔记

• PIXI舞台创建、加载图片

//动态渲染加载图片
const img1= ['../images/p1.png'];
let imgArr = []
for(let i=1;i<=52;i++){
let temp = i;
if(i<10){
temp = '0' + i
}
imgArr.push('../images/00'+temp+'.png')
}

//加载资源
PIXI.loader.add(img1)
.add(imgArr)
.on('progress',function(loader,resource){
console.log(parseInt(loader.progress)+"%")
}).load(setup)

//加载完成 
function setup(){
let app = new PIXI.Application({
width:750,
height:1448
})
//把舞台添加到div中
document.getElementById('stage').appendChild(app.view);
}

• 创建精灵并在舞台中显示

let spr = new PIXI.Sprite.fromImage(img1[0])
spr.position.set(750/2,1448/2);//获取画布中心
spr.anchor.set(0.5,0.5);//设置图片精灵锚点为中心
app.stage.addChild(spr);

• 创建精灵动画

//获取52张图片
let imgSprArr = []
for(let n=1;n<=52;n++){
let tempn = n;
if(n<10){
tempn = '0' + n
}
let tempspr =new PIXI.Texture.fromImage('../images/00'+tempn+'.png'); 
let temprect = new PIXI.Rectangle(0,0,1318,1448);//设置精灵图片在舞台显示的x轴、y轴位置，及图片精灵width、height；参考css背景图定位原理；
let imgSprArrItem = new PIXI.Texture(tempspr,temprect);
imgSprArr.push(imgSprArrItem)
}

let animatedSpr = new PIXI.extras.AnimatedSprite(imgSprArr);//逐帧动画，加载图片数组
animatedSpr.position.set(0,0);//定位，x轴y轴位置
animatedSpr.animationSpeed = 0.8;//动画速度，数字越大，运行速度越快；反之，速度越慢；
animatedSpr.play();//动画播放
app.stage.addChild(animatedSpr)

• Alloytouch滑动

            let alloytouch = new AlloyTouch({
                touch:'body',
                verticial:true,//滑动方向为纵向滑动
                maxSpeed:0.1,//滑动速度
                min:-2000,//向下滑动最大值为-2000
                bindSelf:false,//不绑定自身
                initialValue:0,
                change:function(value){
                    console.log(value)
                }
            })

TweenMax动画

• 方法：

TweenMax.to()
TweenMax.from()
TweenMax.fromTo()

TimelineMax时间轴

方法：

seek()

            //TweenMax
            let allTimeLine = new TimelineMax({ //创建主时间轴
                paused:true //默认停止
            })

            //Alloytouch滑动
            let moveMin = -2000;
            let alloytouch = new AlloyTouch({
                touch:'body',
                verticial:true,//滑动方向为纵向滑动
                maxSpeed:0.1,//滑动速度
                min:moveMin,//向下滑动最大值为-2000
                max:0,
                bindSelf:false,//不绑定自身
                initialValue:0,
                change:function(value){
                //动态计数进度
                    let myprogress = value/moveMin
                    console.log(myprogress)

                    allTimeLine.seek(myprogress)//监听动画移动的时间轴位置
                }
            })

            let timeline1 = new TimelineMax({ //创建子时间轴
                delay:0.3 //滑动到时间轴30%的位置，执行动画操作
            })
            //动画
            let tweenMax1 = new TweenMax(spr,0.1,{alpha:1})//让图片精灵占时间轴10%,(持续0.1）图片精灵有原默认透明，变为不透明
            timeline1.add(tweenMax1,0)//将动画添加到子时间轴上,并把动画添加到第0帧
            allTimeLine.add(timeline1,0)//将子时间轴添加到主时间轴上,并把动画添加到第0帧