如何添加UI动画效果

痛定思痛。 2022-06-17 07:51 214阅读 0赞

项目中有功能需要在代码中动态创建UGUI对象，但是在网上搜索了很久都没有找到类似的教程，最后终于在官方文档中找到了方法，趁着记忆犹新，写下动态创建UGUI的方法，供需要的朋友参考

**一、新建一个Test项目**

首先我们新建一个名为Test的项目来实践我们这次的内容，项目创建成功后，我们新建一个Button对象，如下图：

![blob.png][]

新的UGUI全部都基于一个Canvas画布，如果你的场景里面没有Canvas，当你创建一个UI对象时，编辑器会自动帮你创建一个Canvas

![blob.png][blob.png 1]

然后我们设置一下Cavans的缩放模式和尺寸，本例中我们以iPhone6的尺寸大小为准，我们选中Canvas，然后在其Canvas Scaler组件中，修改Ui Scale Mode为Scale With Screen Size，然后将

分辨率设置为750\*1334

![blob.png][blob.png 2]

**二、设置Button属性**

然后我们将Button的位置调整至屏幕的右上方，然后将字体大小放大，文本内容修改为点我（这边大小和文本内容可以根据自己的喜好来调整）

![blob.png][blob.png 3]

**三、动态创建UGUI对象的原理说明**

动态创建UGUI对象的方法，简单来说就是将我们需要创建的UGUI对象制作成一个Prefab，然后使用Instantiate方法将其实例化，最后使用相关的API对其属性进行动态设置

**四、制作自定义的Text Prefab**

接下来我们就来创建自定义的Text Prefab，为动态创建做准备，首先我们会自定义一个如下图所示的Text：

![84177-b8ad8337e797d53b.gif][]

Text效果图

我们来看看这个自定义的Text有哪些内容：

*  字体的颜色是红色
 *  Text穿创建后会播放一段放大动画
 *  放大动画播放结束后，Text会向上移动一段距离
 *  移动结束后，Text就会消失掉

**1、设置MyText属性**

清楚了Text所需的内容后，我们首先来新建一个Text对象，并且命名为MyText

![84177-e422765ed0acbc43.png][]

新建Text对象

然后我们重置MyText的Rect Transform，重置之后将其宽高分别设置为750和100，接着我们将MyText的字体大小设置为40，颜色设置为红色，然后将对其方式设置为居中：

![84177-dad09550a6c26288.png][]

设置MyText宽高

![84177-9e7b97ecd1498056.png][]

设置MyText字体属性

**2、为Text添加放大动画**

MyText的位置和字体属性我们已经设置好了，接下来我们就需要为MyText增加放大和上升两个动画效果了，首先我们选中MyText，然后打开Animation编辑器（Mac版可以使用?+6的快捷键打开）

![84177-9f0145bee78f11c7.png][]

打开Animation编辑器

然后在Animation编辑器中，点击Create按钮，新建一个动画

![84177-bb79db79e07a488c.png][]

新建一个动画

当我们点击Create按钮后，编辑器会弹出一个对话框，我们需要指定新建的Animation的文件名和存放路径，这里我们第一个需要制作的动画是字体出现是的放大效果，所以我们将其命名为Appear，然后为了使资源方便管理，我们将所有的动画资源放入到\_Animator的文件夹下面（需要大家自己创建文件夹，关于如何创建可以参见以前的教程）

![84177-de07ec9839b44f3c.png][]

新建Animation对话框

创建成功后，我们会发现除了我们自己创建的Appear文件，编辑器还自动创建了一个名为MyText的Animator Controller文件，如下图，根据文件类型名字就可以看出，这个文件是用来控制和管理我们Appear这类文件的，像我们需要实现的Text出现后播放放大动画，然后再播放上升动画，这一个过程和逻辑就是通过Animator Controller来实现的，后面我们会讲到

![84177-6bd993c49ae378e1.png][]

Animator Controller文件

接下来我们回到Animation编辑器里面，在这个里面我们可以对MyText对象的一个属性进行动态变化，从而形成动画效果，Unity对每个对象可以操控的属性变量都列举出来了，这里我们以Text对象来举例，我们点击Add Property按钮，会弹出下级菜单，我们在菜单中可以看到能够操作的属性变量有3大类：

*  Rect Transform：该类是针对Rect Transform组件的属性进行变化，我们可以改变这些属性来实现对象大小的变化，或者位置的移动等
 *  Text：该类是针对Text组件的属性进行变化，我们可以改变这些属性来实现诸如字体颜色变化，字体显示与否等变化
 *  Animator：该类是对Animator组件的属性进行变化

![84177-742c745b45f1d815.png][]

Add Property按钮

为了实现MyText出现后放大的效果，我们添加Scale属性的变化，由于我们的UI其实是一个平面，对其大小能够产生视觉变化的只有X和Y轴的变化，然后我们在本例中，希望放大效果一共播放0.5秒，其中在0.25秒是MyText放大到1.5倍，所以我们在0.25秒的时候添加一个关键帧，然后将结束的关键帧拖拽至0.5秒处，如下图：

![blob.png][blob.png 4]

添加关键帧

接着我们选中0.25秒的关键帧，将该帧的Scale.x和Scale.y都设置为1.5

![blob.png][blob.png 5]

设置缩放变化

接着我们就可以点击Animation编辑器里面的播放按钮，来测试一下动画效果了

![84177-92452f5413fe77aa.gif][]

动画效果

放大的动画就做好了，接下里我们继续制作上升的动画效果

**3、为Text添加上升动画**

首先我们点击Appear按钮，然后选择Create New Clip...，为MyText添加一个新的动画文件：

![blob.png][blob.png 6]

新建一个动画文件

同样的在弹出的新建对话框中，我们将动画文件的名字命名为UpRight，存放在\_Animator文件夹下面：

![blob.png][blob.png 7]

新建对话框

接着我们在UpRight动画中添加Anchored Position变化：

![blob.png][blob.png 8]

添加Anchored Position变化

上升动画在本例中，我们希望他能持续1秒，并且上升100个像素，所以我们选中结束的关键帧，在将其Position.y的值设置为100：

![blob.png][blob.png 9]

Paste\_Image.png

然后我们就可以测试一下动画效果是否如我们所预期的：

![84177-601c651cc752b3e4.gif][]

测试动画效果

好啦，到这一步，我们已经为MyText添加了两个动画，分别是放大效果和上升效果，接下来我们就需要将两个动画衔接起来

**4、编排两个动画播放顺序**

要编排动画，就需要用到Animator Controller文件，我们双击打开MyText，会自动打开Animator编辑器：

![84177-e6c0448438d67858.png][]

打开MyText文件

![blob.png][blob.png 10]

Animator编辑器

我们可以通过编辑器内容看到，现在的动画编排状态是MyText一开始就会进入Appear动作，所以要达到我们的预期效果，我们就只需要再添加一条衔接线，让MyText播完Appear后就进入UpRight状态，我们鼠标右键点击Appear状态，然后选择Make Transition，然后连接UpRight状态

![blob.png][blob.png 11]

链接UpRight状态

接下里我们就可以运行游戏看看动画效果的衔接是否正确了：

![84177-4756ed668f22356b.gif][]

测试衔接效果

通过测试我们可以看到，现在MyText出现后会播放放大效果，然后再播放上升效果，但是有一个问题，他会一直循环播放上升效果，所以我们需要将动画的循环播放给关掉

![84177-cc2ed6776d22a16a.png][]

关闭循环播放

这里我们需要将Appear和UpRight两个动画的循环都关掉，关掉之后我们再运行一下游戏，就会发现动画不会循环播放了

**5、添加移除脚本**

现在我们还存在最后一步，就是MyText上升动画播放完成后，我们需要将MyText删除掉，所以一下我们需要给MyText添加一个脚本，脚本命名为DestroyByTime，由于我们两个动画播放的总时间为1.5秒，所以我添加脚本让MyText生成后的1.5秒就自己销毁掉，下面是脚本的代码内容：

![84177-47a1d19bd5f277e6.png][]

完整的代码

**6、制作成Prefab**

做完上面这些工作后，我们便可将MyText制作成一个Prefab了，制作方法很简单，直接将MyText拖入到Prefabs文件夹就可以了，这里就不做详细介绍了

[blob.png]: /images/20220617/e3f71d4c256142938deec3b3468bdcd6.png
[blob.png 1]: /images/20220617/c3d29b02e7a64eb3b11c9f613a93aeaf.png
[blob.png 2]: /images/20220617/c77a5993c30b475b8c56ab8cb2e0e7ab.png
[blob.png 3]: /images/20220617/42c401f5fd8344388fc0fd3131262634.png
[84177-b8ad8337e797d53b.gif]: /images/20220617/a703f98dbd5540539a2e0d49182101c2.png
[84177-e422765ed0acbc43.png]: /images/20220617/2281912757e540ccabda902e52fd4334.png
[84177-dad09550a6c26288.png]: /images/20220617/6236723b70e2409bb060568ba531d946.png
[84177-9e7b97ecd1498056.png]: /images/20220617/002dcc671d57425283a0dfd8d55bf0fc.png
[84177-9f0145bee78f11c7.png]: /images/20220617/ce98eebfdb0c443ba95a32a0fd566f6f.png
[84177-bb79db79e07a488c.png]: /images/20220617/fbf3b0f2a5904340877b0206e6ab7806.png
[84177-de07ec9839b44f3c.png]: /images/20220617/3075b32bcdce4cab9c2b3f2d694c617b.png
[84177-6bd993c49ae378e1.png]: /images/20220617/182c0be7fe23477484ab2f5901c1035e.png
[84177-742c745b45f1d815.png]: /images/20220617/bcbcad70ea9f453b8a8a5d9cbc5248bb.png
[blob.png 4]: /images/20220617/107ff7d905dc4b5a8d0485a479088689.png
[blob.png 5]: /images/20220617/3cd5e693c75544e393b370ab39cea898.png
[84177-92452f5413fe77aa.gif]: /images/20220617/8575aa095bb14b9598247a3d8cd00893.png
[blob.png 6]: /images/20220617/108cdbc1142741238304d2e801655a0f.png
[blob.png 7]: /images/20220617/cb064c7ac4504be68e4104450d46eb71.png
[blob.png 8]: /images/20220617/9ba2ad33adf047cc8616d2f4ee407ee6.png
[blob.png 9]: /images/20220617/9aa8b7d16ffd47bd83f75833f9f393d6.png
[84177-601c651cc752b3e4.gif]: /images/20220617/3c88a493b3ae45d18b78ec9e243a6206.png
[84177-e6c0448438d67858.png]: /images/20220617/8f1957c7e3f941c5a9af9749392042ac.png
[blob.png 10]: /images/20220617/667049416bce41da8c9f0ee84e9c3a01.png
[blob.png 11]: /images/20220617/7c6afec4f47f442b937b166bcf7e4c1b.png
[84177-4756ed668f22356b.gif]: /images/20220617/ff5d7243e91e468080bb77a69a6d49f2.png
[84177-cc2ed6776d22a16a.png]: /images/20220617/55869bf241804c9faf1a75c576c898a5.png
[84177-47a1d19bd5f277e6.png]: /images/20220617/f2617f8a3fa143979724f13100354593.png