Gif的提取

1. 放入PS，导出图层各图片,注意要背景透明。
   
2. 图片命名从0开始，与脚本中数组的显示一致。

图片的动态显示

1. 由于图片进入cocos后图片无背景，导致图片大小不一，这样显示时就会出现如下问题：（图片大小位置不一）
   要将每张图片的TrimType属性设置为none（一张一张的设置）
   

 @property( [cc.SpriteFrame] )frames: cc.SpriteFrame[] = [];//或者 frames: cc.SpriteFrame[] = new Array();sprite:cc.Sprite=null;index:number=1;interval:number=0.1;onLoad () {this.sprite=this.node.getComponent(cc.Sprite);}start () {this.schedule(this.onTimer,this.interval)}onTimer(){if(this.frames.length==0)return;this.sprite.spriteFrame =this.frames[this.index];this.index++;if(this.index >= this.frames.length)//这里不适用取余，数字在不断增大超出表示范围this.index = 0;}onDestroy(){this.unschedule(this.onTimer);}

注意添加数组的属性时，变量类型的说明 @property( [cc.SpriteFrame] )
数组声明的两种方式：
frames: cc.SpriteFrame[] = [];
frames: cc.SpriteFrame[] = new Array();

要额外注意：所有添加的属性调用时都要使用this来调用
最终效果：

Atlas及图集资源

图集资源类似雪碧图，是将要加载的图片整合到一张图片上的图。方便文件的分类、加载。

图集资源

cocos需要的图集资源需要TexturePacker生成的图集文件（png和plist文件）
安装教程：https://blog.csdn.net/u013654125/article/details/80676715.
需要注意的是:生成图片资源时，Layout栏内要选择TrimType设置为none,否则之后在软件内无法修改，不然做好后发现问题就·······

Atlas使用

plist文件是一个XML文件，描述每个子图的信息

导入后能够看到全部图片的信息，之后全选片能够设置TrimType.

添加脚本：内容和上面基本相同，只是需要增加获取Atlas属性并将其内部图片给frames数组。

 @property( [ cc.SpriteAtlas ] )atlas : cc.SpriteAtlas  = null;@property( [cc.SpriteFrame] )frames: cc.SpriteFrame[] = [];//或者 frames: cc.SpriteFrame[] = new Array();sprite:cc.Sprite=null;index:number=1;interval:number=0.1;onLoad () {this.sprite=this.node.getComponent(cc.Sprite);// 从图集中获取所有帧图片if(this.atlas != null)this.frames = this.atlas.getSpriteFrames();}start () {this.schedule(this.onTimer,this.interval)}onTimer(){if(this.frames.length==0)return;this.sprite.spriteFrame =this.frames[this.index];this.index++;if(this.index >= this.frames.length)//这里不适用取余，数字在不断增大超出表示范围this.index = 0;}onDestroy(){this.unschedule(this.onTimer);}