10、帧动画
使用cc. 与cc. 这2个类来实现帧动画。
cc. : 设置动画的一系列属性。 主要用于设置动画的序列帧、播放速度等。
cc. :cc.是一个动作类,主要用于开始播放动画。
例子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);