Cocos-js帧动画详解

帧动画的原理就是将一组连续的动画分解成帧，每一帧就是一张纹理，然后通过指定的时间间隔将动画播放出来，从而形成帧动画。

帧动画的实现可以分为两种，其一位通过图片文件的方式，其二为plist精灵表单。

首先把图片拖进项目中，resource中配置如下

resource.png

然后初始化精灵

this.sprite = new cc.Sprite(res.Peashooter1_png);
this.sprite.setPosition(cc.p(size.width / 2 , size.height / 2));this.addChild(this.sprite);```

尝试第一种图片文件方式
```var animation = new cc.Animation();
animation.addSpriteFrameWithFile(res.Peashooter1_png);
animation.addSpriteFrameWithFile(res.Peashooter2_png);
animation.addSpriteFrameWithFile(res.Peashooter3_png);
animation.addSpriteFrameWithFile(res.Peashooter4_png);
animation.addSpriteFrameWithFile(res.Peashooter5_png);
animation.addSpriteFrameWithFile(res.Peashooter6_png);
animation.addSpriteFrameWithFile(res.Peashooter7_png);
animation.setDelayPerUnit(0.15);
//设置间隔时间
animation.setRestoreOriginalFrame(true);
//是否恢复到第一帧
var animate = new  cc.animate(animation);
//cc.animate把animation包装成动作
this.sprite.runAction(animate);```

这种图片创建的方式占用内存大，文件比较零散，所以一般对于帧动画，我们都是使用plsit表单帧动画。配置的就不说了，直接到加载帧动画。这个里面坑真是不要太多。(小插曲，今天因为问这个出现的一个bug，太闹腾了，结果被禁言了。我只能说这个圈子是多闭门造车)

cc.spriteFrameCache.addSpriteFrames(res.explosion_plist,res.explosion_png);
//在onEnter中声明
var frames = [];
for (var i = 1; i <10 ; i++){
// explosion_01
var name = "explosion_0" + i+".png";
var frame = cc.spriteFrameCache.getSpriteFrame(name);
frames.push(frame);
}
var animation = new cc.Animation(frames,0.1);
animation.setRestoreOriginalFrame(true);
var animate = new cc.animate(animation);
this.sprite.runAction(animate);```
PS:我的资料都是来自网上，书上。防喷子。