Unity中使用Animator和trigger参数做简单的UI动画
概述
本文章通过一个制作Toast弹窗的例子,详细讲解如何使用Animator和它的trigger参数来创建简单的UI动画。
Toast弹窗会从屏幕底部下降,停留3秒,然后上升到屏幕上面消失。
最终的效果如下:
原理
Unity帮我们做每帧插值,改变我们设定的属性。
Toast组件构成
![](https://img-blog.csdnimg.cn/20191203092820121.png)
首先根节点是一个空的GameObject,名字ToastRoot
,对齐屏幕顶端,没有Height:
![](https://img-blog.csdnimg.cn/20191203092837685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaDEzMg==,size_16,color_FFFFFF,t_70)
接下来是背景图节点BgRoot
,同样向上对其,高度96像素:
![](https://img-blog.csdnimg.cn/20191203092849847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaDEzMg==,size_16,color_FFFFFF,t_70)
最后是Toast的内容,这一部分任君发挥了,我这里只放了一个文本框TextContent
:
![](https://img-blog.csdnimg.cn/20191203092905136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaDEzMg==,size_16,color_FFFFFF,t_70)
添加Animator组件
我们的目的是让Toast弹窗动起来,所以我们的动画操作对象应该是BgRoot
这张图片。
我们往BgRoot
上添加一个Animator
组件。添加之后可以发现