mirror of
https://github.com/galacean/engine.git
synced 2026-07-01 16:14:22 +08:00
91 lines
4.4 KiB
Plaintext
91 lines
4.4 KiB
Plaintext
---
|
||
order: 5
|
||
title: 文字动画
|
||
type: 动画
|
||
group: 指南和示例
|
||
label: Animation/Examples
|
||
---
|
||
|
||
本示例展示了如何在 Galacean 编辑器中实现文字的动画。通过简单的步骤，你将学习如何制作一个文字动画的[动画片段](/docs/animation/clip)。
|
||
如果你是第一次使用动画编辑器，建议先阅读前面几篇文档：
|
||
|
||
[1.播放模型中的动画](/docs/animation/examples/playAnimation/)
|
||
|
||
[2.动画复用](/docs/animation/examples/reuseAnimation/)
|
||
|
||
## 0. 准备工作
|
||
在开始之前，我们需要在 `实体` 上添加一个 `文本渲染器` 组件。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QlyOTZOGt3cAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
## 1. 创建动画片段
|
||
添加好组件后， 我们需要创建一个 `动画片段`（关于动画片段的介绍，请参考 [动画片段](/docs/animation/clip) 文档）创建 `动画片段` 有两种方式：
|
||
1. 右键点击 **[资产面板](/docs/assets/interface)** 中的空白处，选择 `Create` -> `Animation Clip`
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*XK28Qr2GX6UAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
2. 点击添加资产按钮 `+`，选择 `Animation Clip`
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Dws0TriVVakAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
## 2. 打开动画片段编辑器
|
||
|
||
1. 双击刚刚创建的 `动画片段` 资产
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*w4ReS7ijXgcAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
2. 选择 `实体`，根据提示，我们需要在 **[层级面板](/docs/interface/hierarchy)** 选择一个 `实体` 作为编辑动画的目标。
|
||
|
||
选择编辑器默认创建的 `实体`（你也可以点击层级面板的 `+` 按钮创建一个新的）
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*UvZXSryjAngAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
3. 点击动画片段编辑器的 `Create` 按钮，编辑器会为你做好一些准备工作，本示例你可以先忽略对这些概念的理解。
|
||
|
||
<Callout type="info">
|
||
上述的准备工作包含：
|
||
1. 为你选择的 `实体` 创建一个 `动画控制组件` （[详细介绍](/docs/animation/animator/)），以及创建一个 `动画控制器` （[详细介绍]((/docs/animation/animatorController/))） 资产。
|
||
2. `动画控制器` 内会包含一个 `动画状态`，并且 `动画状态` 会自动绑定你选择的 `动画片段`，并连接到 `entry` 节点上（关于 `entry` 节点的详细介绍请参考 [动画状态机](/docs/animation/state-machine/) 文档）。
|
||
3. `动画控制组件` 会自动绑定 `动画控制器`。
|
||
</Callout>
|
||
|
||
创建完成之后，你会打开动画片段编辑器，如图所示：
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*HD77QZgYEJoAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
|
||
## 3. 设置测试文字并切换到2D视图
|
||
|
||
1. 在 `实体` 上的 `文本渲染器` 组件的 `文本` 属性中输入 `Hello World`，并设置 `字体大小` 为 `200`。你也可以按需设置其他属性，关于文字的更多信息，请参考 [文本渲染器](/docs/graphics/2D/text/) 文档。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*AlLoT5n2EswAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
2. 切换到 `2D` 视图
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*_oq3SIs5jN0AAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
## 4. 编辑动画片段
|
||
|
||
1. 开启 `动画片段` 编辑器的录制模式
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*S4jNRZ-Ia7AAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
2. 将时间线调到 `0:00`， 然后将 `文本渲染器` 组件的 `字体大小` 属性设置为0，在录制模式下，编辑器会自动添加对应的属性及关键帧。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*FXL-RYGP8YUAAAAAAAAAAAAADsJ_AQ/original" />
|
||
|
||
3. 分别在 `0:30`，`1:00` 处，将 `文本渲染器` 组件的 `字体大小` 属性设置为100， 200。点击播放按钮，可以预览这个 `动画片段`。
|
||
|
||
|
||
|
||
这样我们的文字放大 `动画片段` 就制作完成了，你也可以尝试其他 `文本渲染器` 的属性，比如 `颜色`，`字体` 等。关于动画编辑器的更多操作，请参考 [动画片段](/docs/animation/clip) 文档。
|
||
|
||
关于如何使用这个 `动画片段` 到你的项目中，可以参考文章顶部列出的两篇文档。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|