pixijs如何将gif图片加载游戏中变成序列帧

我们先从网上找一个动画素材;

pixijs如何将gif图片加载游戏中变成序列帧
将这张图片加回本地,导入ps,ps中能看到这个动画有12帧;
pixijs如何将gif图片加载游戏中变成序列帧
我们将其导出成png导入texturepacker,

texturepacker是我们常用的一个图片打包软件,一般二维图片素材都会经它之手打成一张大图,加载进游戏,这样可以大大降游戏管理素材;降低drawcall;

pixijs如何将gif图片加载游戏中变成序列帧
注意在选项里选择好引擎/json文件地址/png打包图片地址;
最终形成了游戏中要的序列打包图;

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)
		}
		
	}

这样游戏中就能用上我们的动画效果了。。。