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)
复制代码

结束语

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