首先先总结一下帧动画的步骤：①sprite②animation③animate④sprite.runAction

下面让我们来看一下具体的实现步骤：

var HelloWorldLayer = cc.Layer.extend({

ctor:function(){

this._super();

var size = cc.winSize;

var bg = new cc.Sprite(res.bg_jpg);

this.addChild(bg);

bg.setPosition(size.width/2,size.height/2);

//添加动画

var sp = new cc.Sprite();

sp.setTag(100);

var animation = new cc.Animation();

for(var i=1;i<=5;i++){

var frameName = "res/"+"walk0"+i+".png";

animation.addSpriteFrameWithFile(frameName);

}

animation.setDelayPerUnit(0.1);

var animate = cc.animate(animation);

this.addChild(sp);

sp.runAction(cc.repeatForever(animate));

sp.setPosition(200,200);

return true;

}

可以看出我们通过一组for循环通过字符串连接的形式将每一帧的精灵进行添加操作。设置帧率(帧率越高，播放的越慢)，然后按照步骤即可播放帧动画，如果需要循环播放则需要用到cc.repeatforever。

最后附上作业链接：

http://www.cocoscvp.com/usercode/2016_04_24/b903c70568416cbe3f1136a8c593b889b4443e1f/