iOS.Animations.by.Tutorials.v2.0汉化（二）

翻译自：iOS.Animations.by.Tutorials.v2.0

第一节(第1章) 动画属性

现在你已经看到了动画是多么的简单，你可能很想知道你的视图控件是怎么动起来的。本节将给你一个UIView动画属性的概述，然后指导你通过你的项目来探索这些动画。

并不是所有的视图属性都可以是动画的，但是所有视图动画，从最简单到最复杂，都可以通过在视图中动画属性的子集的来构建动画，就像下面的章节所概述的那样。

位置和大小

 

您可以通过改变视图的位置和frame，以使其像前一节中所做的那样使它扩大、收缩或移动。以下是您可以用来修改视图位置和大小的属性：

• bounds：通过这个属性，重新改变视图的位置和大小。

• frame：通过此属性以移动和/或缩放视图。

center：当你想把视图移动到屏幕上的新位置时，激活这个属性。

别忘了你也可以调整结构的单个成员来改变。这意味着你可以通过改变中心垂直点来移动视图，或者你可以通过缩小视图来减小frame.size.width。

Appearance外观

 

你可以通过背景颜色，全透明或者半透明来改变视图的内容。

• backgroundColor 背景颜色：UIKit有这个属性，随着时间的推移，改变背景颜色的色调

alpha 透明度：更改此属性以创建淡入淡出效果。

Transformation 转换

 

转换和上面是一样的，因为您也可以调整大小和位置。

• transform 转换：在动画的Block块中修改此属性，以激活视图的旋转、缩放或位置。

这些是底层的旋转变换，它更强大，允许你通过改变比例因子或旋转角度来实现动画的变化，而不是需要提供一个特定的边界或中心点。

这些看起来虽然是非常基本的建设，但你会惊讶于你将要遇到的复杂的动画效果！

Animation options动画选项

回顾您的动画代码，您总是传递nil到options参数上。

options参数让您可以通过UIKit自定义创建你的动画。你之前只调整了动画的持续时间和延迟，现在你可以对动画参数有更多的控制。

有一个UIViewAnimationOptions 的枚举值集合，你的可以选择不同的方式组合在动画中使用。

Repeating重复

您可以首先看看下面的两个动画选项：

• Repeat 重复：通过这个选项，是你的动画效果一直循环重复。

autoreverse：只有与Repeat 一起使用此参数，才能将你的动画达到一直重复播放的效果

在viewDidAppear()中修改密码框的动画，完成下面的重复效果：

[UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionRepeat animations:^{

_password.center = CGPointMake(_password.center.x+self.view.frame.size.width, _password.center.y);

} completion:nil];

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

 

界面上标题和用户名控件通过动画进入屏幕中央安顿下来，但密码控件始终保持从它的位置飞入到屏幕中的动画。

如下，通过修改options选项，同时使用UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse的代码来运行程序：

[UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{

_password.center = CGPointMake(_password.center.x+self.view.frame.size.width, _password.center.y);

} completion:nil];

同时使用UIViewAnimationOptionRepeat和UIViewAnimationOptionAutoreverse是重复动画的效果更连贯和舒服

（注意，OC中如果要启用多个选项，需要使用 | （双目运算符或）选项，将每个不同的枚举类型连贯以来，如上代码所示。）

再次构建和运行您的项目，这一次你会发现密码控件无法停留在当前界面上，实现了一种往复循环的效果！

Animation easing 动画速率

在现实生活中，事情不会突然启动或停止移动。像汽车或火车这样的物体会慢慢地加速，直到达到目标速度，除非撞到砖墙上立刻停止下来，否则它们会逐渐减速，直到最终到达目的地为止。

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

 

为了使你的动画看起来更真实，你可以在开始时应用同样的效果，在结束前放慢速度，一般来说是以慢速开始（ease-in）和以慢速结束（ease-out）的。

您可以从四种不同的减速选项中选择：

• Linear：此选项不适用于动画的加速或减速（它代表以相同速度开始至结束的过渡效果）在这本书中，你将在第3章“转换”的最后时段使用到它。

• CurveEaseIn：这个选项表示你的动画以加速（由慢到快）的形式开始。

• CurveEaseOut：这个选项表示你的动画以慢速（由快到慢）的形式结束。

• CurveEaseInOut：这个选项表示你的动画将是以加速的形式开始以慢速的形式结束（由慢到快，再由快到慢）。

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

再次修改密码控件的动画代码，如下所示：

[UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationOptionCurveEaseOut animations:^{

_password.center = CGPointMake(_password.center.x+self.view.frame.size.width, _password.center.y);

} completion:nil];

编译并运行您的项目；注意密码空间是如何平稳的减速直到达到它的最右边的位置，然后它又返回到了屏幕的左侧：

 

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

现在尝试相反的效果：让动画以加速的形式进入的界面中，修改相同的代码，上述代码用UIViewAnimationOptionCurveEaseIn替换UIViewAnimationOptionCurveEaseOut，代码如下：

[UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationOptionCurveEaseIn animations:^{

_password.center = CGPointMake(_password.center.x+self.view.frame.size.width, _password.center.y);

} completion:nil];

编译并运行您的项目；观察密码控件跳回到最右边位置的效果。这看起来不自然，不像前面的动画那样赏心悦目。

通过两种不同的效果你已经对更自然更舒服的一种动画形式有所了解，最后，让我们用UIViewAnimationOptionCurveEaseInOut代码试一试效果；UIViewAnimationOptionCurveEaseInOut也是UIKit动画效果中默认的动画效果。

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

在继续进行之前，将您一直在玩的代码中的options选项的参数更改为nil：

[UIView animateWithDuration:0.5 delay:0.4 options:nil animations:^{

_password.center = CGPointMake(_password.center.x+self.view.frame.size.width, _password.center.y);

} completion:nil];

现在你知道基本动画是如何工作的，下面为你准备了更多炫目的动画技巧。

从A点运动到B点的动画？哼–哪能这么容易！

在下一章中，您将探索如何使用弹簧驱动动画。（Boing Boing Boing Boing…………！）

挑战

如果这一章是你第一次在iOS中创建一个视图，你的可能会感觉有点迷糊。别担心不论你刚开始时候是怎么样的，你只需几章之后就能掌握很好的动画技巧。

但是现在，有一个非常简单的挑战在等着你，你将创造一个属于你自己的动画。

挑战1：让云朵逐渐显现出来

在ViewController中你有四朵云：cloud1、cloud2 cloud3，和cloud4。您的任务是在应用程序启动时将它们隐藏。

您可以大致决定您将采取的解决方案，但这里列出了您需要完成的基本步骤：

1. 在viewwillappear()中设置四朵云的alpha属性为0。

2. 在viewdidappear()使四个单独的调用animatewithduration（_：延迟：选项：动画：完成：）。如果你使用四个动画的持续时间为0.5，延迟时间分别为0.5、0.7、0.9和1.1，你会得到一个好看自然的效果。

3. 在每个动画Block中，将各自的云视图的alpha更改为1。这会使云层褪色。

当你运行的时候，你应该看到一个很好的过渡效果，使界面中的云朵控件，一个接一个出现：

 

屏幕上的所有视图都有了良好的动画效果，但是-等等…登录按钮不是动画！

 

等等-下一章你会解决的