版本记录

版本号	时间
V1.0	2019.01.28 星期一

前言

Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。Unity类似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的图型化开发环境为首要方式的软件。其编辑器运行在Windows 和Mac OS X下，可发布游戏至Windows、Mac、Wii、iPhone、WebGL（需要HTML5）、Windows phone 8和Android平台。也可以利用Unity web player插件发布网页游戏，支持Mac和Windows的网页浏览。它的网页播放器也被Mac 所支持。网页游戏 坦克英雄和手机游戏王者荣耀都是基于它的开发。
下面我们就一起开启Unity之旅。感兴趣的看下面几篇文章。
1. Unity开启篇（一） —— Unity界面及创建第一个简单的游戏 （一）
2. Unity开启篇（二） —— Unity界面及创建第一个简单的游戏 （二）
3. Unity开启篇（三） —— 一款简单射击游戏示例 （一）
4. Unity开启篇（四） —— 一款简单射击游戏示例 （二）
5. Unity开启篇（五） —— 一款简单射击游戏示例 （三）
6. Unity开启篇（六） —— Unity动画简介 （一）
7. Unity开启篇（七） —— Unity动画简介 （二）
8. Unity开启篇（八） —— Unity声音简介（一）
9. Unity开启篇（九） —— Unity声音简介（二）
10. Unity开启篇（十） —— Unity粒子系统简介（一）
11. Unity开启篇（十一） —— Unity粒子系统简介（二）
12. Unity开启篇（十二） —— Unity脚本简介（一）
13. Unity开启篇（十三） —— Unity脚本简介（二）
14. Unity开启篇（十四） —— Unity UI简介（一）
15. Unity开启篇（十五） —— Unity UI简介（二）

开始

在这部分中，您将学习如何将动画合并到用户界面中。

在前面一篇中您创建了一个带有两个按钮的漂亮场景。 您学习了如何使用图像，按钮和文本UI控件，以及锚点等概念。 但是，场景本身非常简单，需要升级。

在本教程中，您将通过添加动画，设置对话框和更多UI控件（如滑块和切换）来修饰场景。

所以，继续在Unity中打开项目。 打开MenuScene，接着一起思考UI！

---

Animating Buttons

你将通过添加一些很酷的动画来直接进入练习。 这有几个原因。 首先 - 动画很酷！ 其次，它们对这个项目很实用。 您需要按钮退出场景，以便有足够的空间显示您稍后将创建的新对话框。

1. Creating Animation and Animator

动画按钮与动画任何其他Unity对象没有什么不同。 您需要添加Animator组件，创建一些动画并在它们之间设置状态和转换。

以下是成功的步骤：

• 1） 在层次结构中选择Btn_Start
• 2） 打开Animation view。
• 3） 单击“动画”视图中的Create按钮。 这将创建Animator和动画片段。
• 4） 将动画命名为btn_start_slide_out并将其保存在Animations文件夹中。

除了创建动画本身之外，Unity还向btn_start添加了一个Animator组件并创建了一个Animator Controller。

2. Animating a Button Sliding Out of the Screen

虽然你在技术上会制作两个动画 - 按钮滑出然后滑回 - 你将成为一个精明的开发者并创建一个，然后反转它。

若要创建滑出动画，请按照下列步骤操作：

• 1） 在层次结构中选择Btn_Start
• 2） 确保Animation view可见。
• 3） 单击时间线(timeline)中的1:00标记，确保动画录制开启。 它应该自动执行此操作。

注意：确保录制的最简单方法是查看播放控件并观察它们是否变为红色。

• 4） 将anchors更换为top-stretch。
• 5） 在检查器(Inspector)中将Pos Y更改为60。
• 6） 单击红色圆圈按钮(red circle button)停止录制。

A：在0:00标记处自动插入了一个关键帧。 此时，按钮位于其起始位置，正是您在上一个教程中定位的位置。

B：虽然锚点的视觉表示没有变成红色，但您可以看到数值已更改并变为红色，表示您还为锚点设置了动画。

使Scene view和Animation view都可见并播放动画。 你会看到这样的事情：

你有没有注意到锚点上的动画？ 如果没有，你肯定注意到恼人的红色箭头闪烁。

无论如何，你为什么需要重新定位锚？

好吧，当你这么想的时候，很明显：按钮的位置是它与锚点的距离。 在btn_start的情况下，它是距底边的距离。 现在，你只处理垂直运动，所以只有底边很重要。

要确保按钮“离开”屏幕，请将其向上移动，直到它不再可见。 如果您不知道屏幕的高度，您会怎么做？ 如何确保按钮在不再可见后立即停止？

答案是改变它的锚点。

如果将锚点设置为屏幕的上边缘，则只需设置距屏幕上边缘的距离。 因此，按钮将始终位于边缘上方并且独立于屏幕的高度，因为它相对于屏幕的顶部边缘定位。

3. Animating Button Slide In

干得好！ 你有一个滑出屏幕的按钮，现在你需要一个反向动画。 您将在两种情况下使用它：

• 1） 当场景加载时，您希望按钮滑动到位而不是简单地出现。
• 2） 关闭设置对话框时，按钮应返回其初始位置

这很容易做到。 首先，您需要禁用动画的循环，因为按钮应向上或向下移动然后停止而不是像乒乓球一样来回移动。

要禁用循环，请在“项目”窗口中打开Animations文件夹，然后选择btn_start_slide_out动画。 在Inspector中，取消选中Loop Time。

然后在Hierarchy中选择Btn_Start并打开Animator视图。 右键单击btn_start_slide_out状态，然后选择Copy。

然后右键单击Animator视图内的空闲空间上的某个位置，然后选择Paste。 这复制了btn_start_slide_out状态。

现在，选择此重复状态，可能称为btn_start_slide_out 0，并在Inspector中将其重命名为btn_start_slide_in。 此外，将速度Speed设置为-1。

然后，在Animator视图中，右键单击btn_start_slide_in并选择Set As Layer Default State，因为您希望按钮通过滑入屏幕而不是反之亦然来开始其生命周期。

接下来，您需要一个参数来控制按钮的状态。 在Animator窗口的左侧栏中，单击Parameters选项卡。 接下来，单击+按钮并添加名为isHidden的新Bool参数。

最后，在状态之间添加两个转换。 要执行此操作，请右键单击btn_start_slide_out状态，然后选择Make Transition。 然后单击btn_start_slide_in进行转换。

之后，通过右键单击btn_start_slide_in，选择Make Transition然后单击btn_start_slide_out来创建反向转换。 这是你最终应该得到的：

您已经关闭，但仍需要根据正在进行的转换为isHidden分配值。

选择从btn_start_slide_out到btn_start_slide_in的转换。 在Inspector中，单击Conditions面板中的+。 设置isHidden为false。

然后选择相反方向的转换，从btn_start_slide_in到btn_start_slide_out，并将其Conditions设置为isHidden等于true。

选择File / Save Scenes以保存到目前为止的工作，然后运行场景(run the scene)。 您应该看到您的按钮顺利滑入。然后手动更改isHidden以使按钮向回滑动。

---

Animating the Settings Button

“设置”(Settings)按钮应在屏幕上向下滑动，以在对话框的中心留出一些空间。

你认为你可以自己动画设置按钮吗？ 您需要知道的是：

• Pos Y应为-50
• 您无需更改锚点，因为该按钮已相对于屏幕的下边缘定位。

试试你自己。 如果您需要提示，请随意看下面的信息。

要创建向下滑动和向上滑动动画，以及设置Animator状态，请按照下列步骤操作：
1） 在层次结构中选择Btn_Settings。
2） 打开Animation view。
3） 单击Create按钮。
4） 将动画命名为btn_settings_slide_out并将其保存在Animations文件夹中。这也将创建Animation Controller ，并将Animator组件添加到btn_settings。
5） 在Animation view中，单击时间轴的1:00标记并确保录制已打开。它应该自动打开，但您可以单击红色圆圈开始手动录制。
6） 在Inspector中，将btn_settings Pos Y更改为-50。这次你不需要改变锚点。
7） 单击红色圆圈按钮或保存场景停止录制。
8） 在“项目”窗口中打开Animations文件夹。选择btn_settings_slide_out，然后在检查器中取消选中 Loop Time。
9） 在层次结构中选择Btn_Settings。
10） 现在打开Animator视图。
11） 复制并粘贴btn_settings_slide_out状态以复制它。
12） 选择重复状态，该状态应命名为btn_settings_slide_out 0。在检查器中，将其名称更改为btn_settings_slide_in，并将其速度更改为-1。
13） 右键单击btn_settings_slide_in状态，然后选择Set As Layer Default State。
14） 创建从btn_settings_slide_in到btn_settings_slide_out的转换，然后创建反向转换。
15） 添加名为isHidden的新Bool参数。
16） 选择从btn_settings_slide_out到btn_settings_slide_in的转换，并在Inspector中，更改包含isHidden的Conditions等于false。
17） 选择从btn_settings_slide_in到btn_settings_slide_out的转换，并将包含isHidden的Conditions更改为等于true。
18） 选择File / Save Scenes以保存到目前为止的工作，然后Run the scene。

这是你最终应该得到的：

好吧，很高兴看到“设置”按钮上下移动，但两个按钮不应同时滑出，就像它们在开始时滑入一样？

当然他们应该，而你接下来会发生这种情况。

---

Triggering Buttons Animation from the Script

在MonoDevelop中，打开您在第一部分中创建的UIManagerScript，并在类定义中添加以下实例变量：

public Animator startButton;
public Animator settingsButton;

之后，添加以下方法：

public void OpenSettings() 
{
    startButton.SetBool("isHidden", true);
    settingsButton.SetBool("isHidden", true);
}

这就是您需要的所有代码。 保存脚本并切换回Unity。

在Unity中，在层次结构中选择UIManager。 将Btn_Start从“层次结构”拖动到“检查器”中的Start Button字段，然后将Btn_Settings拖到 Settings Button字段中。

然后在Hierarchy中选择Btn_Settings并单击On Click（）列表中的+。 将UIManager从层次结构拖到列表中的新项目。 之后，打开功能选择菜单并选择UIManagerScript \ OpenSettings（）。

选择File / Save Scenes以保存到目前为止的工作，然后运行场景。 等待按钮停止移动，然后单击Settings按钮。 您应该看到两个按钮同时向相反方向移出屏幕。

---

Adding the Settings Dialog

看看你创造的所有华丽的自由空间！ 这似乎是对话框在那里滑动并填充空白区域的理想场所。

1. Creating the Panel

通常，对话框包含一些应该出现的其他控件，并随对话框一起移动。 因此，将对话框创建为面板并将其他UI元素设置为子对象是有效的。

要创建面板，请在菜单中选择GameObject \ UI \ Panel。 这将创建一个全屏面板，使用白色，半透明图像作为背景。 所以，你应该看到某种全屏面纱。

但是，此对话框不会全屏；事实上，它会相对较小。 请按照以下步骤设置对话框的大小和位置：

• 1） 在层次结构中选择Panel，并将其重命名为Dlg_Settings。
• 2） 将其anchors设置为middle-right，因为您将对话框定位在右边缘之外且离开屏幕，因此在运行场景时它不可见。
• 3） 将Width设置为400，将Height设置为150。
• 4） 将Pos X设置为220，将Pos Y设置为0。

您应该在画布矩形的右侧看到一个半透明的矩形。 此矩形外的所有UI元素在屏幕上都不可见。 这正是你想要的对话！

2. Setting the Dialog’s Background Image

您将使用9-slice image作为对话框的背景，因此您需要先在Import Settings中设置边框。

在“项目”窗口中打开Menu文件夹，然后选择settings_panel_bg_9slice。 在“检查器”中，单击Sprite Editor以打开Sprite Editor view。

将所有Border值设置为20，然后单击顶部的Apply。

现在您可以将此图像用作对话框背景。

在Hierarchy中选择Dlg_Settings，然后将settings_panel_bg_9slice拖动到Inspector中的Source Image字段。 双击Source Image字段旁边的Color，然后将“A”设置为255以删除透明度。

这是设置背景图像后对话框的样子：

3. Adding the Label

在目前的状态下，很难说这个不起眼的绿色矩形实际上是一个设置对话框，但有一种简单的方法可以解决这个问题 - 你需要做的只是在其上写Settings。

选择GameObject \ UI \ Text以创建新的Text UI元素。 在层次结构中选择Text并将其重命名为Lbl_Settings。 然后将Lbl_Settings拖到Dlg_Settings上，将其添加为子对象。

之后，在层次结构中选择Lbl_Settings并进行以下更改：

• 1） 将锚点设置为top-center。
• 2） 将Pos X设置为0，将Pos Y设置为-40。
• 3） 将Text更改为Settings。
• 4） 在“项目”窗口中打开Fonts文件夹，然后将DCC - Dreamer字体拖到Inspector中的Font字段中。
• 5） 将Font Size设置为30。
• 6） 将Alignment设置为Center Align。
• 7） 将颜色设置为白色，使用A（Alpha）255删除透明度。

4. Animating the Settings Dialog

现在您已经拥有了一个合法的Settings对话框，下一步是在用户单击Settings按钮时显示该对话框。

您将使用几乎完全相同的技术使按钮滑入和滑出，唯一的区别是在场景开始后对话框不会自动滑入。

在层次结构中选择Dlg_Settings并打开Animation view。 然后单击Animator中的Create按钮创建一个新动画。

将动画命名为dlg_settings_slide_in并将其保存在Animations文件夹中。

然后单击时间线中的1:00标记并确保开始录制，或通过单击录制按钮手动启动录制。

在Inspector中，将锚点设置为middle-center，将Pos X设置为0。

停止录制动画，在“项目”窗口中打开Animations文件夹，然后选择dlg_settings_slide_in。 在Inspector中。 最后，取消选中Loop Time。

在层次结构中选择Dlg_Settings并打开Animator视图。 复制并粘贴dlg_settings_slide_in状态以复制它。 将副本重命名为dlg_settings_slide_out，并将其Speed设置为-1。

注意：此时，请勿更改默认状态！ 对话框的默认状态应保持为dlg_settings_slide_in。

单击+按钮并添加名为isHidden的新Bool参数。

在状态之间创建两个转换，就像您对按钮所做的那样。 然后添加Bool类型的isHidden参数。

将dlg_settings_slide_out => dlg_settings_slide_in转换的条件更改为isHidden等于false。 对于dlg_settings_slide_in => dlg_settings_slide_out转换，将condition更改为isHidden等于true。

接下来，右键单击Animator并选择Create State，然后选择Empty。

在Inspector中，将状态命名为idle。 接下来，右键单击状态，然后选择Set as Layer Default State。 最后，在idle到dlg_settings_slide_in之间创建一个转换。 将Condition设置为isHidden等于false。

它应该如下所示：

选择File / Save Scenes以保存到目前为止的工作，然后Run the scene，您将看到对话框在开始时滑动，然后重叠按钮。

这就是所做的工作，但仍然不是你想要的。 您需要禁用Animator组件，以便它不会在开始时播放动画。 您希望按需显示对话框，下面你就将做这些。

后记

本篇主要讲述了Unity UI简介，感兴趣的给个赞或者关注~~~