我们先从网上找一个动画素材；将这张图片加回本地，导入ps，ps中能看到这个动画有12帧；我们将其导出成png导入texturepacker，texturepacker是我们常用的一个图片打包软件，一般二维图片素材都会经它之手打成一张大图，加载进游戏，这样可以大大降游戏管理素材；降低drawcall;注意在选项里选择好引擎/json文件地址/png打包图片地址；最终形成了游戏中要的序列打包图；pixijs加载纹理是core.loader.add(facepath)
.load((_,r) => {
console.log('r',r)
//resources = r[facepath];
_back();
})
其中facepath是你自己弄好的地址，也可以是本地地址，也可以是远程地址；load里加载完后方可使用；加载完成之后你可以在core.loader.resources[facepath].data.animations;里找到你要的动画；以下是我的游戏中加载动画的相关代码：init(){
let facepath = _static.cdn + '/bomb/face.json';
var that = this;
var _back = ()=>{
var anis = core.loader.resources[facepath].data.animations;
var ani = anis[that.list[parseInt(that.index)]];
ani = ani.map(i=>PIXI.Texture.fromFrame(i));
var _f = new PIXI.extras.AnimatedSprite(ani);
_f.scale.x = _f.scale.y = that.scale;
_f.name = 'face_'+that.index;
that.obj = _f;
_f.loop = false;
_f.play();
_f.animationSpeed = 0.2;
_f.onComplete = ()=>{
console.log('complete');
that.destory();
}
that.UI.scene.addChild(_f);
}
if(core.loader.resources[facepath])
{
_back();
}else{
core.loader.add(facepath)
.load((_,r) => {
console.log('r',r)
//resources = r[facepath];
_back();
})
}
}
destory(){
if(this.UI.scene.getChildByName(this.obj.name)){
this.UI.scene.removeChild(this.obj)
}
}
下面自己做frames是直接从纹理中找到图片，官方的案例中也这样的；var frames = [];
for(var i=0;i<12;i++){
frames.push(PIXI.Texture.fromFrame('anger_'+i+'.png'));
}
var face = new PIXI.extras.AnimatedSprite(frames);
face.play();
face.loop = false;
face.animationSpeed = 0.6;
this.context.addChild(face)
explosion.onComplete = (()=>{
console.log(this)
//obj.destory();
}).bind(this)
这样游戏中就能用上我们的动画效果了。。。——————————————————html5游戏开发QQ群 639636145}