第一章：View Animations入门

最新推荐文章于 2020-07-12 17:32:50 发布

呆子编程LQ

最新推荐文章于 2020-07-12 17:32:50 发布

阅读量337

点赞数 1

分类专栏： Animation 文章标签： iOS 动画 swift

Animation 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Apple的UIKit框架用于创建丰富的iOS应用程序用户界面，提供了各种API，可用于在屏幕上制作动画视图。 UI动画不是电影或电视中通常所称的“帧动画”，而是一组预定义的动作，例如在屏幕上淡化，移动和调整视图大小。

在本章和随附的项目中，您将学习如何执行以下操作：

设置舞台以获得炫酷动画。
创建移动和淡入淡出动画。
调整动画缓和。
反转和重复动画。

有相当多的材料要通过，但我保证会很有趣。你准备好接受挑战了吗？

你的第一个动画

打开本章的Resources文件夹中的starter项目。在Xcode中构建和运行项目; 你会看到一个虚构的航空公司应用程序的登录界面，如下所示：在这里插入图片描述
该应用程序现在没有做太多事情; 它只显示一个带有标题，两个文本字段和底部的大友好按钮的登录表单。

还有一个漂亮的背景图片和四个云。云已经连接到名为cloud1到cloud4的代码中的插座变量。在这里插入图片描述打开ViewController.swift并查看内部。在文件的顶部，您将看到所有连接的出口和类变量。再往下，viewDidLoad（）中有一些代码可以初始化一些UI。这个项目已经准备就绪，你可以跳进去，稍微修改一下！

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

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

添加一下代码到viewWillAppear():

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

这会将每个表单元素放在屏幕的可见边界之外，如下所示：
在这里插入图片描述
由于上面的代码在视图控制器出现之前执行，因此看起来这些文本字段从来就不存在。

构建并运行您的项目，以确保您的字段真正显示在屏幕外，就像您计划的那样：
在这里插入图片描述完美 - 现在您可以通过令人愉快的动画将这些表单元素设置回原始位置。
将一下代码添加到viewDidAppear()的末尾：

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

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

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

构建并运行您的项目; 你应该看到标题幻灯片整齐地到位，如下所示：
在这里插入图片描述
这为您在其余表单元素中设置动画设置了舞台。

因为animate(withDuration:animation:)是一个类方法，所以您不局限于动画化一个特定的视图;实际上，您可以在动画闭包中创建任意多的视图。
添加一下行到闭包中：

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

重新构建并运行项目;看着用户名字段滑到合适的位置: 在这里插入图片描述
看到两个视图一起动画很酷，但你可能已经注意到，在相同距离和相同持续时间内动画两个视图看起来有点僵硬。只有杀戮机器人以这种绝对同步的方式移动！

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

首先删除刚刚添加的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：动画完成时执行的代码闭包。当您想要一个接一个地执行一些最终清理任务或链动画时，此参数通常会派上用场。

在上面添加的代码中，您将延迟设置为0.3，以使动画比标题动画更晚开始。

构建和运行项目;组合动画现在看起来怎么样?
在这里插入图片描述
啊 - 看起来好多了。现在您需要做的就是在密码字段中设置动画。
添加一下代码到viewDidAppear()底部:

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

在这里，你大多模仿用户名字段的动画，只是延迟稍长。
再次构建并运行项目以查看完整的动画序列：
在这里插入图片描述
这就是你需要做的就是用UIKit动画在屏幕上制作动画！
这只是它的开始 - 你将在本章的其余部分学习一些更棒的动画技术！

动画属性(Animatable properties)

既然您已经看过动画有多简单，那么您可能很想知道如何为视图制作动画。

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

并非所有视图属性都可以进行动画处理，但是从最简单到最复杂的所有视图动画都可以通过动画视图上的属性子集来构建，这些属性适合动画，如下面部分所述。

位置和大小(Position and size)

在这里插入图片描述
你可以动画一个视图的位置和框架，以使它增长，缩小，或四处移动，就像你在上一节所做的。下面是可以用来修改视图位置和大小的属性:

bounds：为此属性设置动画，以在视图的框架内重新定位视图的内容。
frame：为此属性设置动画以移动和/或缩放视图。
center：如果要将视图移动到屏幕上的新位置，请为此属性设置动画。

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

外观(Appearance)

您可以通过对其背景进行着色或使视图完全或半透明来更改视图内容的外观。
在这里插入图片描述

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

变形(Transformation)

变换修改视图的方式与上面大致相同，因为您还可以调整大小和位置。在这里插入图片描述

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

这些是底层的仿射变换，它更强大，允许您描述比例因子或旋转角度，而不是需要提供特定的边界或中心点。

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

动画选项(Animation options)

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

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

重复(Repeating)

您将首先看看以下两个动画选项：

.repeat：包含此选项可使动画永久循环。
.autoreverse：仅与.repeat一起包含此选项; 此选项重复播放您的动画，然后反向播放。

修改password在viewDidAppear中的动画代码，以使用.repeat选项，如下所示：

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

构建并运行项目以查看更改的效果：
在这里插入图片描述
表单标题和用户名字段在屏幕中央飞入并定居，但是密码字段永远保持其屏幕外位置的动画效果。

修改上面更改的相同代码，在option中使用.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]和多个选项的[.repeat，.autorepeat]。

动画缓和(Animation easing)

在现实生活中，事物并不只是突然开始或停止移动。像汽车或火车这样的物体会慢慢加速直到达到目标速度，除非它们碰到砖墙，否则它们会逐渐减速直到它们到达最终目的地。

下图详细说明了这一概念：
在这里插入图片描述
为了使您的动画看起来更逼真，您可以应用相同的效果，在开始时建立动力，在结束前放慢速度，一般称为缓入和缓出。

您可以选择四种不同的缓和选项：

.curveLinear：此选项不对动画应用加速或减速。本书中唯一一次使用此选项是第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
)

构建和运行项目;请注意，在返回到屏幕左侧之前，字段如何平滑地减速，直到它到达最右边的位置:
在这里插入图片描述
这看起来更自然，因为这就是你期望事物在现实世界中移动的方式。

现在，尝试相反的做法。通过修改与上面相同的代码将.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
)

现在您已经了解了基本动画的工作原理，您已准备好处理更炫目的动画技术。

关键点(Key Points)

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

挑战(Challenges)

如果本章是您第一次在iOS中制作视图动画，那么您的头部可能会有点小晕，不过不要担心，因为无论你最初的技能如何，只需几章就可以很好地掌握动画制作方法。但就目前而言，有一个非常简单的挑战在等着你，你将创建一个你自己的动画。

挑战1:淡化云端

在ViewController中，您有四个出口：cloud1，cloud2，cloud3和cloud4。您的任务是在应用程序启动时淡出。

您几乎可以决定解决方案的确切形式，但这里列出了您需要遵循的基本步骤：

在viewWillAppear（）中为所有四个云视图设置alpha属性为0.0。
在viewDidAppear（）中，对动画进行四次单独调用（withDuration：delay：options：animations：completion : )。如果对所有四个动画使用0.5的持续时间并且分别使用0.5,0.7,0.9和1.1的延迟，则会获得漂亮的效果。
在每个动画闭包中，将相应云视图的alpha更改为1.0。这将淡化云。

当你运行项目时，你会看到一个很好的过渡效果，一个接一个地动画云：
在这里插入图片描述
屏幕上的所有视图都应该很好地动画。差不多…登录按钮不是动画！别担心 - 你将在下一章解决这个问题。

呆子编程LQ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一章：View Animations入门

Apple的UIKit框架用于创建丰富的iOS应用程序用户界面，提供了各种API，可用于在屏幕上制作动画视图。 UI动画不是电影或电视中通常所称的“帧动画”，而是一组预定义的动作，例如在屏幕上淡化，移动和调整视图大小。在本章和随附的项目中，您将学习如何执行以下操作：设置舞台以获得炫酷动画。创建移动和淡入淡出动画。调整动画缓动。反转和重复动画。有相当多的材料要通过，但我保证会很有趣。...
复制链接

扫一扫