前言

游戏制作UI除了能够点击拖动、列表显示、窗口弹出之外，还需要有一个与用户体验密切相关的功能，那就是动画效果。

在本课程中，我将主要介绍unity的动画系统在UI中的应用，然后先构建一个动态界面。一旦我们熟练了动画系统和UI事件输入输出，我们将在下一个教程中制作一个很酷的音乐游戏。

参考游戏

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

标准模式操作只有三种：

命中圈

滑块

旋转器

以上内容来自百度百科。总之，游戏界面可以通过UGUI来完成，其操作也可以根据我们所学来实现。对音乐游戏感兴趣的玩家可以尝试一下。

话不多说，我们开始向（抄）学习、向（山）学习、向（村）学习。

准备资源

奥苏！客户端文件，附上官网地址https://osu.ppy.sh/p/download

一款资源提取软件MultiExtractor，可以从Exe游戏中提取资源。请注意，我们仅将资源用于学习，不能用于完成商业作品！

获取图片：

在这里不得不赞一下大须的艺术。各种尺寸的图片都准备得整整齐齐。

效果预览

构建界面

首先，根据前面两门课程方法搭建一个基本的UI场景。

用户界面布局

Button组件中的Image组件和Button组件是分开创建的，原因稍后会解释。

创建按钮动画

选择“按钮”组件的“过渡动画”，然后单击“自动生成动画”按钮。这时候unity会让你保存Animator组件，并将其保存在你的项目中合适的位置。

创建的Animtor文件可以看到包含4个动画片段（Clips）。

Animtor 组件出现在我们的Btn_Logo 对象上。这里简单解释一下Animtor组件的属性。

打开Animtor的编辑窗口

Animator界面介绍

第1位：动画参数设置窗口。单击左上角的“参数”按钮即可显示此窗口。外部输入信息，如果想让动画通过动画转场（Transitions）切换到不同的片段，就是通过这个参数来控制的。

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

位置3：动画过渡。如果游戏运行时满足其Conditions 条件，它将把动画状态转换为您连接的动画状态。它的过渡效果是通过插入两个动画数据来实现的，可以在窗口中调整混合过渡时间。

上面我们可以看到，为动画状态Normal、Highlighted、Pressed、Disabled的传入连接设置了相应的触发参数。 UI通过改变动画控制器的触发参数来改变动画的状态。

编辑动画信息

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

打开后是这样的，什么也没有。这里我们需要选择我们想要编辑的动画对象。

动画窗口简介

位置1：

单击以选择要编辑的动画剪辑。通过读取Animtor动画控制组件中的信息找到的。

位置2：设置动画的帧率。一般游戏中30帧的动画就很流畅了，所以我们改成30帧。

位置3：录音模式。单击后，Unity 会将您对对象的修改直接保存在时间范围窗口中。

位置4：添加属性按钮。单击后，将搜索该对象上的所有组件。如果我们在这个对象上挂一个脚本，脚本控制参数也会暴露在这里。

位置5：控制各帧状态的窗口。这是用于可视化编辑。我们的主要业务都在这里进行。

开始编辑动画信息

在法线动画剪辑中添加并选择一个属性。我们选择控制这个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！大徽标移至左侧，然后弹出四个选项。

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

代码完成后是这样的。我们定义三个变量

btn_Logo：徽标按钮对象

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

需要说明的是，我们经常使用脚本来完成对象的简单移动，但是使用携程并编写Update方法过于繁琐和耗时。因此，Unity有很多Tween相关的动画插件。笔者这里使用的是DOTween插件。使用时添加

即可使用

语句解释：对象btn_logo会移动到menuPos_2位置，需要0.3秒。

在此之前，选项按钮是不可见的。单击徽标按钮使其出现。

将脚本安装到我们的UI 画布并为其分配一个值

运行结果：

创建自定义动画

现在我们的选项打开方式太简单了，我们还应该给选项按钮添加外观效果。

单击“项目”窗口中的空白区域，右键单击并选择“创建动画控制器”

将其放在Tran_menuPos_2 对象上

创建另一个动画Clip来记录动画信息。创建后，只需将其命名为show即可。

将名为Show 的动画剪辑拖到Animator 窗口中

如果想让按钮一一弹出，就得一一编辑按钮的位置信息。这里我们只需要让所有的按钮一起弹出到右边即可，所以我创建了一个空对象Option作为选项的父对象。我们只需要编辑Option的位移信息就足够了。

另一个属性是IsActive，用于设置对象是否被激活。我隐藏了前10 帧显示的对象，以避免当徽标移动和选项按钮同时移动时动画中断。

目前效果：

创建可以通用的动画

现在问题来了，我们有4个相同类型的按钮，并且无法编辑4个按钮的动画。我们最好有一个动画控制器，可以重用所有需要这个动画效果的地方。

这里注意，Animation界面中编辑的动画信息是独立存储的。这意味着，如果我们编辑名为Image 的子对象的位置属性，如果我将动画放在另一个对象上（该对象也有一个名为Image 的子对象），则另一个对象将具有相同的动画。

试试看：

我们将四个UI 选项按钮放入父子层次结构中，如下所示

仅为按钮Btn_Play 创建选择动画

生成的动画控制器名为Btn_Option。

将相同的动画控制器添加到所有四个按钮

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

实现多种效果的动态UI

有时候，为了达到更好的UI效果，不能只是平移和缩放，还需要动态改变UI图片。

Button 组件有一个用于动态替换图像效果的接口。您只需将要替换的其他图像拖到不同的状态框中即可。

但是如果您想要制作动画并替换图片怎么办？

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

单击“添加新事件类型”按钮可查看许多事件。几乎所有会用到的事件接口都在这里。 Button 组件仅使用这些选项的部分功能。

我们选择PointerEnter 选项。这个选项的作用是，当我们的鼠标移动到UI上时，就会触发它，然后将动画组件放置在Object框中，也就是说，当触发时，就会处理这个对象的相关功能。

因为我们放置的是动画控制器，所以在Function界面中选择Animtor组件，然后在Animator组件中调用SetTrigger来设置触发函数。

然后在我们的动画控制器中写入以下参数来控制所选按钮的动画状态。

这样，当鼠标进入UI图像时，就可以播放Btn_play对象上的动画了。

需要注意的是，通过清除Button 组件创建的UI 默认会设置为循环。我们这里不需要这个属性。找到Clip 资源并取消选中LoopTime 选项。

目前效果：

总结

因为很多UI效果的调整都是基于感官体验，所以我不建议让程序员通过代码去实现。当然，没必要用简单的位移来浪费美术人员的时间。因此，我简单介绍了Dotween组件，无需编码即可实现按钮细节的效果。希望主要对编程感兴趣的读者可以多研究一下Tween相关的组件，主要对美术感兴趣的读者可以多研究一下Unity的动画相关功能。

这里我简单说明一下，Unity的动画有一个Animator组件，它是一个控制组件，信息都放在Animation组件中。一个控制播放，另一个记录信息。有些读者可能没有意识到其中的关系，这需要时间去研究，因为Unity的很多函数都是分开处理数据和逻辑的。

附源码地址：

https://github.com/chs71371/Osu