cocos creator (1) ——帧动画

帧动画

整体流程

帧动画，就是通过一系列图片定义动画表现的动画形式，首先我们需要动画运行所需的所有帧。

这些帧通常以一张大图的形式(如下)给出，并不附带任何位置信息。

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组件的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')
    })
}