熟悉动画编辑器

Cocos Creator 的默认布局中已经包含了 动画编辑器，也可以通过点击编辑器上方主菜单的 面板 -> 动画 -> 动画编辑器 打开 动画编辑器。

动画编辑器 面板可以划分为以下几个主要部分：

更多具体内容请参考下文介绍。

菜单工具栏 中的功能按钮从左到右依次为：

该区域会显示当前选中的动画节点及其子节点，并以与 层级管理器 中的节点树一一对应的方式排列。可点击上方的按钮来隐藏/显示无动画数据的节点，或者直接在输入框中输入节点名称来快速查找节点。

目前支持右键点击节点来选择清空节点数据、迁移节点数据、复制粘贴节点数据。具体内容请参考。

动画时间轴主要用于显示/设置当前节点添加的自定义事件帧、节点（及其子节点）添加的所有动画属性上的（蓝色菱形）并显示预览。

时间控制线（红色竖线）表示当前动画所处的时间节点，可通过以下几种方式更改当前选中时间：

移动时间控制线则 场景编辑器 中的节点也会根据动画轨迹进行相应的移动。

菜单工具栏 中的按钮可用于切换动画时间轴的刻度显示方式。输入框中的数值会随着时间控制线的移动而变化，支持手动输入，输入完成后时间控制线会自动定位到相应的位置。

目前支持以下三种显示方式：

我们一般用帧率（Sample）来表示一秒要划分为多少帧，可以在 动画编辑器 底部的 Sample 选项中进行调整。当时间轴的刻度单位显示方式不同时，受影响程度也不同。

当刻度单位设置为帧时，以帧数为单位，不受帧率影响。
当设置为时间或者 时间（s） 时，同一个刻度表示的时间点会随着帧率的变化而有所不同，这两者之间的转换计算方式如下：

例如将帧率设置为 30，在刻度上添加了一个关键帧，则该关键帧位于动画开始后的第 35 帧。然后把帧率修改为 10，该关键帧所在的总帧数并没有发生变化，仍然处在动画开始后的第 35 帧，而此时关键帧所在位置的刻度读数变成了，换算成时间（s）以后正好是之前的 3 倍。

在操作中如果觉得 动画编辑器 显示的范围太小，需要按比例缩小，让更多的关键帧显示到编辑器内怎么办？

在 动画时间轴 和 动画属性关键帧预览 任一区域内滚动鼠标滚轮，即可放大或者缩小时间轴的横向显示比例。

在 动画时间轴 或者 动画属性关键帧预览 任一区域按下鼠标中键/右键进行拖拽，即可查看动画时间轴左/右侧超出显示区域而被隐藏的关键帧。

该区域主要用于显示/添加/设置当前选中的节点在当前动画剪辑中的动画属性。点击右上角的 + 按钮即可添加动画属性，动画属性包括了节点自有的属性、组件属性（包含用户自定义脚本组件中的属性）。组件包含的属性前会加上组件的名字，比如。

右键点击动画属性或者单击动画属性右侧的按钮即可选择 移除当前属性轨道、清空关键帧，或者 复制粘贴当前属性轨道。具体内容请参考动画属性数据常见操作。

该区域主要用于显示当前选中节点在各动画属性上具体的关键帧设置情况，也是关键帧编辑的主要区域。可以直接在右侧的动画属性上点击右键来添加关键帧。同时在该区域也支持框选、点选关键帧来进行移动、复制、粘贴等操作。详情请参考。

单击选中某一关键帧，关键帧会由蓝色变成白色并且该区域上方会显示当前关键帧的相关信息，若双击关键帧还会将时间控制线移动到当前关键帧所在位置。

当前动画剪辑在动画编辑器上可直接设置的属性包括：WrapMode、Sample、Speed 和 Duration。具体内容请参考。

节点列表与时间轴之间的分界线，以及属性列表与时间轴之间的分界线都是可以用于拖拽更改布局的，通过拖拽可以自由地将 动画编辑器 调整成适合编辑的布局效果。

点击菜单工具栏的按钮，即可打开快捷键面板：

支持开发者自定义 动画编辑器 的快捷键，直接点击要修改的功能的快捷键组合，会出现如下图所示的提示，即可直接修改快捷键。

动画编辑器面板介绍