欢迎回来! 在这个三部分教程系列的第二部分中，你将学习如何在用户界面中加入动画。

在上一个部分中你学习并创建了一个带有两个按钮的场景，也学会了如何使用图像、按钮和文本UI控件，并学习了RectTransform、Anchors和Pivots等核心概念，在一个教程中要学习的技能可真不少啊！不过，这个场景本身很简单，继续加油哦。

在本教程中，你将通过添加动画、设置对话框和更多的UI控件（如Slider和Toggle）来美化场景。

你将从第一部分的结尾处开始接上这个项目。如果你还没有开始制作项目，建议从引擎入门 | Unity UI简介–第1部分（1）开始学习，或者请在底部获取项目源代码以开始。

在Unity中打开项目。打开MenuScene，拿起一杯振奋人心的饮料，开始喝思考UI吧！

本篇内容

序章

1.动画按钮

2. 制作按钮滑出屏幕的动画

文章末尾可免费获取教程源代码

本篇本篇Unity UI简介（第二部分）篇幅较长，分为八篇，本篇为第一篇。

1.动画按钮

你要直接加入一些很酷的动画，为什么呢？首先，动画很酷！其次，它们对这个项目很实用，你需要按钮从场景中退出，这样就有足够的空间来显示你稍后要创建的新对话框。

接下来创建动画和动画师，动画按钮就像动画任何其他Unity对象一样。你需要添加一个Animator组件，创建一些动画，并设置状态和它们之间的转换。

下面是制作成功的步骤：

·在 "Hierarchy "中选择StartButton

·从菜单中选择Window ▸ Animation ▸ Animation打开动画视图。

·点击动画视图中的 "Create "按钮。这将创建Animator和一个动画片段。

·将动画命名为StartButtonSlideOut并保存在RW ▸ Animations中

除了创建动画本身，Unity还为开始按钮添加了一个Animator组件，并创建了一个Animator控制器，准备好开始了吗？

2. 制作按钮滑出屏幕的动画

虽然从技术上讲，你会制作两个动画--按钮滑出，然后再滑回，但你是个精明的开发者！你会制作一个动画，然后反过来。你将创建一个动画，然后将其反转。

要创建滑出动画，请按照以下步骤进行：

·在 "Hierarchy"中选择 "StartButton"。

·确保 "Animation"视图可见。

·点击 timeline中的1:00标记，然后点击录制按钮。

·将Anchors改为top-stretch。

·在 " Inspector"中把Pos Y改为60。

·点击红圈按钮停止录制。

现在要做两件事：

·在0: 00处自动插入了一个关键帧。此时，按钮处于起始位置，也就是你在上一个教程中定位的位置。

·虽然锚的视觉表示没有变成红色，但你可以看到数值发生了变化，变成了红色，说明你也对锚进行了动画处理。

使动画视图和场景视图都可见，然后播放动画。你会看到这样的画面。

你注意到锚的动画了吗？你可能想知道为什么你需要重新定位锚。

按钮的位置就是它与锚点的距离，在StartButton的例子中，它是距离底部边缘的距离。现在，你只处理垂直移动，所以只有底部边缘才是重要的。为了确保按钮离开屏幕，将它向上移动，直到它不再可见。

如果你不知道屏幕的高度怎么办？如何确保按钮在不再可见后立即停止？

答案：改变它的锚点。

将锚点设置为屏幕的上边缘意味着你设置了与屏幕上边缘的距离。因此，按钮将始终位于边缘之上，并且与屏幕的高度无关，因为它的位置是相对于屏幕的顶部边缘而言的。

本期的教程就到这里结束了，我们下期会继续Unity UI简介（第二部分）的后续教程

Unity架构师之路

Unity教程 | 墙外的Unity | 免费资源 | 游戏开发日记

添加下方微信获取教程源代码