前言

虽然 Cocos 的官方文档对动画系统做了较详细的介绍，但是对于刚接触的同学（比如我）来说还是不太友好。尽管如此，我就按文档加社区帖子一起实践了一下。为了方便忘记后能快速捡起，所以就用我的方式结合使用场景，简单介绍一下 Cocos Creator 动画添加的三种方式。

属性动画

这个是 Cocos Creator 动画系统自带的一种对节点进行标准位移、旋转、缩放动画操作。可以用来制作一些按钮加亮，引导之类的业务型动画。

创建节点并挂载 “Animation” 组件

添加组件 > 其他组件 > Animation，然后打开动画编辑器，再点击 “新建 Clip 文件”，保存后放在 "assets" 下 "animations"，后缀为.anim 的文件。

动画编辑

进入编辑后，找到属性列表，点击 “Add Property”，选择列表的 “position，width，coclor” 等属性，点击右侧菜单按钮，可以插入关键帧，删除关键帧，清空关键帧等，添加一帧就可以在属性检查器对应节点的属性进行调节。

挂载动画剪辑

将已经编辑好的动画剪辑文件 (.anim 后缀)，拖入到节点动画组件的 animation-clip 或 Default Clip 中。

脚本控制

创建 ts 文件，将以下代码的脚本挂载到与动画相同的节点上（当然也可以制作预设体）。

const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {onLoad () {var anim = this.getComponent(cc.Animation);// start_btn_dance 动画剪辑名称anim.play('start_btn_dance');}start () {}// update (dt) {}
}

序列帧动画

帧动画也是 Cocos Creator 自带的编辑功能，就是在指定时间内循环各种动作或样式的图片，当然前期要准备好序列帧图片放到 assets 下。

创建 Animation 组件和动画剪辑

这部分和上面的属性动画操作一样

动画编辑

这里在属性列表 Add Property 要选择 “cc.Sprite.spriteFrame”，然后将资源里的序列图片一张一张放入关键帧里。

脚本控制

如果只是用于播放动画的和上面的也一样，但是动画事件需要分开说一下。

const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {onLoad () {// 获取当前节点动画组件var anim = this.getComponent(cc.Animation);// 播放指定动画剪辑anim.play('monster');//this.node.on('onAnimCompleted', this.onAnimCompleted, this);}// 动画事件，接收两个参数onAnimCompleted(num, str) {console.log("start anim completed end~");console.log(num);console.log(str);//console.log('onAnimCompleted: param1[%s], param2[%s]', num, string);//console.log('onAnimCompleted: this is a test event12345' + num);}
}

动画事件

确切的说应该是动画帧事件，就是在指定帧上添加一个事件（可以预留参数），当播放到该帧时触发。当前触发是在脚本里控制，这种一般用来做比如一个角色击杀时，要触发一个大招特效动画等。

第三方工具动画

通过第三方的工具制作动画后导入到 Cocos Creator， 官方提供对 Spine 和 DragonBones 的支持。下面以 Spine 为例，从工具内导出，到 Cocos 脚本控制进行演示。

Spine 导出

可以直接用工具提供的示例，然后选择导出，注意是 json 格式文件。

Cocos Creator 导入

将上面从 Spine 导出的三个文件整成一文件夹放入 cocos 项目下 assets 的资源下，然后找到后缀 json 文件拖入层级管理器中。

脚本控制

因为在 Spine 已经做好了动画，皮肤和帧事件，所以脚本也就是对动画的播放，操作换肤和事件回调等。

const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {onLoad () {var anim = this.getComponent(sp.Skeleton);// 清空动画管道//anim.clearTracks();// 添加动作anim.addAnimation(0, 'run', true, 0);/*anim.addAnimation(0, 'walk', false, 0);anim.addAnimation(0, 'jump', false, 0);anim.addAnimation(0, 'idle', false, 0);anim.addAnimation(0, 'head-turn', false, 0);anim.addAnimation(0, 'fall', false, 0);anim.addAnimation(0, 'crouch', false, 0);anim.addAnimation(0, 'attack', false, 0);*/// 停止动画/*let SpEnt: sp.spine.TrackEntry = anim.setAnimation(0, 'run', false);SpEnt.animationStart = SpEnt.animationEnd;*/// 换肤//anim.setSkin("default");// 监听动画开始anim.setStartListener(function () {console.log("animate start~");}.bind(this));// 监听动画结束anim.setCompleteListener(function () {console.log('animater end~');}.bind(this));}}