制作动画-cocos游戏开发入门

当前位置:　首页>> 技术小册>> cocos游戏开发入门

Cocos Creator 支持多种动画效果，比如常见的关键帧动画、Spine 以及龙骨等动画格式。

通常我们在制作 2D 动画时，有几种办法：

关键帧动画：通过引擎制作，常用于如 UI 动画、序列帧动画等
骨骼动画：通过第三方 2D 动作制作工具导出并使用
本教程中我们会使用关键帧动画来制作角色的跳跃效果。

首先在角色的 Body 节点上，增加一个 Animation 的组件：

![](/uploads/images/20230710/3423f969f2cbcc4badf7e527a96414dd.png)

在 资源管理器 内新建 Animation 的目录，并创建一个名为 oneStep 的动画剪辑。

![](/uploads/images/20230710/edfe88bf663acfe0927a63cb700bcaf3.gif)

在 层级管理器 里面选中 Body 节点，并将 oneStep 拖拽到 Clips 属性上：

![](/uploads/images/20230710/e835a2979d905fb58c53bedb5605a244.gif)

在编辑器下方控制台处切换到 动画 分页并点击下方的 进入编辑模式 按钮：

![](/uploads/images/20230710/e343a3a1ac6eebf276e166cef0bdec77.png)

在动画编辑器里面，可以添加不同的动画轨道。

![](/uploads/images/20230710/45e96d63649facb7e2744ababfa5e6cd.png)

添加完成 postion 这个轨道以后，就可以添加不同的关键帧，添加方式也比较简单，我们可以在编辑模式下，只要在场景中或者属性检查器内修改物体的位置，此时如果动画轨道上没有关键帧，则会在轨道上添加一个新的关键帧。

这里我们将指向当前帧的指针拖拽到不同位置，并改变物体的位置，此时就会创建新的关键帧。

![](/uploads/images/20230710/0c5408b0b165e906f966b54de7924333.gif)

布局下列的关键帧：

0 帧：位置信息为：[0,40]
10 帧: 位置信息为：[0,120]
20 帧: 位置信息为：[0,40]
记得点击 保存 按钮对动画剪辑进行保存。

可以通过点击 播放 按钮在场景中预览动画。

![](/uploads/images/20230710/57a479a60e316317dca0990a05874b3b.gif)

参考 oneStep 动画的制作过程，制作 twoStep 动画。

![](/uploads/images/20230710/8c2c82cccf06f9cd67cbb1f69c5e7948.gif)

暂无相关推荐.