10、帧动画 _动画

使用cc. 与cc. 这2个类来实现帧动画。
cc. ：设置动画的一系列属性。主要用于设置动画的序列帧、播放速度等。
cc.：cc.是一个动作类，主要用于开始播放动画。
例子1（使用一张一张的图片实现帧动画）

文章插图

文章插图
【10、帧动画】

//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);