View Animations(一): Getting Star

View Animations(一): Getting Started with View Animations

一: View Animations的前言:

这五章将向您介绍UIKit的动画API,这个API是专门设计的，可以帮助您轻松地制作动画，同时避免核心动画的复杂性，它在引擎盖下运行动画.

UIKit动画API虽然简单易用，但却为您提供了很多灵活性和强大功能来处理大部分（如果不是全部）动画需求。

动画是可见的，屏幕上的效果适用于您的用户界面中的所有视图或可视对象：

Object

你可以在屏幕上动画任何最终从UIView继承的对象; 这包括UILabel，UIImageView，UIButton以及您自己创建的任何自定义类。

在本节的视图动画的五章中，您将学习如何使用动画来改进虚拟的航空公司应用程序Bahama Air，为其UI元素添加各种动画。

首先，您将向登录屏幕添加动画：

image

您将在以下章节中的屏幕上工作：

• 第1章入门：您将学习如何移动，缩放和淡化视图。 您将创建许多不同的动画来适应Swift和基本的UIKit API
• 第二章，Springs：你将建立在线性动画的概念上，并使用弹簧驱动的动画创造更多的引人注目的效果。Boiiing！：]
• 第3章，Transitions：你将学习UIKit中的几个类方法，它们可以帮助你在屏幕上或屏幕外动画。 这些单线API调用使得转换效果易于实现

在登录屏幕上完成工作后，您将进入Bahama Air航班状态屏幕。 您将使用现有屏幕，并通过添加来自登录屏幕主题的动画使其更加令人兴奋。

image

您将从视觉静态版本的屏幕开始，并添加一些引人注目的高级动画以改善用户体验：

• 第4章在实践中查看动画：您已经了解了大部分关于UIKit中动画的知识。 本章将教你如何结合你熟悉的技巧来创造更酷的动画
• 第5章，关键帧动画：您将使用关键帧动画来解开令人印象深刻的用户界面的终极成就：创建精细的动画序列，从多个不同的阶段

一旦您完成了本节中的所有章节，您将会对动画有一些深入的体会，您可以继续阅读本书的其余部分

本部分向您展示了向视图中添加动画是多么容易 - 请阅读第1章开始！

二: View Animations入门

在这一章中，你将把脚趾浸入视野动画的无底海洋中。 不要被本章的标题所迷惑，然而，开始使用如此强大和丰富的API意味着有很多有趣的材料可以涵盖！
在本章和随附的项目中，您将学习如何执行以下操作：

• 设置一个很酷的动画舞台。
• 创建移动和淡入淡出的动画。
• 调整动画宽松。
• 反转和重复动画
  有一点点的材料可以通过，但我保证会很有趣。 你准备好接受挑战了吗

2.0：第一个动画(Your first animation)

打开位于本章资源文件夹中的初学者项目。 在Xcode中构建和运行你的项目; 你会看到像这样的虚构的航空公司应用程序的登录屏幕

image

该应用程序现在没有多大的作用; 它只是显示一个标题，两个文本字段，并在底部的一个大友好按钮的登录表单

还有一个很好的背景图片和四个云。 云已经通过cloud1连接到名为cloud4的代码中的outlet变量。

打开ViewController.swift，看看里面。 在文件顶部，您将看到所有连接的outlet和类变量。 更进一步，viewDidLoad()中的一些代码初始化了一些UI。 这个项目已经准备好让你跳进来，把视图弄得活泼点

充足的介绍 - 你无疑准备尝试一些代码！

您的第一项任务是在用户打开应用程序时将表单元素动画化到屏幕上。 由于表单在应用程序启动时现在可见，因此您必须在视图控制器出现之前将其从屏幕上移开

Add the following code to viewWillAppear():

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

这将每个元素放置在屏幕的可见边界之外，如下所示：

image

由于上面的代码在视图控制器出现之前执行，它看起来像那些文本字段从来没有在那里

建立和运行你的项目，以确保你的领域真正出现在屏幕外，就像你计划：

image

完美 - 现在您可以通过令人愉快的动画将这些表单元素动画回到其原始位置。

将以下代码添加到viewDidAppear()的末尾：

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

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

就这么简单 您在动画关闭中对视图进行的所有更改都将由UIKit进行动画处理

建立并运行你的项目; 你应该看到这样的标题幻灯片整齐的地方：

image

这为您在其余的表单元素上设置动画提供了舞台。

由于animate(withDuration:animations:)是一个类的方法，你不仅限于动画只有一个特定的视图; 事实上，您可以在动画关闭中制作尽可能多的视图。

将以下行添加到动画闭包中：

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

重新构建并运行您的项目; 看用户名字段滑入到位：

image

看到这两个视图一起动画是相当酷的，但你可能注意到，在相同的距离和相同的持续时间动画的两个控件看起来有点僵硬。 只有呆板机器人以绝对同步的方式移动！

如果每个元素都可能独立于其他元素移动，那么它会不会很酷
在动画之间有一点延迟

首先删除刚刚添加的动画用户名的行：

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：动画完成时执行的代码闭包。 当您想要执行一些最后的清理任务或连锁动画时，此参数通常派上用场
  在上面添加的代码中，将延迟设置为0.3，以使动画只比标题动画晚。
  建立并运行你的项目; 现在的组合动画是怎么看的？

  
  image

啊 - 那看起来好多了。 现在，您只需在密码字段中设置动画即可
Add the following code to the bottom of viewDidAppear():

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

在这里，你主要模仿了用户名字段的动画，只是稍微延迟一点。
再次构建并运行您的项目以查看完整的动画序列：

image

这就是所有你需要做的UIKit动画屏幕动画观看动画！

这只是它的开始 - 在本章的其余部分中，您将学习更多令人敬畏的动画技巧

2.1:动画属性(Animatable properties)

本节将概述UIView的动画属性，然后指导您在项目中探索这些动画
不是所有的视图属性都可以被动画化，但是所有的视图动画，从最简单的到最复杂的，都可以通过在一个视图上动画属性的子集来创建，

Position and size

您可以为视图的位置和框架设置动画，以便像前一节中所做的那样使其成长，缩小或移动。 以下是可用于修改视图位置和大小的属性

• bounds：动画这个属性重新定位视图的框架内的视图的内容。
• frame：动画这个属性来移动和/或缩放视图。
• center：当您想要将视图移动到屏幕上的新位置时
  不要忘记，在Swift中，UIKit的一些属性如size和center是可变的。 这意味着您可以通过更改center.y来垂直移动视图，也可以通过减小frame.size.width来缩小视图。

Appearance

您可以通过着色背景或使视图完全或半透明来更改视图内容的外观

• backgroundColor：更改视图的这个属性，让UIKit逐渐改变背景颜色
• alpha：更改此属性以创建淡入和淡出效果。

Transformation

以与上述相同的方式转换修改视图，因为您还可以调整大小和位置

• transform：在动画块中修改此属性以动画化视图的旋转，缩放和/或位置。

这些都是引擎盖下的仿射变换，它们更加强大，可以让您描述比例因子或旋转角度，而不需要提供特定的边界或中心点

这些看起来非常基本的构建模块，但是您将会对将要遇到的复杂动画效果感到惊讶

2.2: 动画选项(Animation options)

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

以下是在UIViewAnimationOptions集合类型中声明的选项列表，您可以以不同方式组合以用于动画

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

标题和用户名字段飞入屏幕中心，但是密码字段从屏幕外的位置永远保持动画

修改上面更改的相同代码，以在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允许你方便的省略方括号。 但是，如果将来添加更多选项，您仍然可以包含它们。 这意味着[]没有选项，[。重复]为单个选项，[.重复，.autorepeat]为多个选项

重新构建并运行您的项目; 这个时候密码栏就不能停留在屏幕上了

2: 动画缓解(Animation easing)
在现实生活中，事情不只是突然开始或停止移动。 像汽车或火车这样的物体慢慢加速，直到达到目标速度，除非他们撞到一堵砖墙，否则他们会慢慢放慢速度，直到完全停在最终目的地

下图详细说明了这个概念：

image

为了使你的动画看起来更加逼真，你可以在开始时应用同样的动力构建效果，并在结束之前放慢速度，一般来说称为ease-in和ease-out

您可以选择四种不同的宽松选项：

• .curviLinear：该选项对动画不应用加速或减速。 本书中唯一一次使用这个选项的是第3章的最后一个挑战: Transitions
• .curveEaseIn：该选项将加速应用于动画的开始
• .curveEaseOut：此选项将减速应用到动画的结尾处
• .curveEaseInOut：此选项将加速应用于动画的开始，并将减速应用到动画的结尾
  为了更好地理解这些选项如何为您的动画添加视觉效果，请尝试一些项目中的选项
  再次使用新选项修改密码字段的动画代码，如下所示

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

建立并运行你的项目; 请注意，在返回到屏幕左侧之前，视野会减速到最右边的位置

image

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

现在尝试相反。 通过修改上述相同的代码来改变.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应用于您的动画的默认缓动函数
您已经看到了各种动画选项如何影响您的项目，以及如何使动作看起来平滑自然
在你继续之前，把你正在播放的代码的选项改回到[]

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

现在你知道基本的动画是如何工作的，你已经准备好去解决一些更炫目的动画技巧
从点A到点B的动画效果？ Pshaw - 太简单了！
在下一章中，您将探索如何使用弹簧驱动动画。嘣......嘣......嘣......嘣......！

2.3: Challenges

如果这一章是你第一次在iOS中为视图制作动画，那么你的头部可能会旋转一些。 不过不要担心，因为不管你最初的技能如何，你只要在几章中就可以很好地掌握动画技巧

现在，有一个非常简单的挑战，等待着你，你将创建一个你自己的动画

1: Challenge 1: Fade in the clouds(挑战1：淡入云雾)
在ViewController中，您有四个分支：cloud1，cloud2，cloud3和cloud4。 你的任务是在应用程序启动时淡入其中。
你几乎可以决定你的解决方案的确切形式，但是这里列出了你需要遵循的基本步骤：

• 1: 将viewWillAppear()中的所有四个云视图的alpha属性设置为0.0。
• 2: 在viewDidAppear()中，做四个不同的调用animate(withDuration:delay:options:animations:completion:)。 如果您对所有四个动画使用持续时间0.5，并分别延迟0.5,0.7,0.9和1.1，则您会看起来很好看
• 3: 在每个动画封闭中，将相应云视图的alpha值更改为1.0。 这将淡入云中。

当你运行这个项目的时候，你会看到一个很好的过渡效果，一个接一个地动画云层：

image

屏幕上的所有视图应该很好地动画。 几乎...登录按钮不是动画！ 别担心 - 你会在下一章解决这个问题