10、帧动画

cocos2d使用cc.Animation 与 cc.Animate 这2个类来实现帧动画。

cc.Animation ： 设置动画的一系列属性。    主要用于设置动画的序列帧、播放速度等。

cc.Animate    ： cc.Animate是一个动作类，主要用于开始播放动画。

例子1（使用一张一张的图片实现帧动画） 

//1、创建动画的第一帧
var xm = new cc.Sprite('res/d01.png');
xm.x = 400;
xm.y = 640;
this.addChild(xm);

//2、创建cc.Animation对象
var animation = new cc.Animation();

//3、添加序列帧
for(var i=1; i<=4; i++)
{
	animation.addSpriteFrameWithFile('res/d0'+i+'.png');
}

//4、设置动画播放速度
animation.setDelayPerUnit(0.1);

//5、创建cc.Animate对象，把animation对象丢进去
var animate = new cc.Animate(animation);

//6、精灵执行动画
xm.runAction(animate);

运行后发现动画只播放了一次就不播放了。如果需要动画不停的播放，则只需要把上面代码的第6步修改如下即可 ：

xm.runAction(new cc.RepeatForever(animate));  

例子2（用整张图片实现帧动画）

var xm = new cc.Sprite('res/sprites.png', cc.rect(0,0,165,220));
xm.x = 400;
xm.y = 640;
this.addChild(xm);
var animation = new cc.Animation();
for(var i=0; i<4; i++)
{
    //第一个参数是图片，第二个参数是设置一个图片的可视区域
    animation.addSpriteFrame(new cc.SpriteFrame('res/sprites.png', cc.rect(i*165,0,165,220))); 
}
animation.setDelayPerUnit(0.1);
var animate = new cc.Animate(animation);
xm.runAction(new cc.RepeatForever(animate));

例子3（手动设置切图）

var xm = new cc.Sprite('res/d01.png');
xm.x = 400;
xm.y = 640;
this.addChild(xm);
var xm_c = new cc.SpriteFrame('res/sprites.png', cc.rect(165,0,165,220));  //将要切换的图片
window.setTimeout(function(){
     xm.initWithSpriteFrame(xm_c);  //调用initWithSpriteFrame进行切图
}, 2000);