UE5 - 控件蓝图使用详解10（UI动画）
作者：hangge | 2025-12-23 08:35
我们可以通过在 UI 上添加动画来实现指定的效果，添加动画可以使 UI 的切换变得更平滑，也可以在触发某些事件时显示某些特定效果。本文我将通过样例演示如何创建并播放 UI 动画。
1，创建动画
（1）首先我们创建一个控件蓝图 UI_Test，然后在里面添加如下控件。
（2）双击打开控件蓝图，在"设计器”面板中单击左下角的“动画”按钮 B 或使用快捷键 Ctrl + Shift + Space 打开“动画”面板。
（3）单击“动画”按钮添加一个新的动画并命名为“TestAnimation”。选择动画后，“时间轴”面板中会自动显示被选择的动画。
2，设置移动动画
（1）单击“时间轴”面板上方的“轨道”按钮->“所有已命名控件”->“TextBlock_0”，该文本控件会自动添加到轨道上。
（2）在“TextBlock_0”轨道上单击右侧的加号按钮，可以选择性地添加想要修改地内容，如位置、旋转、颜色或文本内容等。
- 也可也直接在“细节”面板中单击“添加此属性的一个关键帧”按钮进行对应设置。
（3）这里我们设置“位置 X”为 -150.0，单击“添加此属性的一个关键帧”
- 时间轴上会自动出现指定内容：
（4）将时间线拖曳到 1.00 处。
- 设置“位置 X”为 400 后再次单击“添加此属性的一个关键帧”按钮添加一个关键帧。
（5）在两个关键帧之间拖曳时间线，可以看到文本会在 -150.0 ~ 400.0 这个范围内移动。
3，设置颜色动画
（1）使用 UI 动画设置颜色可以让控件在某个时刻实现颜色过渡。在“动画”面板上单击“轨道”按钮->“所有已命名控件”->“Border_65”菜单命令，将“边界”子控件添加到时间轴上。
（2）将时间线移动到 0.00 处，设置笔刷颜色透明度为 0.0 后单击“添加此属性的一个关键帧”按钮添加一个关键帧。
（3）将时间线移动到 1.00 处，设置笔刷颜色透明度为 0.5 后单击“添加此属性的一个关键帧”按钮添加一个关键帧。
（4）拖拽时间线可以看到指定时间的颜色透明度变换情况。
4，设置大小动画
（1）在“动画”面板上单击“轨道”按钮->“所有已命名控件”->“Button_0”菜单命令，将“按钮”子控件添加到时间轴上。
（2）将时间线移动到 0.00 处，在“细节”面板中分别单击“尺寸 X”与“尺寸 Y”右侧的“添加此属性的一个关键帧”按钮。
（3）将时间线移动到 1.00 处，处，在“细节”面板中设置“尺寸 X”与“尺寸 Y”分别为 320.0 和 80.0 并分别单击“添加此属性的一个关键帧”按钮。
（4）此时“按钮”子控件的大小会在 1 秒内从 160.0 × 40.0 变到 320.0 × 80.0，在“动画”面板中拖曳时间线可以观察对应的效果。
5，播放动画
（1）添加蓝图可以播放刚才制作的动画，单击“图表”按钮表进入“事件图表”面板，使用“事件构造”和“事件预构造”节点（此节点在创建时会被执行一次）播放动画。
（2）在“我的蓝图”面板中可以看到“变量”卷展栏下有一个名为“TestAnimation”的变量，此变量是创建动画时默认生成的，将该变量拖曳到“事件图表”面板中。
（3）添加一个“播放动画”节点，连接“In Animation”引脚到“Test Animation”动画，将“事件构造”节点连接到“播放动画”节点。
（4）编译并保存蓝图后进入 PIE 运行模式，可以看到控件成功播放了动画。
全部评论（0）