虚幻学习笔记—给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

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

三、总结

无。

相关推荐
SunsPlanter13 分钟前
Word-- 制作论文三线表
学习
武昌库里写JAVA34 分钟前
iview组件库:当后台返回到的数据与使用官网组件指定的字段不匹配时,进行修改某个属性名再将response数据渲染到页面上的处理
java·开发语言·spring boot·学习·课程设计
Bullet3431 小时前
IDEA运行Tomcat出现乱码问题解决汇总
java·经验分享·笔记·tomcat·intellij-idea
东京老树根1 小时前
SAP学习笔记 - 开发29 - 前端Fiori开发 Custom Controls(自定义控件)
笔记·学习
꧁坚持很酷꧂1 小时前
FreeRTOS学习01_移植FreeRTOS到STM32(图文详解)
stm32·嵌入式硬件·学习
致***锌2 小时前
期权怎么判断是不是主力合约?
笔记
~Yogi4 小时前
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
学习·spring·缓存
Moonnnn.6 小时前
【单片机期末】单片机系统设计
笔记·单片机·嵌入式硬件·学习
行云流水剑8 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
门前云梦11 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习