SECTION 3

自然的动作

标准的动画时间曲线是好用的,但还可以更好,而且它们不足以让你的用户觉得对你的界面感到惊奇和愉悦,因为它们仍然是机器人的感觉,而不是如人类或受外力驱动的物体般完全流动性和自然。如果我们想要让动画变得真正的自然,我们就需要去观察自然世界以及真实的物体的行为,这样我们就可以模仿其动作。这就是软件中迷人、自然的动画的秘密本质:让你的物体动作符合物理法则,这样你界面中的元素就仿佛有了质量和动量,就如在屏幕上滑动或就在你的用户手指下方一般。

所以自然的动作时怎样的呢?符合物理法则的移动例子是什么?好吧,就如下面这个一般。


SECTION 3 - 图1

弹簧的阻尼


一个挂着方块的弹簧。它就如你所期望弹簧上的方块一样移动,因为你之前已经看过或体验过类似的弹簧运动很多次了。它的运动和之前说的简单动画时间曲线有很大的不同。让我们看一下弹簧上物体的动画曲线。


SECTION 3 - 图2

阻尼的震荡运动


这个曲线表示了挂在弹簧上的物体的运动,有很多的属性(例如拉力、摩擦力和阻力)都影响了其动作。如果你观察上图中的深蓝色曲线,它表示欠阻尼的系统,意味着物体在到达最终稳定位置前会来回震荡(反弹)。这就是让动画如上面的例子一般感觉像弹簧上挂着的方块一样需要的动画曲线类型。这种欠阻尼的弹簧动作可以让动画变得有弹性,很多app都在界面动画中采用了这种类型的动作。比如说,Facebook Paper几乎对所有界面动作使用了这种弹簧动作。

上图中中间的蓝色曲线也显示了一个欠阻尼的系统(在稳定前反弹过最终点),但它是一个反弹较少的更加平滑的动作类型。这会导致一个更精细的感觉,而过度反弹的动画会让你的界面变得太丰富或热情。

红色曲线描述了一个很少反弹而且只在到达最终位置前越过一点点的动作。如果物体一点都不震荡和反弹,只是缓慢地到达最终位置,这种弹簧就叫欠阻尼。

让我们看看类似弹簧动作的物体。红色的圆仿佛附有非常有弹性的弹簧一般在移动。绿色的圆带着稍微平滑一些的弹性移动。蓝色的不带有弹性,但会在接近终点值时以指数级衰退速度的动画变得非常的缓慢。


SECTION 3 - 图3


第三个球实际上并没有弹性,但它的动画依然被现实世界的弹簧物理法则所管理,是怎么回事呢?弹簧不是应该有弹性么?如我之前所说,附有弹簧的物体的动作实际上由弹簧的特性决定。想象一个弹簧,组成弹簧的线非常的细。这个弹簧的拉力是非常的松额,如果你在其底部挂上一个小物体,并松开它,你就会看到如红球演示的弹性动作。比较一个拥有更多线圈和更大拉力的更加高强度类型的弹簧。挂在这种类型弹簧上的物体动作会很没有弹性,因为弹簧的属性非常不同。


SECTION 3 - 图4


类似弹簧动作的动画曲线和简单类型动作的动画曲线可能看起来相似(至少他们都是曲线!),但是它们背后的数学运算是非常不同的。如前所说,简单曲线通过三维贝塞尔函数来定义绘制曲线控制点的位置。不幸的是,很多高级类型的曲线不能用贝塞曲线来描述。其中一种曲线就是阻尼弹簧系统。

使用好的拥有弹簧感觉动画的动作类型一般模仿阻尼谐振,其可以调整弹簧末端方块质量、弹簧的刚度、阻尼强度等不同值。


SECTION 3 - 图5


质量是指挂在弹簧末端物体的质量。刚度是指拉伸弹簧的难度,一般由弹簧的厚度和盘绕的密度决定。阻尼强度是指抵抗力度或者摩擦力,就如你尝试在水中快速拖动你的手时受到的阻力。这些是定义一个弹簧动作的关键属性。

如果你想要从头构建起你对web、iOS或其他平台的动画库,并且想要支持类似弹簧的动画,你就需要理解弹簧系统背后大量的数学知识才能正确地实现它。幸运的是,对于iOS,有很多已经存在的优秀的动画框架(由苹果公司或其他人创建)可以用来创建自然的、类似弹簧的动画。

在我们投入动画编码之前,让我们从头开始讨论开发iOS app的基本原则,然后进入界面开发和iOS动画。

开始iOS开发

如果你已经踏入原生iOS app开发之中,你可以跳过这一节去看Core Animation入门。但如果你刚开始iOS app的开发,抓住其基本就很重要,这样你就可以完全理解事物工作的原理。

Xcode

Xcode是Mac和iOS开发者用来创建原生应用的IDE(集成开发环境)。它不仅仅是一个像你可能用过的Sublime Text之类的代码编辑器,它是设计、编程、测试、调试和分发Mac和iOS应用的整个一套功能。有一些编写Mac和iOS app的替代方式,但是大部分的开发者都使用Xcode。要开始接下来的编程实例,你需要有从Mac App Store上下载的最近版本的Xcode。

iOS模拟器

iOS模拟器让你可以在你的Mac上测试你的iOS app,其提供一个窗口让它看起来像是你正在iPhone或者iPad上运行它们。如果你安装了最新版本的Xcode,它会包含iOS模拟器而且可以模拟所有当前的(以及大部分以前的)iOS设备,例如iPhone 4、5、6、6Plus、iPad、iPad retina、iPad mini等等。因为新iPhone的真实分辨率太高了,在第一次运行模拟器的时候你可能会惊讶,因为窗口非常巨大,可能会超过你屏幕的顶部和底部!幸运的是你可以在一个小一些的尺寸上显示模拟器窗口这样就方便看一些。重要的是要记住模拟器不是测试你app的完美方式,唯一获取性能和app感觉的方式是在你的设备上运行它,你可以在Xcode开着的时候将设备连接Mac,跟随指令在你的手机上运行它。

Objective-C

Objective-C是一种编程语言,于1980年代首次出现,并作为编写NeXT计算机的主要语言受到欢迎。当苹果公司买下NeXT后,他们使用了NeXTSTEP操作系统下的技术并用它创建了Mac OS X,从此Mac app和iOS app都使用Objective-C开发。 苹果公司使用Objective-C编写OS X和iOS的所有软件。在最近几年,苹果公司作出了显著的改善让Objective-C更适合新的程序员。

Swift

在2014年夏天的苹果开发者大会,苹果公司宣布他们正在致力于一种新的编程语言,名为Swift,此语言从Objective-C、Rust、Haskell、Ruby、Python和其他语言中获取灵感,创建出他们称为“不要C的Objective-C”的语言。Swift被设计为和已经存在的Cocoa和Cocoa Touch框架协作(苹果公司提供给开发者来创建应用的API库)而且可以和Objective-C在同一个app中共存,但不能在同一个源代码文件中。部分的WWDC app是用Swift编写的,但苹果仍未任何完全用Swift编写的主要软件。当2014年九月初发布iOS 8时,苹果宣布Swift发布了1.0版本并可以安全地使用于发布到App Store的app中。

我对于Objective-C和Swift的立场是:Swift太新了,而且在走向黄金时代生产app开发前依然有问题需要解决。然而,它的语法比起Objective-C无处不在的的方括号[和],看起来和JavaScript更为接近,因此它对新的iOS开发者更为诱人。我依然使用Objective-C编写我的app,但随着时间流逝,我会至少在新的工程中部分使用Swift。我对Swift中的一些Objective-C没有的高级语言特性非常期待。本书中的全部动画示例代码都会有Objective-C和Swift两种编写方式,因此你可以理解和观察其区别并自行选择哪一种语言对你的使用更有意义。

如果Objective-C对你来说是全新的,我推荐你阅读我对Objective-C的介绍以及Big Nerd Ranch的Objective-C Programming book。如果Swift对你来说是全新的(除了苹果公司以外每个人都是这样!)你应该看看iBooks上500页的Swift Programming Language 指南,这是免费的。在苹果开发者中心也有一个非常好的Swift引导

现在你队iOS开发工具和语言都有了一些接触,让我们开始一些关于iOS app界面是如何创建的以及让它们显示在屏幕上的过程的细节。