今天来记录下在学习Cocos Creator的Animation组件中遇到的一些事情，先上浏览器运行效果图

其实这只是一个简单的动画，主要是我不熟悉Creator做动画的流程，所以花了一些时间。

在Creator中做好布局

这是一个由上下两张图片拼起来的UI界面Top节点和Bottom节点的属性查看器信息如下图

思路是以Background节点<坐标(0,0)>为中心上下对齐，因为后续坐标(0,0)还会加入其他数据。保证效果统一。(最终的合成效果可通过查看我之前文章《自学Cocos JS 之 DragonBones》)。

Background节点添加Animation组件

Background节点属性如图

在动画编辑器中新建Clip文件

在弹出的保存动画对话框中，输入动画名称和文件保存的位置。

点击保存之后我们的项目工程就会多了一个动画文件，如图

编辑动画

我所遇到的问题就在这里

1. 我们需要Background节点按照Y轴移动，可是怎么编辑坐标？
2. 为什么其他人网上的截图任意两个关键帧(蓝色的◇块)之间有蓝色连线连接，而我的就没有？

经过一段时间的折腾我终于知道原因：

其实它的这个编辑器还要结合属性查看器使用，在每一个关键帧的地方编辑目标节点在该帧的属性。

至于为什么任意两个关键帧之间没有出现蓝色的连线是因为任意两帧之间没有属性的变化，所以也就没有连线。

弄明白问题之后接下来事情就简单了，如图

最后在浏览器中运行，就出现了开头的效果。

结语

这个动画编辑器还是很强大的：

• 修改WrapMode实现，正播，倒播，循环播，随机播等效果
• 修改Sample和Speed实现对这个动画时间和总帧数的控制，个人感觉对美术控制动画节奏很实用
• 如果想让动画变速播放，可以双击动画编辑器中两个关键帧之间的蓝线，编辑动画曲线
• 这个动画编辑器还支持自定义事件，以及事件处理的回调函数，还是很友好的