UE4学习笔记:学习UE4中的UMG(图形UI设计器)工具(四)：UMG中的动画

学习完了各自控件及操作后来了解控件蓝图中的动画功能

一.简单的UI动画
我们先来接触控件蓝图左下角的动画面板，首先在视觉界面中添加一个Image控件，并设置图片

在动画面板中单击+Animation，添加一个动画轨

在Timeline时间轴中单机+Track，并在列表中选择之前的创建的Image控件
现在就可以为Image控件添加关键帧了，我们想要实现一个简单的动画，让Image控件可以左右移动
，让Image0-1s右移，1-2s左移。
在时间轴右侧面板中，我们可以设置整个动画的时长，绿色帧表示起始帧，红色帧表示终止帧，滑块用来添加关键帧。我们先确立好动画的时长

然后移动滑块，在滑块所处位置即可添加关键帧，添加方法是找到详情中想要添加关键帧属性右侧的添加关键帧图标，单击即会在滑块处添加一个以这个属性值设定的关键帧，这里需要的是左右移动，所以找到控件详情中的位置x，因为起始帧与终止帧坐标重合，所以以相同的位置x在起始帧与终止帧添加两个关键帧，添加之后发现帧线出出现圆圈代表添加的关键帧


这里我们可以用同样的方法在1s处添加一个移动终止位置X的关键帧，即可完成这个时间轴制作。但是，我们还应该了解另一种添加关键帧的方法，自动添加关键帧。单击Timeline菜单的自动添加关键模式图标

单击之后我们进入自动关键帧模式，可以看到视觉界面右上角出现录像中提示

我们在自动关键帧模式中一旦对属性值进行修改，会自动在当下滑块处添加一个应用修改过属性值后的关键帧，我们先将滑块移到1s，然后去修改位置x的值，可以看到自动在1s处添加了一个关键帧



这样就完成了动画的制作，但是还需要在事件图表中将其播放才能显示，进入事件图表，我们需要利用Play Animation结点来进行动画播放，在结点中我们可以修改播放模式，循环次数等，我们创建的动画也会作为一个变量，这样连线即可

将蓝图添加到屏幕上即可看到会左右来回移动的Image控件了
二.利用结点制作自定义动画
除了可以利用动画面板制作动画，我们也可以在事件图表中利用结点制作动画
这次我希望实现将很多按钮按A键向左移动，按D键向右移动的效果
首先我们先创建一个控件蓝图，添加一个VeritcalBox控件，并在其中添加若干带Text子控件的Button控件

然后为其添加一个函数，这个函数的作用是为了修改其位置X坐标，函数命名为SetX，并添加一个Input输入参数，并这样连线

函数通过Set Position结点根据NewX输入修改了控件所在画板的X坐标

编译保存后我们进入用于添加此控件蓝图的蓝图，比如关卡蓝图，首选依旧是添加刚才创建的蓝图到屏幕

然后核心在于添加Timeline结点与Ease缓动结点
先添加Timeline结点，进入其时间轴，添加一个浮点型轨迹

在时间轴面板右键添加两个关键帧，并将数值(time,value)分布修改为(0,0)与(3,1),将时间轴总长length改为3

返回事件图表，我们可以看到Timeline结点上的引脚

输入执行引脚对应采用何种播放模式，而右侧输出执行引脚中，执行动画动作的在Update引脚，我们的思路就是通过Update引脚连接调用之前的SetX函数，用其不断改变控件坐标，实现动画，
而缓动结点提供了一些预设函数用于帮助实现动画效果

我们这里选择Linear的话，缓动含义为Result=(B-A)*Alpha+A，我们用它的返回值传递给SetX输入参数即可线性控制控件的位置x，通过这两个结点配合SetX我们即可实现动画

除此之外我们还需要有一些额外的操作，我这里新建了一个变量用以initX获取当下控件的位置，同时将Timeline返回的Alpha乘上了500，整体流程比较繁琐，不再赘述，但理清整个流程就不难理解，现在看完整的连线

这样即可实现在界面中按D控件整体持续右移，按A控件整体持续左移