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幀
複製代碼