动画入门

在本章和伴随的项目中，您将学习如何做到以下几点:

• 开启一个很酷的动画阶段
• 创建移动和淡出动画
• 调整动画的舒缓效果。
• 反向和重复动画。

有很多材料要读，但我保证会很有趣。你准备好接受挑战了吗?

第一个UIKit动画

打开本章资源文件夹中的starter项目。在Xcode中构建并运行你的项目;你会看到一个虚构的航空公司应用程序的登录屏幕是这样的:

image.png

这款应用目前还没有多少功能;它只显示了一个带有标题的登录表单、两个文本字段和底部的一个友好的大按钮。
还有一张漂亮的背景图片和四朵云。云朵被命名从cloud1到cloud4

打开ViewController.swift，看看里面。在文件的顶部，您将看到所有连接的outlets和类变量。再往下，viewDidLoad()中有一些代码用于初始化一些UI。这个项目已经为你准备好了，你可以加入进来，做一些改变!

介绍到此为止——毫无疑问，您已经准备好尝试一些代码了!

您的第一个任务是在用户打开应用程序时将表单元素动画到屏幕上。因为表单现在在应用程序启动时是可见的，所以你必须在视图控制器出现之前将它移出屏幕。

增加一下代码在viewWillAppear():

 heading.center.x -= view.bounds.width 
 username.center.x -= view.bounds.width 
 password.center.x -= view.bounds.width

这将把每个表单元素置于屏幕可见边界之外，如下所示:

image.png

因为上面的代码在视图控制器出现之前执行，它看起来就像那些文本字段从一开始就不存在一样。
构建和运行你的项目，以确保你的字段真正出现在屏幕外，就像你计划的那样:

image.png

完美-现在你可以通过一个令人愉快的动画把这些形式元素动画回原来的位置。
在viewDidAppear()的末尾添加以下代码:

 UIView.animate(withDuration: 0.5) {
    self.heading.center.x += self.view.bounds.width 
}

要将标题动画到视图中，你调用UIView类方法animate(withDuration:animations:)。动画立即开始动画持续半秒;通过代码中的第一个方法参数设置持续时间。

就是这么简单; 你在动画闭包中对视图做的所有改变都会被UIKit动画化。
构建并运行项目;你应该看到标题幻灯片的位置整齐如下:

image.png

这为您在其余的表单元素中进行动画设置了条件。
因为animate(withDuration:animations:)是一个类方法，你不需要局限于动画一个特定的视图;事实上，你可以在动画闭包中创建任意多的视图。
在动画闭包中添加以下一行:

    self.username.center.x += self.view.bounds.width

再次生成并运行项目;观察用户名字数据框

image.png

看到两个视图一起动画是很酷的，但是你可能会注意到，在相同的距离和相同的时间下让两个视图动画看起来有点僵硬。只有机器人才能如此绝对同步地移动!

如果每个元素都独立于其他元素移动，动画之间可能会有一点延迟，这不是很酷吗?

首先删除你刚刚添加的动画username的行:

    self.username.center.x += self.view.bounds.width

然后将以下代码添加到viewDidAppear()的底部:

UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
  animations: {
    self.username.center.x += self.view.bounds.width
  }, 
  completion: nil
) 

这次你使用的类方法看起来很熟悉，但是它有更多的参数让你自定义你的动画:

• withDuration:动画的持续时间。
• delay: UIKit在开始动画之前等待的秒数。
• options:让你自定义关于你的动画的一些方面。稍后您将更多地了解这个参数，但是现在您可以传递一个空数组[]来表示“没有特殊选项”。
• animations:提供动画的闭包表达式。
• completion:动画完成时执行的代码闭包。当您想要执行一些最终的清理任务或一个接一个地链接动画时，这个参数经常派上用场。

在上面添加的代码中，将delay设置为0.3，以使动画比title动画晚一点开始。构建并运行项目;组合的动画现在看起来怎么样?

啊，看起来好多了。现在，您需要做的就是在password中创建动画。

image.png

将以下代码添加到viewDidAppear()的底部:

UIView.animate(withDuration: 0.5, delay: 0.4, options: [],
  animations: {
    self.password.center.x += self.view.bounds.width
  }, 
  completion: nil
)

在这里，您基本上模仿了username字段的动画，只是延迟稍微长一点。
再次构建并运行项目以查看完整的动画序列:

image.png

这就是你用UIKit动画在屏幕上动画视图所需要做的一切!

这只是它的开始-你将在本章的其余部分学习一些更棒的动画技术!

二 动画属性

现在你已经看到了动画是多么简单，你可能很想学习如何为你的视图制作动画。

本节将给你一个UIView的动画属性的概述，然后指导你在你的项目中探索这些动画。

不是所有的视图属性都可以动画化，但是所有的视图动画，从最简单的到最复杂的，都可以通过动画化视图上的属性子集来构建，这些属性可以用于动画化，如下一节所述。

2.1 Position and size

image.png

你可以对视图的位置和帧进行动画化，使其像你在前一节中所做的那样放大、缩小或移动。以下是你可以用来修改视图位置和大小的属性:

• bounds: 动画这个属性来重新定位视图的内容。
• frame:动画这个属性来移动和/或缩放视图。
• center:当你想将视图移动到一个新的位置时，动画化这个属性在屏幕上。

不要忘记，在Swift中，一些UIKit属性，如大小和中心是可变的。这意味着你可以通过改变中心来垂直移动视图。你也可以通过缩小frame.size.width来缩小视图。

2.2 Appearance

image.png

你可以通过给背景着色或者使视图完全或半透明来改变视图内容的外观。

• backgroundColor:改变视图的这个属性，让UIKit随着时间的推移逐渐改变背景颜色。
• alpha:改变这个属性来创建淡入淡出效果。

2.3: Transformation

image.png

由于您还可以调整大小和位置，所以修改视图的转换与上面的方法基本相同。

transform:在一个动画块中修改这个属性，以使视图的旋转、缩放和/或位置动画化。

这些是隐藏的仿射变换，它更加强大，允许你描述缩放因子或旋转角度，而不需要提供特定的边界或中心点。

这些看起来像相当基本的构建块，但你会惊讶于你即将遇到的复杂的动画效果!

三: Animation options

回头看看你的动画代码，你总是把[]传递给options参数。选项可以让你自定义UIKit如何创建你的动画。你只调整了动画的持续时间和延迟，但你可以对动画参数有更多的控制。

下面是在UIView中声明的选项列表。·AnimationOptions·设置类型，你可以以不同的方式组合在你的动画中使用。

3.1：Repeating

• repeat:包含此选项可以让你的动画永远循环。
• autoreverse:该选项只能与·.repeat·结合使用;这个选项反复地向前或向后播放动画。

修改密码字段viewDidAppear()的动画代码，使用.repeat选项如下:

UIView.animate(withDuration: 0.5, delay: 0.4, 
  options: .repeat,
  animations: {
    self.password.center.x
 += self.view.bounds.width
  }, 
  completion: nil
)

构建并运行项目以查看更改的效果:

image.png

表单标题和username字段飞到屏幕中央，但密码字段从屏幕外的位置一直保持动画。
在options参数中使用.repeat和.autoreverse，如下所示:

UIView.animate(withDuration: 0.5, delay: 0.4, 
  options: [.repeat, .autoreverse],
  animations: {
    self.password.center.x += self.view.bounds.width
  }, 
  completion: nil
)

注意，如果要启用多个选项，需要使用set语法列出所有选项，并用逗号分隔，并将列表括在方括号中。

注意:如果你只需要一个选项，为了方便，Swift允许你省略方括号。然而，你仍然可以包括它们，以防将来你添加更多的选项。这意味着[]没有选择，[。对单个选项重复[]，和[.repeat, .autorepeat]。

3.2 Animation的淡入淡出效果

在现实生活中，事情不会突然开始或停止移动。汽车或火车等实体物体缓慢加速，直到达到目标速度;除非撞上砖墙，否则它们会逐渐减速，直到在最终目的地完全停止。

下图详细说明了这一概念:

image.png

为了让你的动画看起来更真实，你可以在开始时应用同样的效果，即建立动量，在结束前放慢速度，也就是通常所说的ease-in和ease-out

您可以选择从四个不同的简化选项:

• curvelinear:此选项对动画不应用加速或减速。在这本书中，你只会在第五章的最后一个挑战中使用这个选项:“过渡”。
• curveeasein:这个选项将加速应用到动画的开始。
• curveeaseout:这个选项应用减速到动画的结尾。
• curveeaseinout:该选项在动画开始时应用加速，在动画结束时应用减速。

为了更好地理解这些选项如何为动画添加视觉效果，您将在您的项目中尝试一些选项。

修改你的password字段的动画代码再一次用一个新的选项如下:

UIView.animate(withDuration: 0.5, delay: 0.4, 
  options: [.repeat, .autoreverse, .curveEaseOut],
  animations: {
    self.password.center.x += self.view.bounds.width
  }, 
  completion: nil
)

构建并运行项目;注意，在返回到屏幕左侧之前，字段是如何平滑地减速到最右边的位置:

image.png

这看起来更自然，因为这是你在现实世界中所期望的移动方式。

现在，试试相反的方法。当字段仍然在屏幕外时，修改上面的代码，将.curveEaseOut选项改为.curveEaseIn，如下所示:

UIView.animate(withDuration: 0.5, delay: 0.4, 
  options: [.repeat, .autoreverse, .curveEaseIn], 
  animations: {
    self.password.center.x += self.view.bounds.width
  }, 
  completion: nil
)

构建并运行项目;观察它是如何以机器人的活力从最右边的位置弹回来的。这看起来不自然，也不像之前的动画那样视觉上令人愉快。

最后，试一下。curveeaseinout。curveeaseinout也是UIKit应用于动画的默认easing函数。

您已经看到了各种动画选项如何影响您的项目，以及如何使动作看起来流畅和自然。

在你继续之前，改变你一直在玩的代码片段的选项:

UIView.animate(withDuration: 0.5, delay: 0.4, options: [], 
  animations: {
    self.password.center.x += self.view.bounds.width
  }, 
  completion: nil
)

既然您已经了解了基本动画的工作原理，您就可以处理一些更令人眼花缭乱的动画技术了。

四: 要点

• 你可以使用UIView.animate(…)的一个变体来创建一个动画。
• 在动画闭包中，你设置所需动画的最终状态，UIKit将自动在当前和最终状态之间创建一个平滑的动画。
• 你通过提供UIView来定制你的动画。AnimationOptions值来设置缓动、重复和自动反转属性。

五: Challenges

如果这一章是你第一次在iOS中动画一个视图，你可能会有点头晕。不要担心，尽管，因为不管你的初始技能集，你将在你的方式，以动画掌握只需几个章节。尽管现在，有一个非常简单的挑战等待着你，你将创建自己的动画。