PixiJs小人精靈動畫

PixiJs 小人動畫

這節課涉及到了讓小人精靈動起來，作下一個案例作鋪墊。

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

第三步：導入圖片

http://dongyuan.juzhen02.com/2019/dy0426/images/sjg1.png
http://dongyuan.juzhen02.com/2019/dy0426/images/sjg2.png
http://dongyuan.juzhen02.com/2019/dy0426/images/sjg3.png
http://dongyuan.juzhen02.com/2019/dy0426/images/sjg4.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')
loader.add('sjg2', 'imgs/sjg1.png')
loader.add('sjg3', 'imgs/sjg1.png')
loader.add('sjg4', '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();  // 開始加載資源
複製代碼

這時候，舞臺和進度就都有了。

第七步：在加載完畢函數中，建立一個圖片精靈，做爲測試用，調試完成，註釋代碼

//建立精靈
let Sprite = new PIXI.Sprite.fromImage('imgs/sjg1.png');
//====顯示在舞臺中（垂直水平居中）
Sprite.position.set(w/2,h/2);
Sprite.width = 367;
Sprite.height = 318;
Sprite.anchor.set(0.5,0.5);
//=========================

app.stage.addChild(Sprite)
複製代碼

第七步：精靈動畫

let imgSprArr = [];
for(let n=1;n<4;n++){
    let tempspr = new PIXI.Texture.fromImage("imgs/sjg"+n+".png");
    let temprect = new PIXI.Rectangle(0,0,367,318);
    let imgSprArrItem = new PIXI.Texture(tempspr,temprect);
    imgSprArr.push(imgSprArrItem);
}
//設置動畫精靈
let animatedSpr = new PIXI.extras.AnimatedSprite(imgSprArr);
animatedSpr.position.set(w/2,h/2);
animatedSpr.anchor.set(0.5,0.5);
animatedSpr.animationSpeed = 0.1;
animatedSpr.play();
app.stage.addChild(animatedSpr)
複製代碼

結束語

這節課沒有涉及到場景，只是讓你們對搭建基本結構精靈動畫有更深刻的認識，下一個案例分析如何用手指滑動來控制動畫的播放。