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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,198评论 6 514
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,334评论 3 398
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,643评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,495评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,502评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,156评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,743评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,659评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,200评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,282评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,424评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,107评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,789评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,264评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,390评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,798评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,435评论 2 359

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,262评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,784评论 22 665
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,117评论 4 61
  • 第一章 为爱入凡尘 仙灵阁里两道身影!一黑一白!白色身影追赶着黑色身影!激斗了一会!两道身影都停了下来!...
    兮颜123123阅读 148评论 0 0
  • 001 时隔多年再一次看见歌信的时候,安季正在厨房将煎蛋煎的滋滋作响,他被人带进来的那一刻,两个人表情明显有一丝微...
    沐小英阅读 443评论 2 7