View Animations(二)Springs

在前一章View Animations(一): Getting Started with View Animations中,您学习了如何使用UIKit创建基本动画。 通过提供开始和结束值以及持续时间,延迟和其他选项,UIKit会自动为您创建动画

一: Chapter 2: Springs

到目前为止,您的动画是单向流动的。 当你使能视图的位置时,从A点到B点是一个简单的运动,像这样


image

在本章中,您将学习如何创建更复杂的动画,将视图移动到弹簧上,如下所示


image

如果将基本动画从A点移动到B点,并为其添加了一点弹性,则动画的运动将遵循以下红色箭头指示的路径:


image

视图从A点到B点,但超过B点少量。 然后这个视图返回到B点,并且这次稍微少了一点。 这个来回振动重复,直到观点在B点停下来
这是一个很好的效果; 它为您的动画增添了活泼,真实的感觉。本章将向您展示如何使用这个效果为您的UI增添一点趣味性

1.0: Spring animations

您将继续上一章的项目; 如果你没有完成第1章的练习(包括本章最后的挑战),那么从第2章的资源文件夹中获取初学者项目并从那里开始

建立并运行你的项目; 您应该在应用程序打开后立即看到屏幕上的视图(“登录”按钮除外),如下所示:


image

你的工作是注意修改这个屏幕上的最后一个非动画元素:登录按钮。

打开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的值将动画的速度设置为覆盖动画在一秒内的总距离。 越来越小的值将影响动画或多或少的速度
    建立并运行你的项目; 看看按钮现在如何移动:
    image

由于你的动画有0.0的初始速度和0.5的中性阻尼,动画看起来不太醒目
你应该可以通过尝试一些 不同的速度和阻尼值来修改这个动画
将持续时间更改为3.0,将阻尼更改为0.1。 这只是让你观察你的变化,而不是在正常的速度的影响
重新构建并运行您的项目; 注意按钮的不透明度如何随着向上移动而改变。 这是因为弹簧的行为会影响你制作的所有属性。 在你的情况下,这会影响按钮的垂直位置和它的alpha

现在将initialSpringVelocity设置为1.0,然后再次构建并运行您的项目

image

你会注意到,当它弹出并移动到密码字段之外时,按钮反弹得更多一些;这是因为它在运动开始的时候有更多的动力,需要更长的时间才能进入最后的位置
玩一些不同的阻尼和速度值,直到你理解, 这些参数的变化如何影响动画的外观和感觉
完成后,将速度和阻尼的值设置回原始值,如下所示

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)
1.1: 动画用户交互(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,按钮也会反弹一些。 增加边界增加了其左右两侧的框架
建立并运行你的项目; 点击按钮,看看你的动画在行动:


image

当你点击按钮时,按钮会以一种臃肿的方式增长和反弹; 向用户提供轻拍反馈是一种很好的方式
接下来,您将结合这个动画与更多的春季运动真正带来
生活的按钮。
将以下代码添加到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点。 请注意,此动画的持续时间比动画按钮宽度的持续时间短得多。

这是故意的,因为期望的效果是使按钮从水龙头跳开,并且一旦定位到其新的垂直位置时弹起一点。
建立并运行你的项目; 点击按钮,看看它是如何响应你的触摸这一次移动

image

这看起来非常好 - 但你很快成为一个动画大师,你知道你可以做得更好
提供用户反馈的另一个好方法是通过颜色变化。您将通过为按钮的backgroundColor属性设置动画来调整按钮的颜色

将以下代码添加到动画关闭表达式中添加的最后一个动画中:

 self.loginButton.backgroundColor =
UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)

重新构建并运行您的项目; 你会看到按钮移动,改变形状和改变颜色,都在同一时间:


image

还有最后一点反馈意见添加在这里:一个活动指标。 “登录”按钮应该在网络上启动用户认证活动,因此,向用户显示一个活动指示器让他们知道正在进行的操作将会很好。

向上滚动并查看viewDidLoad()并查找进度指示器的现有代码。 微调器包含一个UIActivityIndicatorView的实例,可供您使用。您尚未在屏幕上看到它,因为它的alpha设置为0.0。

login()并将下面的代码添加到上一个动画闭包表达式中

self.spinner.center = CGPoint(
  x: 40.0,
  y: self.loginButton.frame.size.height/2
)
self.spinner.alpha = 1.0

这个动画将微调稍微向左移动并淡入。这应该足以吸引用户的注意力,让他们知道他们的请求正在处理中。

建立并运行你的项目; 看看你的漂亮新动画的最终版本:


image

花一点时间来思考你在这里完成了什么。 您已将三个同步动画添加到按钮视图,以使其在宽度上增大,向下移动屏幕并更改颜色

您还在动画微调器中动画和淡入淡出,这本身就是按钮视图的子视图。

所有动画都通过UIKit自动合并,完美运行,创造出流畅的视觉效果。
您不需要担心动画的实现细节, 您可以专注于设计出色的动画,并感谢UIKit!

1.2: 挑战(Challenges)

挑战1:将文本字段动画转换为弹簧动画

UIKit中的弹簧动画API在使用上与其标准动画相似。 因此,将您在用户名和密码字段上运行的动画转换为弹簧动画应该不是什么大问题。
要完成这一挑战,您需要执行以下操作:

  • 1: 将useSpringWithDampinginitialSpringVelocity参数添加到用户名字段的动画中。 使用0.0作为弹簧初始速度。尝试0.2,0.6和0.9的弹簧阻尼,并选择看起来最令人愉快和微妙的弹簧效果的价值给你。
  • 2.使用您选择的阻尼和速度对密码字段动画重复同样的操作。
image

在这本书中,你已经获得了弹簧动画的坚实基础。 使用这种类型的动画玩得越多,用不同的阻尼和速度组合进行试验的越多,您将更自在地为自己的应用设计完美的弹簧动画。

你准备好进入下一章了吗? 在第3章中,您将学习UIKit中的下一类动画:transitions

你可能感兴趣的:(View Animations(二)Springs)