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)

结束语

这节课没有涉及到场景，只是让大家对搭建基本结构精灵动画有更深入的认识，下一个案例分析如何用手指滑动来控制动画的播放。