关键词

数组脚本属性索引思路注解动态效果图片节点图片循环

文字记录

好的，下边我们就用脚本来控制 GIF 图片的显示。一个 GIF 图片是由很多帧图片组成的，只需要写一个脚本，把图片循环的显示，循环显示之后就是动态效果了。

首先我们添加一个图片节点，打开我们这个Main Scene，然后在Canvas下边创建一个渲染节点，图片节点，默认并没有显示

我们把第一张图片给显示一下，这里边有 12 张图片，我们把编号为 0 的这个图片拖过来，已经显示

把节点名字也改一下，现在运行游戏之后，就会显示这个图片的第一帧，现在没有达到我们的要求，我们要让它循环显示 12 帧图片，目前只是静态显示第一帧图片。如果想让 12 帧循环显示的话，就需要附加一个脚本在上边，然后用脚本来控制。下边我们需要来添加一个脚本，把脚本挂在节点下边。

我们把编号为 0 的这个图片拖过来，已经显示，把节点名字也改一下，
脚本是怎么样来控制图片的循环显示的。用定时器或者是 update 都是可以的。

@property([cc.SpriteFrame])
frames:cc.SpriteFrame[] = [];
sprite:cc.Sprite = null;//Sprite组件
index:number = 0;//当前显示第N张图片
interval:number = 0.1;//定时器的间隔
onLoad(){
  this.sprite = this.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;
}
//update(dt){}
onDestroy(){
  this.unschedule(this.onTimer);
}

12 张图片，怎么样指定进来，这需要一个数组，怎么样把一个属性定位数组类型，我们需要指定一下 12 张图片，叫 frames 那么它类型是数组

@property([cc.SpriteFrame])
frames:cc.SpriteFrame[] = [];

数组JavaScript里边用中括号表示，用一个 new Array 也是可以的，这是等效的写法。然后把类型加上，cc.spriteframe 类型 ，由于是数组加一个中括号。上面要加一个一个注解，注解是@property 中间加上它的类型，它是先写一个中括号，表示一个数组，然后把数组里边每个元素的类型指定一下，刷新一下节点，可以看到在这里边 frames 属性，而且是一个数组的形式，那这个数组长度是0，因为初始化的时候就是0

我们可以外面指定一下，比如说要指定两张图片，输入一个2，按回车，下边就可以来分别指定这两张图片的内容。现在是 12 张图片，就改成12，按下回车，可以看到这里边有 12 个 spriteframe 等待你指定，那我们就依次指定一下就好了。

12 张图片分别的把它指定到数组里边来，上面是表示数组长度，下边表示 12 个数组每一个元素的内容。

因为它里边启动了一个定时器，这个定时器循环显示了 12 张图片，所以每隔 0.1 秒，显示下一帧图片，整体上就是这样的一个动态效果，已经达到了我们的要求。