第2章:Springs
demo:https://github.com/womendexinshijie/BahamaAirLoginScreenOC1
在前一章中,您学习了如何创建UIKit的基本动画,包括如何提供起始值和结束值随着时间的UIKit,自动为你创建一个动画。
到目前为止,你的动画一直是单方向的流体运动。当你激活一个视图的位置时,它是一个从A点到B点的简单运动,就像这样:
![](https://i-blog.csdnimg.cn/blog_migrate/23c64a9738600289ab96d116a8169085.webp?x-image-process=image/format,png)
在本章中,您将学习如何创建更复杂的动画,将视图移动到它们与Spring的连接上,如下所示:
![](https://i-blog.csdnimg.cn/blog_migrate/6c455ea74acfc6c902fdad34a6c49905.webp?x-image-process=image/format,png)
如果你通过基本动画从A点到B点,在此基础上加点弹性,动画的运动将遵循一个下面的红色箭头指示的路径:
![](https://i-blog.csdnimg.cn/blog_migrate/608c53093c0f8500176328fb2fec07c9.webp?x-image-process=image/format,png)
箭头从A点到B点,但是超过B点的一小部分,然后箭头又返回B点另一侧一点。这种来回摆动重复直到视图在B点静止为止。
这是一个很好的效果;它增加了一个活泼的,真实的动感,让人切身的感受到你的动画。本章将向您展示如何使用此效果为用户界面添加一点趣味性。
Spring animations弹性动画
您将继续使用上一章的项目;如果您没有完成第1章中的练习(包括第1章最后的挑战),那么您也可以从第2章的资源文件夹中获取启动项目并使用它开始新的征程。
构建和运行你的项目;你应该看到屏幕上的视图(除了登录按钮)在应用程序打开时会有像这样的动画效果:
![](https://i-blog.csdnimg.cn/blog_migrate/c5f93d1b6c2f83c94fc4fcc6b97d9cb0.webp?x-image-process=image/format,png)
您的任务是处理屏幕上的最后一个非动画元素:登录按钮。
打开项目的视图控制器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的时候,一定是快的)
构建和运行您的项目;检查按钮现在如何移动:
![](https://i-blog.csdnimg.cn/blog_migrate/7319c792a9e5804e802bbf6ae1131a20.webp?x-image-process=image/format,png)
因为你的动画初始速度为0,中性阻尼为0.5,动画看起来不是很抢眼。
你应该通过尝试一些不同的速度和阻尼值来修饰这个动画。
将持续时间改为3,阻尼降至0.1。这只是为了让你观察到动画在慢动作中的变化,而不是正常的速度。
再次构建和运行您的项目;注意按钮的不透明度如何随着它的移动而变化。这是因为Spring行为影响了所有动画属性;在这种情况下,这会影响按钮的垂直位置和alpha值。
现在initialspringvelocity值设为1.0,建立并再次运行你的项目:
![](https://i-blog.csdnimg.cn/blog_migrate/1f256859557d980f54321576c6b75ddd.webp?x-image-process=image/format,png)
你会注意到,按钮弹起的最高点超过了密码控件然后再回落到最终设置的位置;这是因为它在运动的开始,施加了更多的动力,因而它需要更长的时间才能安定下来,回到它最终位置。
围绕阻尼和速度参数使用不同的值,直到您了解这些参数的变化如何影响动画的外观和感觉为止。
测试完成后,将速度和阻尼值设置为原来的值,像这样:
[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。使其左右两侧的边界增长。
构建并运行你的项目;点击按钮查看你的动画:
![](https://i-blog.csdnimg.cn/blog_migrate/eb9e6d62a07e02ea83d2daaf8aa8e0e9.webp?x-image-process=image/format,png)
当你点击这个按钮的时候,按钮有增长和反弹的动作,这是向用户提供了点击操作时的一种反馈效果。
接下来,您将结合这个动画与一些更多的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个点。注意,这个动画持续时间比按钮宽度的动画持续时间要短。
这是有意的,因为所期望的效果是点击按钮的时候就让它向下移动,在到达设置的垂直位置后弹跳一点。
构建并运行你的项目;点击按钮,看看它如何响应你的触摸:
![](https://i-blog.csdnimg.cn/blog_migrate/067e750dbdcec13878efbc215b9d16a5.webp?x-image-process=image/format,png)
看起来很不错,你很快就会成为一名动画大师,而且你知道你可以做得更好!
另一个提供给用户反馈的好方法是通过颜色改变。你将通过改变按钮背景色的色值来改变按钮的色彩。
在动画结束表达式中,添加以下代码到您动画结束的block中(completion:^(BOOL finished) {}):
self.loginButton.backgroundColor = [UIColor colorWithRed:0.85 green:0.83 blue:0.45 alpha:1.0];
![](https://i-blog.csdnimg.cn/blog_migrate/d3fb401f1e8e4476142d372971141e76.webp?x-image-process=image/format,png)
这里还有最后一点反馈:活动指示器。登录按钮应该在网络上启动一个用户身份验证的活动,所以向用户显示活动指示器,让他们知道正在进行的操作是在正常运行的。
向上滚动代码,你可以在viewdidload()中找到有关进度指示的代码。微调包含 UIActivityIndicatorView的代码,准备好你的使用实例。你还没有在屏幕上看到它,因为它的alpha设置为0。
回到login(),将下面的代码添加到最后的动画block表达式:
self.spinner.center = CGPointMake(40, self.loginButton.frame.size.height/2);
self.spinner.alpha = 1.0;
此动画将活动指示器向左移动,并将其淡入。这应该足以吸引用户的注意,让他们知道他们的请求正在被处理。
编译并运行您的项目;看看你漂亮的新动画的最终版本
![](https://i-blog.csdnimg.cn/blog_migrate/cdf38472396044b6aef8422d9ca4e278.webp?x-image-process=image/format,png)
花点时间反思一下你在这里所取得的成就。在按钮视图中添加了三个同步动画,以使其在宽度、移动屏幕和颜色方面进行了改变。
你的活动指示器动画和其淡入方式,这本身就是一个视图按钮的查看动效。
由UIKit创建出的动画自动的结合在一起正常运行,创造出一个流畅的视觉效果。
感谢UIKit!让你不需要担心你的动画的实现细节,而专注于设计优秀的动画
![](https://i-blog.csdnimg.cn/blog_migrate/be10773af238c5b4dc51a9bcbe92de43.webp?x-image-process=image/format,png)
挑战
挑战1:将文本字段动画转换为Spring动画
在UIKit中Spring动画的API和一般动画的使用标准十分相似。因此,将您在用户名和密码字段上运行的动画转换为Spring动画应该不会有什么问题。
要完成这一挑战,您需要执行以下操作:
1。添加usingspringwithdamping和initialspringvelocity参数动画的用户领域。弹簧初始速度使用0。尝试0.2,0.6和0.9弹簧阻尼,选择最使你愉快和舒服的Spring的值。
2。使用您选择的阻尼和速度重复密码字段动画。
![](https://i-blog.csdnimg.cn/blog_migrate/5688cdfbf9047114fc8437e66150746d.webp?x-image-process=image/format,png)
在这本书中,你已经获得了Spring动画的坚实基础。你玩这种类型的动画越多,你对阻尼和速度的不同组合进行的实验越多,你就越能为自己的应用程序设计完美的Spring动画。
你准备好进入下一章了吗?在3章中,你将了解UIKit的下一种类型:转换