CocosCreator中使用Animation制作动画

CocosCreator中使用Animation制作动画 大家好，今天给大家分享的是关于如何使用CocosCreator来制作动画效果的经验。 我们知道，一个游戏中不可或缺的元素就是动画，比如小鸟展翅动作，自行车咕噜转动，人物走路等。这些简单的动作是一个独立展示的元素，使用动画组件Animation来制作是做合适的。下面我们就来制作一个卡通人物走路的动画效果。 我们使用的工具CocosCreator版本是2.4.3，开发环境是windows10系统。先来创建一个空白的工程，取名AnimationTest。

创建后，我们在左侧的资源管理器的assets文件夹上右击，选择创建Scene. 输入AnimationScene，这个就是我们的主场景啦。还需要把动画资源的图片导入进来，先创建文件夹res, 把相关的图片拖入该文件夹中。我这里是Frame001-007。 我们是按图片来显示的，所以在canvas下要创建一个sprite组件。点到动画编辑器。

这时候，在屏幕正下方就可以看到提示，我们点击创建Animation组件的按钮，右侧显示添加成功。接下来，需要我们创建动画Clip.

动画Clip就是帧的意思，我们动画就是多张连续的图片按顺序播放产生的效果，所以每一张图片就是一帧。至于一帧显示多长时间，这是在编辑器里面可以设置的。 我们直接点击创建动画Clip，再点击左上角的编辑小图标，进入帧动画编辑模式。

红色框框的部分是时间轴，我们可以用鼠标滚轮来放大缩小显示的范围和粒度，竖着的红线表示当前帧所处的时间轴位置。 我们在属性列表中点击Add Property按钮，选择cc.sprit.spritFrame类型。

接下来就是添加帧了，然后从左侧的资源管理中将Frame001拖动到属性列表中0:00的位置，这样第一帧就放好了。再拖动第二幅图片Frame002到0:05的位置。一次类推，把全部图片加完。

接下来修改wrapMode, 默认normal表示按顺序播放一次。我们要不停走路，需要循环播放。所以这里要改成Loop。其他几个模式， Reverse表示倒序播放， PingPang表示先正方再反着播放。LoopReverse表现倒着循环播放，PingPangReverse表示先反着播放再正着播放。 这时候基本就制作完成了。可以点击动画编辑器上的播放按钮来测试效果。测试没问题就可以关闭动画编辑器，回到我们游戏的编辑场景了。我们来把刚刚做做的动画Clip添加到Animation组件上吧。

下面的PlayOnLoad选项要勾上哦，这样就会自动播放啦。

这就就跑起来啦，Let’s go!

代码请查看。 最下面有下载链接。