本示例展示了如何在 Galacean 编辑器中实现 2D 帧动画。通过简单的步骤，你将学习如何制作一个帧动画动画片段。 如果你是第一次使用动画编辑器，建议先阅读前面几篇文档：

1.播放模型中的动画

2.动画复用

0. 准备工作

在开始之前，我们需要有制作帧动画所需的序列帧图片，雪碧图和单帧图片都可以。本示例使用雪碧图，如果你没有，可以在这里下载 雪碧图。

1. 导入纹理

有三种方式导入 纹理 ：

1. 将图片拖入编辑器的 资产面板 中

2. 右键点击 资产面板 中的空白处，选择 Upload -> Texture2D

3. 点击上传按钮，选择 Texture2D

2. 创建精灵

关于 精灵 的详细介绍请参考 精灵 文档

创建 精灵 有三种方式：

1. 右键点击 资产面板 中的空白处，选择 Create -> Sprite

2. 点击添加资产按钮 +，选择 Sprite

3. 如果你是单帧图片，可以右键点击 资产面板 中的空白处，选择 Upload -> Sprite，然后选择你的单帧图片。 这种方式，在导入 纹理 的同时会自动创建一个 精灵 资产并绑定此图片作为其 纹理 。

创建三个 精灵 资产，分别对应雪碧图中的三帧。

3. 为精灵绑定纹理

如果你使用雪碧图的话，需要根据帧数，配置合适的 Region。如果你使用单帧图片的话，直接按第一步绑定即可。

1. 点击 精灵 资产，点击 纹理 属性，选择对应的纹理。

2. 根据帧数，配置合适的 Region，本示例共有三帧，并且只有一排， 所以每帧的 Region 的 W 为 1/3 (对应的纹理 width 也改为原来的1/3) H 为 1。

3. 修改另外两个 精灵 的 Region，与第一个 精灵 的 Region 不同的是，它们的 Region 的 X 值不同，分别为 0, 1/3, 2/3。

Sprite1 :

Sprite2 :

全部绑定好纹理后，精灵 资产会展示对应的图片，如图所示：

4. 创建动画片段

准备好 精灵 后， 我们需要创建一个 动画片段（关于动画片段的介绍，请参考 动画片段 文档）创建 动画片段 有两种方式：

1. 右键点击 资产面板 中的空白处，选择 Create -> Animation Clip

2. 点击添加资产按钮 +，选择 Animation Clip

5. 打开动画片段编辑器

1. 双击刚刚创建的 动画片段 资产

2. 选择 实体，根据提示，我们需要在 层级面板 选择一个 实体 作为编辑动画的目标。

选择编辑器默认创建的 实体（你也可以点击层级面板的 + 按钮创建一个新的）

3. 点击动画片段编辑器的 Create 按钮，编辑器会为你做好一些准备工作，本示例你可以先忽略对这些概念的理解。

创建完成之后，你会打开动画片段编辑器，如图所示：

6. 设置实体并切换到2D视图

1. 删掉默认的 网格渲染器 组件（如果你是自己创建的, 忽略）。为选择的 实体 添加一个 精灵渲染器 组件，

2. 为 精灵渲染器 组件的 精灵 属性绑定一个我们刚刚创建的 精灵 资产， 作为默认的 精灵。

3. 将 实体 默认的旋转重制，并切换到 2D 视图

7. 编辑动画片段

1. 开启 动画片段 编辑器的录制模式

2. 将时间线调到 0:00， 然后将 精灵渲染器 组件的 精灵 属性切换到第一帧的 精灵 资产。因为我们的第一帧与 精灵渲染器 组件的默认 精灵 相同，所以仍然选择此 精灵。 在录制模式下，编辑器会自动添加对应的属性及关键帧。

3. 分别在 0:20, 0:40 处，将 精灵渲染器 组件的 精灵 属性切换到第二帧，第三帧的 精灵 资产。在 1:00 处，再切换回第一帧的 精灵 资产。 首尾的关键帧相同，在循环播放时动画就不会出现抖动了，点击播放按钮，可以预览这个 动画片段。

这样我们的帧动画 动画片段 就制作完成了。关于动画编辑器的更多操作，请参考 动画片段 文档。

关于如何应用这个 动画片段 到你的项目中，可以参考文章顶部列出的两篇文档。