首先先总结一下帧动画的步骤:①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/