[学习笔记] Cocos Animation

要通过cocos2d-js实现帧动画，需要完成以下基本操作：

1. 通过cc.Animation定义动画中基本信息：帧以及帧切换速度等
2. 创建Action(cc.Animate)并在cc.Node上播放它

定义帧动画——cc.Animation

//定义cc.Animation
var animation = new cc.Animation();

//在这个例子里添加四帧动画，每一帧动画都是从res/my_pic.png这张图片的不同位置上截取的
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 0, 255, 476)));
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 480, 255, 476)));
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 960, 255, 466)));
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 1426, 255, 466)));

//定义每帧动画之间的时间间隔
animation.setDelayPerUnit(0.1);

播放动画

//使用前面创建的cc.Animation创建帧动画
var action = cc.RepeatForever.create(new cc.Animate(animation));

//在cc.Node节点上播放帧动画
someNode.runAction(action);

附

还可以使用cc.textureCache定义帧动画（适用于那种把所有帧定义在一张大图中的情况）

//使用textureCache管理大图
var texture = cc.textureCache.addImage("res/first_aganruan.png");

//创建cc.Animation，并通过texture加载帧图片内容
var animation = new cc.Animation();
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 0, 255, 476));
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 480, 255, 476));
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 960, 255, 466));
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 1426, 255, 466));