一、新建一个控件蓝图,命名为TextTip。将Text控件拖拽到Canvas下,设置文字大小

ios uiview 动画无效 ui界面动画_拖拽

二、在动画面板点击 +Animation创建新动画命名为Anim,创建完成后选中Anim

ios uiview 动画无效 ui界面动画_控件_02

ios uiview 动画无效 ui界面动画_控件_03

三、选中CanvaPanel下的Text,并在TimeLine界面下,选择+Track 选择TextTip。(TextTip(Canvas Panel Slot )该选项只能操作插槽中的值))

ios uiview 动画无效 ui界面动画_拖拽_04

四、点击Track,可选择要制作动画的变量,下面例子中制作文字从无到有,然后向上移动,移动过程中文字消失最后被卸载掉。

ios uiview 动画无效 ui界面动画_控件_05

1.在Track中选择Color and Opacity

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_06

ios uiview 动画无效 ui界面动画_控件_07

2.制作关键帧,文字显示过程为1秒,停顿时间0.5秒,上升时间0.5秒

起始帧透明度为0将A更改为0,选择具体的RGBA后的+号进行创建关键帧,显示的只有单独的一个点表示对应值,如果选择Color and Opacity后的+号创建关键帧,将会把RGBA的值都进行记录。

ios uiview 动画无效 ui界面动画_拖拽_08

1秒时将A改为1(可以点击具体行后面的+号创建关键帧,也可以直接进行赋值,确认后会在指示条的位置创建关键帧。)

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_09

用此方法,在1.5s处设置透明度A为1, 2s处设置透明度为0

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_10

20fps:每次移动的最小单位,此值含义为一秒钟执行20帧,每帧长度0.05s。(可以通过拉动指示条进行查看)

后面曲线按钮的是将设置的关键帧值通过曲线的形式展示,可以看到每个值的变化曲线,可以进一步控制值的变化(点击后再次点击就回到初始界面)

透明度设置情况

ios uiview 动画无效 ui界面动画_关键帧_11

3.点击TextTip右侧 +Track选择Transform进行设置Y轴方向上的位移

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_12

4.设置Y轴的移动值

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_13

在帧动画中的0s到1.5秒处设置Y的值为0,2s处设置-200

ios uiview 动画无效 ui界面动画_关键帧_14

5.调整同值情况下也会有位移产生的错误效果

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_15

点击曲线图按钮,选中要操作的变量,左侧栏显示,如果选择整体的Transform,会显示xy的所有曲线,如果选择y,会单独显示y轴上值的变化

将不该为曲线部分调整为直线,调节平衡点可以调节曲线弯度

ios uiview 动画无效 ui界面动画_控件_16

6.动画预览,返回到动画界面,按空格键查看效果。

五、设置UI控件在被创建时,就调用动画

1.选中TextTip控件,将其设置为变量(is Variable)。

2.选择进入控件蓝图图表界面,创建一个Text类型的变量,命名为TextShow,并暴露参数用于外部调用,(用来接收外部传入的字符串给Text显示文字赋值)

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_17

3.在事件Construct节点编辑蓝图逻辑

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_18

动画Anim在左侧我的蓝图,Animations下方,拖拽到蓝图中,调用playAnimation节点进行播放动画设置

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_19

其中Play Mode 是用来设置动画正向播放,倒播,循环播放

六、关卡蓝图或者其他控件蓝图设置显示UI控件逻辑

ios uiview 动画无效 ui界面动画_关键帧_20

七、编译运行查看效果

ios uiview 动画无效 ui界面动画_控件_21

八、如果文字显示后飘走不进行将该控件移除,会导致此控件一直占用资源,所以需要在动画播放完毕后触发结束事件,将此控件移除

1.在TextTip控件蓝图图表中,我使用的UE4版本为4.22.2,在之前的版本中选择Anim后细节面板下有动画开始及动画结束的事件。选择事件进行逻辑控制即可。

ios uiview 动画无效 ui界面动画_拖拽_22

2.如果没有此选项,需要在设计师面板中,在+Track面板,选择事件,进行一个事件绑定

ios uiview 动画无效 ui界面动画_控件_23

或者在TimeLine左侧+track下选择Event Track,进行事件创建

ios uiview 动画无效 ui界面动画_拖拽_24

上面两种创建事件的方法区别在于,如果在某个具体的对象下进行事件创建,创建的事件只能绑定在此对象上。

ios uiview 动画无效 ui界面动画_关键帧_25

而event Track,是在时间轴上绑定一个事件。不局限于某个对象。

使用时根据不同的情况进行事件格式创建即可,操作是一样的。

3.添加一个事件,将指示条拖拽到最后一帧上,点击事件后面的 + 号进行创建关键帧

ios uiview 动画无效 ui界面动画_控件_26

可以选中事件创建的关键帧双击进入图表对应的事件节点界面,也可以直接到图表界面中找到函数,可以进行重命名。双击进入该函数中

ios uiview 动画无效 ui界面动画_控件_27

编辑蓝图逻辑:使用Remove from Parent节点,将TextTip控件蓝图移除。

ios uiview 动画无效 ui界面动画_拖拽_28

事件的使用不仅仅是在动画结束时调用移除控件,也可以在动画播放过程中定义其他逻辑,实现一些效果或者功能。

另外一个操作方法,在蓝图图表面板函数项,点击Override,其中有AnimationStart和AnimationFinished函数,重写编辑逻辑也可以。

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_29

九、调整整体动画时间

1.有时 误操作或者动画时间调整,导致动画运行时间太长

ios uiview 动画无效 ui界面动画_ios uiview 动画无效_30

动画正确结束时间为1秒,结果整体动画时间超过这个时间,此时将动画放大后,会看到对应的动画长度超出的部分尾部会有一个可以拖拽的区域

ios uiview 动画无效 ui界面动画_控件_31

鼠标移上去显示<-> 进行左右拖拽操作,只要拖拽的部分是最后一个超出范围的,就会控制结束时间的移动,就可以调节整体动画的结束时间,设置动画开始时间也是一样的操作。

ios uiview 动画无效 ui界面动画_关键帧_32