帧动画的切换实际上是把所需要的帧动画放在一个缓存器里.首先创建数组,用textureCache添加图片到缓存中。然后添加帧序列,将序列添加到数组中。部分代码如下:
ctor:function () {
this._super();
//添加背景
var bg=new cc.Sprite(res.bg_jpg);
this.addChild(bg);
bg.setPosition(cc.winSize.width/2,cc.winSize.height/2);
//创建动画
var frameUp=[];
var frameDown=[];
var frameLeft=[];
var frameRight=[];
var texture=cc.textureCache.addImage("res/2.png");
//添加帧序列
for(var n=0;n<4;n++)
{
var nowframeup=new cc.SpriteFrame(texture,cc.rect(32*n,48*3,32,48));
var nowframedown=new cc.SpriteFrame(texture,48));
var nowframeleft=new cc.SpriteFrame(texture,48,48));
var nowframeright=new cc.SpriteFrame(texture,48*2,48));
frameUp.push(nowframeup);
frameDown.push(nowframedown);
frameLeft.push(nowframeleft);
frameRight.push(nowframeright);
}
//创建动画
var animationUp=new cc.Animation(frameUp,0.2);
var animationDown=new cc.Animation(frameDown,0.2);
var animationLeft=new cc.Animation(frameLeft,0.2);
var animationRight=new cc.Animation(frameRight,0.2);
//添加到缓存里
cc.animationCache.addAnimation(animationUp,"up");
cc.animationCache.addAnimation(animationDown,"down");
cc.animationCache.addAnimation(animationLeft,"left");
cc.animationCache.addAnimation(animationRight,"right");
//创建animate并运行
this.sprite=new cc.Sprite();
this.addChild(this.sprite);
this.sprite.setTag(100);
this.sprite.runAction(cc.animate(
cc.animationCache.getAnimation("up")).repeatForever());
this.sprite.setScale(4);
this.sprite.setPosition(200,200);
本节课的作业是实现帧动画上下左右的方向变化,通过触摸位置和动画当前所在位置进行了坐标的判断后,不难实现。
最后附上本节课的作业链接:
http://www.cocoscvp.com/usercode/2016_04_25/6a92644a3d22ba869d86ebe4892b4d023f07c9ad/