帧动画
整体流程
帧动画，就是通过一系列图片定义动画表现的动画形式，首先我们需要动画运行所需的所有帧。
这些帧通常以一张大图的形式(如下)给出，并不附带任何位置信息。
image
所以我们首先要将图片处理成带位置信息的大图形式，以便能够被cocos creator所用。
其次要创建一个承载动画的节点，并绑定Animation组件。
编辑动画，包括运行速度，帧事件，运行模式（顺序、循环...）。
预览。
动画资源制作
分离图片
- 使用
shoeBox将素材图中的各个元素扣出来，分离成一个个单独的图片。将源图片直接拖入如下位置即可，shoeBox默认的输出目录跟源文件目录相同。
image
打包整合图片
- 使用
TexturePacker将分离的图片合成一张大的雪碧图，附带.plist文件。将Texture的输出路径直接放在cocos creator工程目录下的/assets/texture下
image
- 将打包出来的plist和雪碧图资源导入到cocos creator编辑器中，如下图所示
image
节点/组件
新建用于承载动画的节点
- 在节点中添加sprite组件，用于放置节点默认显示的一帧画面。将第一帧图拖进去。因为我们的一帧图是从图集中扣出来的（前面我们用
TexturePacker合成了一张大图），所以这里Sprite的Altas属性就是我们的图集。
image
-
在节点中添加animation组件，用于定义动画的具体行为
- 在animation组件中一个
Default Clip属性，这代表这个节点默认展示的动画。类型为cc.AnimationClip，每个cc.AnimationClip都有个name属性，用于区分不同的动画。 - 还有一个clips属性，是个数组。也就是Animation组件可以使这个节点拥有多个动画。比如说角色的跑、跳、蹲等动作。有多少个动作，这个数组就有多长。可以认为
cc.Animation是cc.AninationClip的合集。
image - 在animation组件中一个
创建/编辑动画
新建动画资源
动画资源就对应于之前animation组件的cc.AnimationClip类型的属性。在资源管理器中新建Animation资源。定义好动画资源后，就可以直接把这个资源拖到对应的属性Default clip上去。(如上图)
编辑动画
在层级管理器中选中动画节点，在动画编辑器中就可以对动画进行编辑了。
在动画编辑器中点击编辑按钮。在下面的属性列表中新建动画需要改变的属性。因为我们是帧动画，所以自然要改变的就是cc.Sprite.SpriteFrame属性了。
选中动画所需的帧拖到该属性的右边去。点击播放按钮，即可看到动画效果。
可以在动画编辑器的右下角修改动画的采样率和速度，以改变动画的帧变化速度。
保存动画。
image
选中选中节点，Animation组件下的Play on Load属性，即可在浏览器或者模拟器中查看动画效果。
脚本控制
onLoad () {
var animation = this.getComponent(cc.Animation)
animation.play('name-of-animationClip') // 直接播放动画
// 动态加载动画
cc.loader.loadRes('animation/name-of-animation-resource-file', cc.AnimationClip, function (err, dynamicAnimationClip) {
// 先将动态加载的clip放入animation中
animation.addClip(dynamicAnimationClip)
animation.run('dynamic-animation-clip-name')
})
}
