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

                     

  第2章：Springs

demo：https://github.com/womendexinshijie/BahamaAirLoginScreenOC1

在前一章中，您学习了如何创建UIKit的基本动画，包括如何提供起始值和结束值随着时间的UIKit，自动为你创建一个动画。

到目前为止，你的动画一直是单方向的流体运动。当你激活一个视图的位置时，它是一个从A点到B点的简单运动，就像这样：

在本章中，您将学习如何创建更复杂的动画，将视图移动到它们与Spring的连接上，如下所示：

如果你通过基本动画从A点到B点，在此基础上加点弹性，动画的运动将遵循一个下面的红色箭头指示的路径：

箭头从A点到B点，但是超过B点的一小部分，然后箭头又返回B点另一侧一点。这种来回摆动重复直到视图在B点静止为止。

这是一个很好的效果；它增加了一个活泼的，真实的动感，让人切身的感受到你的动画。本章将向您展示如何使用此效果为用户界面添加一点趣味性。

Spring animations弹性动画

您将继续使用上一章的项目；如果您没有完成第1章中的练习（包括第1章最后的挑战），那么您也可以从第2章的资源文件夹中获取启动项目并使用它开始新的征程。

构建和运行你的项目；你应该看到屏幕上的视图（除了登录按钮）在应用程序打开时会有像这样的动画效果：

您的任务是处理屏幕上的最后一个非动画元素：登录按钮。

打开项目的视图控制器ViewController，然后将下面的代码添加到viewWillAppear() :方法内的：

self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y + 30.0);

self.loginButton.alpha = 0.0;

正如前一章所做的那样，在y轴上设置按钮的起始位置稍低一点，并将其alpha值设置为零，使其开始为不可见。

现在viewdidappear()添加以下代码：

[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:nil animations:^{

        self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y - 30.0);

        self.loginButton.alpha = 1.0;

    } completion:nil];

这段代码有两个要点。

首先，您同时激活了两个不同的属性！这比你想象的容易，对吧？

其次，您第一次使用了一种新的动画方法：

animatewithduration（_:delay: usingSpringWithDamping: initialSpringVelocity: opti ons: animations: completion:）。说方法的名字太快可能会伤害你的舌头！?

上面的方法很像你在本书前一章所用的方法，但是它有一些新的参数：

•usingspringwithdamping：控制阻尼量，或降低，当动画接近它的最终状态时使用到阻尼参数。此参数接受0到1之间的值。值接近0，创造一个活跃的动画，而值接近1，将会展现一种僵硬的动画效果。你可以把这个值看作弹簧的“刚度”。

•initialspringvelocity：控制动画的初始速度。将动画的初始速度的值设置为1，预示着在一秒钟内(动画运动的持续时间duration：内)动画运动的总距离。所以值的大小会影响动画的初始速度的快慢（值越大。开始时动画的速度越快，值越小，动画开始时的速度越小；效果可以通过固定动画持续时间，改变此值来观看）。（注释：假设动画持续时间为1秒，initialspringvelocity值为2，说明动画要在1秒内运动2的距离，如果initialspringvelocity值为10，说明动画在1秒内要运动10的距离，速度相较于2的时候，一定是快的）

构建和运行您的项目；检查按钮现在如何移动：

因为你的动画初始速度为0，中性阻尼为0.5，动画看起来不是很抢眼。

你应该通过尝试一些不同的速度和阻尼值来修饰这个动画。

将持续时间改为3，阻尼降至0.1。这只是为了让你观察到动画在慢动作中的变化，而不是正常的速度。

再次构建和运行您的项目；注意按钮的不透明度如何随着它的移动而变化。这是因为Spring行为影响了所有动画属性；在这种情况下，这会影响按钮的垂直位置和alpha值。

现在initialspringvelocity值设为1.0，建立并再次运行你的项目：

你会注意到，按钮弹起的最高点超过了密码控件然后再回落到最终设置的位置；这是因为它在运动的开始，施加了更多的动力，因而它需要更长的时间才能安定下来，回到它最终位置。

围绕阻尼和速度参数使用不同的值，直到您了解这些参数的变化如何影响动画的外观和感觉为止。

测试完成后，将速度和阻尼值设置为原来的值，像这样：

[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:nil animations:^{

        self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y - 30.0);

        self.loginButton.alpha = 1.0;

    } completion:nil];

动画的用户交互

您不必局限在将Spring动画添加到视图的初始位置。事实上，根据用户输入时再激活动画，可以真正的使界面变得生动起来。在本节中，您将对登录按钮进行激活使其变得更加生动。

将下面的代码添加到login()：

[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:nil animations:^{

        self.loginButton.bounds = CGRectMake(self.loginButton.bounds.origin.x, self.loginButton.bounds.origin.y, self.loginButton.bounds.size.width + 80.0, self.loginButton.bounds.size.height);

    } completion:nil];

上面的动画将按钮的宽度增加了80，持续了1.5秒。该按钮均匀的向周围扩散，因为阻尼设置为只有0.2。使其左右两侧的边界增长。

构建并运行你的项目；点击按钮查看你的动画：

当你点击这个按钮的时候，按钮有增长和反弹的动作，这是向用户提供了点击操作时的一种反馈效果。

接下来，您将结合这个动画与一些更多的Spring动作，真正的让按钮生动起来。

将下面的代码添加到login()方法的结尾：

[UIView animateWithDuration:0.33 delay:0.0 usingSpringWithDamping:0.7 initialSpringVelocity:0.0 options:nil animations:^{

        self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y + 60.0);

    } completion:nil];上面的动画在点击时将按钮向下移动60个点。注意，这个动画持续时间比按钮宽度的动画持续时间要短。

这是有意的，因为所期望的效果是点击按钮的时候就让它向下移动，在到达设置的垂直位置后弹跳一点。

构建并运行你的项目；点击按钮，看看它如何响应你的触摸：

看起来很不错，你很快就会成为一名动画大师，而且你知道你可以做得更好！

另一个提供给用户反馈的好方法是通过颜色改变。你将通过改变按钮背景色的色值来改变按钮的色彩。

在动画结束表达式中，添加以下代码到您动画结束的block中(completion:^(BOOL finished) {})：

self.loginButton.backgroundColor = [UIColor colorWithRed:0.85 green:0.83 blue:0.45 alpha:1.0];

这里还有最后一点反馈：活动指示器。登录按钮应该在网络上启动一个用户身份验证的活动，所以向用户显示活动指示器，让他们知道正在进行的操作是在正常运行的。

向上滚动代码，你可以在viewdidload()中找到有关进度指示的代码。微调包含 UIActivityIndicatorView的代码，准备好你的使用实例。你还没有在屏幕上看到它，因为它的alpha设置为0。

回到login()，将下面的代码添加到最后的动画block表达式：

self.spinner.center = CGPointMake(40, self.loginButton.frame.size.height/2);

self.spinner.alpha = 1.0;

此动画将活动指示器向左移动，并将其淡入。这应该足以吸引用户的注意，让他们知道他们的请求正在被处理。

编译并运行您的项目；看看你漂亮的新动画的最终版本

花点时间反思一下你在这里所取得的成就。在按钮视图中添加了三个同步动画，以使其在宽度、移动屏幕和颜色方面进行了改变。

你的活动指示器动画和其淡入方式，这本身就是一个视图按钮的查看动效。

由UIKit创建出的动画自动的结合在一起正常运行，创造出一个流畅的视觉效果。

感谢UIKit！让你不需要担心你的动画的实现细节，而专注于设计优秀的动画

                                                     挑战

挑战1：将文本字段动画转换为Spring动画

在UIKit中Spring动画的API和一般动画的使用标准十分相似。因此，将您在用户名和密码字段上运行的动画转换为Spring动画应该不会有什么问题。

要完成这一挑战，您需要执行以下操作：

1。添加usingspringwithdamping和initialspringvelocity参数动画的用户领域。弹簧初始速度使用0。尝试0.2，0.6和0.9弹簧阻尼，选择最使你愉快和舒服的Spring的值。

2。使用您选择的阻尼和速度重复密码字段动画。

在这本书中，你已经获得了Spring动画的坚实基础。你玩这种类型的动画越多，你对阻尼和速度的不同组合进行的实验越多，你就越能为自己的应用程序设计完美的Spring动画。

你准备好进入下一章了吗？在3章中，你将了解UIKit的下一种类型：转换