UIKit的springs为观看动画提供了更多的润色和美感。 Apple自己将弹簧用于大量系统动画以及自己的应用程序。 springs通常负责您在屏幕上看到的任何弹跳视图,但是在摆弄springs动画参数时,您会看到此API允许您创建各种令人愉悦的动画。
到目前为止,您的动画一直是单向流动。 当您为视图的位置设置动画时,它是从A点到B点的直接移动,如下所示:
在本章中,您将学习如何创建更复杂的动画,这些动画可以移动视图
仿佛它们附着在弹簧上,如下所示:
如果您将基本动画从A点移动到B点并为其添加了一点弹性,则动画的运动将遵循下面红色箭头指示的路径:
视图从A点到B点,但是B点过量。 然后视图返回到B点,这次稍微超过一点。 这种来回振荡重复,直到视点在B点停止。
这是一个很好的效果; 它为您的动画增添了一种活泼,真实的感觉。 本章将向您展示如何使用此效果为您的UI添加一些趣味性。
Spring动画
你将继续上一章的项目; 如果你没有完成第1章中的练习(包括本章末尾的挑战),那么从第2章的Resources文件夹中获取入门项目并从那里开始。
构建并运行您的项目; 应用程序打开后,您应该立即看到屏幕上的视图(“登录”按钮除外)动画:
打开ViewController.swift并将以下代码添加到viewWillAppear()的底部:
loginButton.center.y += 30.0
loginButton.alpha = 0.0
正如您在上一章中所做的那样,您可以在y轴上将按钮的起始位置设置得稍低,并将其alpha值设置为零,这样它就会以不可见的方式开始。
现在转到viewDidAppear()并添加以下代码:
UIView.animate(withDuration: 0.5, delay: 0.5,
usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [],
animations: {
self.loginButton.center.y -= 30.0
self.loginButton.alpha = 1.0
}, completion: nil)
这段代码中有两个关键点
首先,您同时为两个不同的属性设置了动画! 这比你想象的容易,对吧?
其次,你第一次使用了一种新的动画方法:
animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:optio ns:animations:completion : )。 说方法名称太快只会伤害你的舌头!
上面的方法看起来很像你在上一章中使用的方法
书,但它有几个新的参数:
- usingSpringWithDamping:它控制在动画接近最终状态时应用于动画的阻尼或减少量。 此参数接受介于0.0和1.0之间的值。 接近0.0的值创建一个更有弹性的动画,而接近1.0的值创建一个看起来很僵硬的效果。 您可以将此值视为弹簧的“刚度”。
- initialSpringVelocity:它控制动画的初始速度。 值1.0设置动画的初始速度以覆盖跨度为一秒的总距离。 较大和较小的值将导致动画具有或多或少的速度,并将影响弹簧的稳定方式。 但请注意,初始速度很快就会通过弹簧计算进行修改,并且动画将始终在持续时间结束时完成。
构建并运行您的项目; 看看按钮现在如何移动:
由于动画的初始速度为0.0,中性阻尼为0.5,因此动画看起来并不引人注目。
你应该能够通过尝试一些不同的速度和阻尼值来装扮这个动画。
将持续时间更改为3.0,将阻尼更改为0.1。 这只是为了让您观察慢动作而不是正常速度的变化效果。
再次构建和运行您的项目; 注意按钮的不透明度在向上移动时如何变化。 这是因为弹簧行为会影响您制作动画的所有属性; 在您的情况下,这会影响按钮的垂直位置及其alpha值。
现在将initialSpringVelocity设置为1.0并再次构建和运行项目:
您会注意到,当按钮动画并超出密码字段时按钮会反弹一点; 这是因为它在运动开始时有更多的动力。
使用一些不同的阻尼和速度值,直到您了解这些参数的变化如何影响动画的外观。
完成后,将速度和阻尼的值设置回原始值,如下所示:
UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping:
0.5, initialSpringVelocity: 0.0, options: [], animations: {
self.loginButton.center.y -= 30.0
self.loginButton.alpha = 1.0
}, completion: nil)
动画用户交互(Animating user interactions)
您不必将弹簧动画限制为视图的初始位置。 事实上,动画视图以响应用户输入可以真正使您的界面活跃起来。在本节中,您将使登录按钮动画化,以响应轻击。
将以下代码添加到login():
UIView.animate(withDuration: 1.5, delay: 0.0, usingSpringWithDamping:
0.2, initialSpringVelocity: 0.0, options: [], animations: {
self.loginButton.bounds.size.width += 80.0
}, completion: nil)
构建并运行您的项目; 点击按钮以查看动画中的动画:
上述动画在一秒半的持续时间内将按钮的宽度增加80点。 由于阻尼设置为0.2,因此按钮也会反弹一点点。 增加边界会增加其左右两侧的框架。
点击它时按钮会以斑点的方式生长和反弹; 这是向用户提供点击反馈的简洁方法。
接下来,您将把这个动画与更多的弹簧动作结合起来,真正将按钮带入生活。接下来,您将把这个动画与更多弹簧动作结合起来,真正实现按钮。
将以下代码添加到login()的末尾:
UIView.animate(withDuration: 0.33, delay: 0.0, usingSpringWithDamping:
0.7, initialSpringVelocity: 0.0, options: [], animations: {
self.loginButton.center.y += 60.0
}, completion: nil)
点击时上面的动画将按钮向下移动60点。 请注意,此动画的持续时间比动画按钮宽度的持续时间短得多。
这是有意的,因为期望的效果是使按钮跳离水龙头并在其稳定到新的垂直位置后反弹一下。
构建并运行您的项目; 点击按钮,看看它在这次触摸时的移动方式:
这看起来很不错 - 但你很快就会成为动画大师,你知道你可以做得更好!
提供用户反馈的另一个好方法是通过颜色变化。 通过为按钮的背景颜色属性设置动画,您可以在移动按钮时对其进行着色。
将以下代码添加到您在动画闭包中添加的最后一个动画中表达式:
self.loginButton.backgroundColor =
UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)
再次构建和运行您的项目; 你会看到按钮移动,改变形状和改变颜色,所有这些都在同一时间:
在这里添加最后一点反馈:一个活动指标。 登录按钮应该通过网络启动用户身份验证活动,因此向用户显示活动指示器以让他们知道正在进行的操作会很好。
创建一个全局变量
let spinner = UIActivityIndicatorView(style: .whiteLarge)
在viewDidAppera()添加一下代码:
spinner.frame = CGRect(x: -20.0, y: 6.0, width: 20.0, height: 20.0)
spinner.startAnimating()
spinner.alpha = 0.0
loginButton.addSubview(spinner)
返回login()并将以下代码添加到最后一个动画闭包表达式:
self.spinner.center = CGPoint(
x: 40.0,
y: self.loginButton.frame.size.height/2
)
self.spinner.alpha = 1.0
此动画将spinner稍微向左移动并将其淡出。这应足以吸引用户的注意力并让他们知道正在处理他们的请求。
构建和运行项目;看看你的新动画的最终版本:
花点时间思考一下你在这里取得的成就。 您已在按钮视图中添加了三个同时动画,以使其增大宽度,向下移动屏幕并更改颜色。
您还在活动微调器中进行了动画和淡化,它本身就是按钮视图的子视图。
所有动画都由UIKit自动组合,完美运行,创造出一种流畅的视觉效果。
您无需担心动画的实现细节; 您可以通过UIKit专注于设计出色的动画并让用户惊叹!
关键点(Key Points)
- 您可以通过创建动画来响应用户的操作,为用户交互创建视觉反馈。
- 您以与“标准”动画非常相似的方式创建弹簧动画 - 附加参数是弹簧阻尼和初始速度。
- 结合各种动画(使用弹簧或不使用弹簧)可创建丰富的视觉体验。
挑战(Challenges)
将文本字段动画转换为弹簧动画
UIKit中的spring动画API与其标准动画版本的用法非常相似。 因此,将您在用户名和密码字段上运行的动画转换为弹簧动画应该不会有太大问题。
要完成此挑战,您需要执行以下操作:
- 将usingSpringWithDamping和initialSpringVelocity参数添加到用户名字段的动画中。 使用0.0表示弹簧初始速度。 尝试0.2,0.6和0.9的弹簧阻尼,并选择看起来最像一个愉快和微妙的弹簧效果的值。
- 使用您选择的阻尼和速度对密码字段动画重复相同的操作。2. 使用您选择的阻尼和速度对密码字段动画重复相同的操作。
至此,你已经获得了弹簧动画的坚实基础。 使用此类动画的次数越多,您尝试使用不同的阻尼和速度组合就越多,您就可以更自如地为自己的应用中的视图设计完美的弹簧动画。
你准备好进入下一章了吗?在第3章中,你将学习UIKit中的下一种类型的动画:“transitions”。