虚幻学习笔记—给UI添加动画

一、前言

本文所使用的虚幻版本为5.3.2,之前工作都是用unity,做这类效果用的最多的是一个DoTween的插件,在虚幻中都内置集成了这这种效果制作。
图1.1 UI动画

二、过程

1、首先,在诸如按钮、图像等可交互控件中选中,如图2.1.1所示,如果没有动画视图,需要在窗口中
图2.1.1 按钮动画编辑

勾选出动画,如图2.1.2所示:
图2.1.2 动画视图

2、然后在图2.1.1中点"+动画",即可添加属于该按钮的"专属"动画,这里的专属还未真正绑定到按钮中,如图2.2.1所示给动画命名为"按钮动画"。
图2.2.1 添加了新的按钮动画

3、此时有两种方式添加具体的动画效果,

1)直接点击右边的"+轨道",如图2.3.1所示,在列表中选择该按钮相关的
图2.3.1

然后,在"按钮"后面的"+"号出点击,选择相关的动画类型,如图2.3.2所示:
图2.3.2

2)第二种方式,此时在该按钮的细节面板中挑选有如图2.3.3所示标记且想通过动画改变的属性
图2.3.3

直接点击该标记即可实现第一种方式类似的效果,我更推荐这种方式,简单直接有效。

4、通过3给动画添加了一个关键帧后,在轨道右面的时间轴处拖动一段时间,如图2.4.1所示:
图2.4.1

然后在新的时间轴处以同样的方式插入一个改变属性后的关键帧。我在起始点的关键帧都是给了面板位置x。通过按空格键可预览此时动画的效果,如图2.4.2所示:
图2.4.2 动画预览

5、最后一步是动画绑定,点击按钮事件,给其添加一个点击事件。如图2.5.1所示:此时刚创建的
图2.5.1

"按钮动画"在这里会变成一个在"动画"标签里的变量。最后编译保存即可实现运行时的按钮动画了。

三、总结

无。

相关推荐
kinl201829 分钟前
cs2385_note1 (lec6-lec8)
笔记
FatHonor39 分钟前
【golang学习之旅】使用VScode安装配置Go开发环境
vscode·学习·golang
Edward111111111 小时前
3月24 内部类
学习
我不是程序猿儿1 小时前
【嵌入式】适合 STM32 初学者BootLoader 入门学习心得
linux·stm32·单片机·嵌入式硬件·学习
中屹指纹浏览器1 小时前
2026住宅IP网络环境下指纹浏览器稳定性优化与工程实践
经验分享·笔记
液态不合群2 小时前
一文学习 Spring 声明式事务源码全流程总结
java·学习·spring
云边散步2 小时前
godot2D游戏教程系列二(20)
笔记·学习·音视频
CyanMind2 小时前
IsaacLab 训练范式探索(二):从“上帝视角”到实机落地的蒸馏学习
学习
吃个糖糖2 小时前
Open3D学习点云读取与显示
学习
DANGAOGAO2 小时前
Transformer学习
深度学习·学习·transformer