「Unity」UGUI系列教程——OSU！动态界面制作！

前言

要完成游戏制作UI，除了点击拖动、列表显示和窗口弹出外，与用户体验相关的功能——就是动画效果。

在这节课程我会主要介绍unity的动画系统在UI上的运用，然后先搭建一个动态界面出来。当能熟练掌握动画系统和UI的事件输入输出，我们就在下一节教程里做一个很酷炫的音乐游戏。

参考游戏

《osu!》是一款基于《押忍！战斗！应援团》、《精英节拍特工》和《太鼓达人》等商业游戏改编的免费同人音乐游戏，由Peppy （Dean Herbert）开发制作。

他的标准模式操作只有三种

点击圈（Hit Circle）

滑条（Slider）

转盘（Spinner）

以上内容来自百度百科，总而言之这款游戏界面都可以通过UGUI来完成，而他的操作也可以根据我们学过的内容来实现，如果对音乐游戏有兴趣的玩家可以去试试。

废话不多说，我们开始借（抄）鉴（袭）学（山）习（寨）之路。

准备资源

Osu！客户端文件,附上官网地址

一个资源提取软件MultiExtractor,可以提取Exe游戏的资源。注意资源我们只做学习使用，不能拿来完成商业作品！

得到图片：

这里不得不赞一下Osu的美术，各个规格大小的图片都准备的很整齐。

效果预览

搭建界面

首先根据之前的两篇课程方法, 搭建基本的UI场景。

UI布局

Button组件的Image组件和Button组件分离创建，原因后面会解释到。

创建按钮动画

Button组件的Transition选择Animation,再点击Auto Generate Animation按钮,这时unity会让你保存Animator组件，保存它在你工程的合适位置。

创建出来的Animtor文件，可以看到里面包含了4个动画片段（Clip）。

我们的Btn_Logo物体上出现了Animtor组件，这里简单的讲解下Animtor组件的属性。

打开Animtor的编辑窗口

Animator界面简介

1号位置：动画参数设置窗口，该窗口是点击左上角Parameters按钮出现的，外界的输入信息，想让动画通过动画过渡（Transitions）切换成不同的片段，就是通过这个参数来控制的。

2号位置：动画State,当动画进入这个状态的时候，播放设置在该状态上的动画Clip。注意在State中我们还可以可以设置动画播放的速度。

3号位置：动画过渡Transitions，若游戏运行时满足它Conditions的条件，它就会将动画状态向你连接的动画状态过渡，它的过渡效果是通过插值两个动画数据来实现的，可以在时间窗口中调节融合过渡时间。

以上我们能够看到在动画状态Normal、Highlighted、Pressed、Disabled的进入连线都设置了相应的触发参数。UI就是通过改变动画控制器的触发参数来改变动画的状态的。

编辑动画信息

点击Window窗口，打开Animation界面：

打开后是这样的他什么也没有，这里需要我们选中我们要编辑的动画物体。

Animation窗口简介

1号位置：

点开选择你要编辑的动画Clip，它是读取Animtor动画控制组件里面信息查找的。

2号位置：设置动画的帧率，一般游戏30帧动画已经非常流畅了，因此我们改成30.

3号位置：录制模式，点击后，Unity将会把你对物体的修改操作直接保存在时间帧窗口中。

4号位置：添加属性按钮，点击后会查找这个物体上的所有组件，如果我们挂在了一个脚本在这个物体上，这里也会把脚本控制参数暴露出来。

5号位置：控制每一帧状态的窗口，这是可视化编辑的，我们主要操作都在这里进行。

开始编辑动画信息

在Normal动画片段中添加选择一个属性，我们选择控制这个UI实现跳动效果，实际上就是控制UI的缩放值。

我们设置物体在15帧的时候，UI整体放大1.1倍，然后最后一帧设置回1倍。

调节完后运行游戏，可以看一下效果：

如果要完成复杂的动画我们一般都会打开曲线编辑模式

这样我们可以直观的看到动画的变化程度，接下来的工作就是耐心的调整动画吧。

多加了一些曲线，跳动的感觉更明显了

以此类推，我们将高亮效果的动画Clip也编辑一下

这里必须强调一下，Unity2017中可以直接全选关键帧，拉动蓝色横线可以很方便修改动画效果。因此我只把Normal状态的关键帧复制过来（Unity很多系统都支持Ctrl+C和Ctrl+V拷贝信息），抬高曲线就搞定了。

目前效果：

效果中可以看到未移动鼠标到按钮上时，播放的是Normal动画，当移动鼠标到按钮上时，切换到了Highlighted。当然我们这里可以扩展出点击按钮时播放怎样的动画，比如点击一个按钮后这个按钮渐变消失，就可以编辑Pressed动画片段，控制Image组件的颜色来实现。

扩充我们的界面

我们将其他选项的UI加入进界面，我创建了两个点Tran_menuPos_1和Tran_menuPos_2，利用它来实现我们OSU！这个大的Logo向左处移动，然后弹出四个选项的。

我们的界面功能流程是：点击OSU的Logo按钮，然后Logo向左移动，之后弹出右边4个选项出来，现在开始实现这个流程。

代码搞定后是这样，我们定义三个变量

btn_Logo：Logo按钮的物体

menuPos_1和menuPos_2：需要变化的两个位置点

需要解释的是，我们经常会利用脚本来完成物体的简单移动，而用携程和写Update方法太过于麻烦和耗时了，因此对于动画Unity有很多Tween相关的插件，笔者这里用的是DOTween插件，使用时加上

就可以使用了

语句解释：物体btn_logo将会移动到menuPos_2位置，耗时0.3秒

在此之前选项的按钮都是不可见的，点击Logo按钮之后要让它显示出来。

将脚本挂载到我们的UI画布上并赋值

运行效果：

自定义创建动画

我们的选项现在打开的方式太简单了，我们应该也给选项按钮加入出场效果。

点击Project窗口的空白位置，右键选择创建一个Animator Controller

放到Tran_menuPos_2物体上

再创建一个动画Clip来记录动画信息，创建出来后简单命为show

将命为Show的动画片段拖进Animator窗口中

父无i果要按钮一个一个依次弹出就得一个一个编辑按钮的位置信息，这里我们只用让所有按钮一起向右弹出，因此我创建了一个空物体Option做选项的父物体，我们只用编辑Option的位移信息就可以了。

还有一个属性是IsActive设置物体是否激活，我让物体显示的前10帧时隐藏，避免Logo移动和选项按钮同时移动时的动画穿帮。

现在的效果：

创建可以通用的动画

现在问题来了，我们有4个相同类型的按钮，不可能编辑4个按钮的动画。我们最好能有一个动画控制器就能复用所有要这个动画效果的地方。

在这注意的是Animation界面里面编辑的动画信息是独立存放的。意思就是如果我们编辑了一个名叫Image的子物体位置属性，如果我把动画放在另一个物体上（它也有一个名为Image的子物体），另一个物体也会有相同的动画。

实践一下：

我们将四个UI选项按钮制作成这样的父子层级

只给按钮Btn_Play制作选中动画

制作的动画控制器命名为Btn_Option，

给四个按钮都加上同一个动画控制器

可以看到其他按钮也生效了

实现多种效果的动态UI

有时候UI效果要实现的更好不能只需要位移和缩放，还需要动态改变UI的图片。

Button组件有动态替换图片效果的接口，只用把你要替换的其他图片拖到不同的状态框里面去就实现了。

但是如果又要动画又要替换图片呢？

我们可以添加事件触发组件

点击Add New Event Type按钮可以看到很多事件。几乎所有会用到的事件接口都在这里。而Button组件只是用到了这些选项的部分功能。

我们选择PointerEnter选项，这个选项的效果就是我们鼠标移动到UI上时就会触发，然后将动画组件放到Object框，表示当触发后它会去处理这个物体的相关的功能。

因为我们放入的是动画控制器，在Function接口中选择Animtor组件，然后调用Animotor组件中的SetTrigger设置触发器函数。

然后下面的参数写我们动画控制器里面控制选中按钮动画状态的参数。

这样就可以在鼠标进入UI图片的时候，去播放Btn_play物体上的动画了。

需要注意的是通关Button组件创建的UI会默认设置成为循环，我们这里不需要这个属性，找到Clip资源，把LoopTime选项去掉勾选。

现在的效果：

总结

因为UI的效果调整很多都是感官体验上来做的，我不建议让程序员通关代码去实现，当然简单的位移也没必要浪费美术工作人员的时间。因此我简单介绍了一下Dotween组件，而针对按钮细节的效果实现能不用代码就不用代码。希望主要走程序相关的读者能多研究下Tween相关的组件，而主要走美术相关的读者能多去研究一下Unity的动画相关功能。

这里我简单再说明一下Unity的动画有一个Animator组件，这个是控制作用的组件，而信息都是放在Animation组件中，一个控制播放，一个记录信息。可能会有些读者不清楚关系，这得花时间去研究，因为Unity很多功能都是数据和逻辑分开处理的。

附上源码地址：