指南和示例

文字动画

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

1.播放模型中的动画

2.动画复用

0. 准备工作

在开始之前,我们需要在 实体 上添加一个 文本渲染器 组件。

image28

1. 创建动画片段

添加好组件后, 我们需要创建一个 动画片段(关于动画片段的介绍,请参考 动画片段 文档)创建 动画片段 有两种方式:

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

1.jpg

  1. 点击添加资产按钮 +,选择 Animation Clip

2.jpg

2. 打开动画片段编辑器

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

3.jpg

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

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

4.jpg

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

上述的准备工作包含:

  1. 为你选择的 实体 创建一个 动画控制组件详细介绍),以及创建一个 动画控制器详细介绍) 资产。
  2. 动画控制器 内会包含一个 动画状态,并且 动画状态 会自动绑定你选择的 动画片段,并连接到 entry 节点上(关于 entry 节点的详细介绍请参考 动画状态机 文档)。
  3. 动画控制组件 会自动绑定 动画控制器

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

5.jpg

3. 设置测试文字并切换到2D视图

  1. 实体 上的 文本渲染器 组件的 文本 属性中输入 Hello World,并设置 字体大小200。你也可以按需设置其他属性,关于文字的更多信息,请参考 文本渲染器 文档。

6.jpg

  1. 切换到 2D 视图

7.jpg

4. 编辑动画片段

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

image-22

  1. 将时间线调到 0:00, 然后将 文本渲染器 组件的 字体大小 属性设置为0,在录制模式下,编辑器会自动添加对应的属性及关键帧。

image-22

  1. 分别在 0:301:00 处,将 文本渲染器 组件的 字体大小 属性设置为100, 200。点击播放按钮,可以预览这个 动画片段

2024-11-20 17.01.54.gif

这样我们的文字放大 动画片段 就制作完成了,你也可以尝试其他 文本渲染器 的属性,比如 颜色字体 等。关于动画编辑器的更多操作,请参考 动画片段 文档。

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

这篇文档对您有帮助吗?