SECTION 2

SECTION 2

动画属性

回头看看上一节显示的动画，它们是如何从一个空白的画布或白班变成一个复杂、漂亮的动画的？这些动画是怎么产生的？在变化过程中改变的特殊属性是什么？在回忆中摇晃你的手来表明一些物体应该移动或拉伸是不够的：如果你想要动画脱离你的手进入界面，你需要仔细思考在每一步中会发生什么以及哪些值被操作了。

如果你看一下上一节展示的动画GIF图，以及像CAPPTIVATE.co和其他网站展示的多种动画，并且你对发生了什么观察得非常仔细，你就会开始在视觉效果中看出一些模式来。这些模式是设计师和开发者在他们的动画中一次又一次改变的特定属性，而且这还不是全部。事实上我认为如果你简单地操作下面三个属性就可以创建一个充满了世界级动画的完整app：

位置：界面上一个物体的精确的X和Y坐标。
透明度：一个物体的透明度，从0.0（不可见）到1.0。
比例：一个物体对比于其原始尺寸的尺寸。1.0的比例意味着物体被设置为其原始大小的高和宽。0.5的比例意味着物体是一半的宽度和高度。0.0的尺寸意味着物体的宽度和高度都是0，但依然存在于界面上一个特定的坐标。2.0的比例意味着物体的高度和宽度是原始的两倍。

这三个属性是人们设计iOS app的动画时三个可动画化的值。你可以通过简单地单独或结合使用这些属性实现惊人数量的好动画。

所以通过位置、透明度和比例这三个属性，你能做什么？怎样做才能操作这些属性来在屏幕上实现？

位置。如果你想要让一个物体在屏幕上移动，你只需要操纵它的位置。将一个向屏幕的下方移动意味着你在增加其Y坐标，因为（X:0, Y:0）在iOS app中表示屏幕的左上角。如果你想要将一个物体从屏幕的底部移动到中央，你首先需要将Y坐标设为比屏幕的垂直分辨率大（道屏幕底部），然后将Y坐标动画移动到一个较小的数值来放置在屏幕的中央。

320*568是iPhone 5屏幕的一倍分辨率。iPhone 6的屏幕是375*667。然而全部真实的像素总数是这个的两倍，但你放置UI对象到屏幕上时不需要考虑这个。

透明度。将一个界面元素从100%不透明改成透明一些意味着你在调整它的透明度，或者alpha值。动画改编一个物体的透明度可能是最常见的属性，这可以在与背景混合到100%不透明地显露在前端之间做一个很好的过渡。而且如果你在缓慢地从屏幕上移除一些东西，动画淡出将其alpha设为0通常不会有错。一般你会看到透明度动画和其他属性的动画同时出现，比如说，将一些东西从屏幕底部移动到屏幕上（位置），同时将其透明度从0.0（透明）动画变成1.0（不透明）。

比例。如果你想要让一个物体变大或变小（一次变化两个方向来保持其比例，或一次只变化一个方向），有一个简单的属性可以调整，那就是物体的比例。想要创建一个看起来和iOS 7的警告框视图一样的模态警告框么？那是一个依托于改变比例的视觉效果的很简单的动画。将比例初始设为大概1.3倍（比原始尺寸要大），然后将其动画变为1.0倍（原始尺寸），同时改变透明度（从0开始变成1.0），这就是它的全部。

现在我们已经描述了在设计动画是经常用到的三个属性，让我们回到之前我展示的动画例子并精确地拆分它们哪里用了位置、透明度和比例动画来创建它们的视觉效果。

在Jeff的地图动画中，他同时使用了所有位置、透明度和比例动画的组合。

初始的面板稍微缩小并且透明度降低，所以它很好地淡出到应用的背景中去了。
地图面板从一个比1.0倍稍微大一点的比例（可能是1.1倍之类的）以及0.0的透明度开始。然后动画减小到1.0倍以及1.0的透明度。它还有一个轻微的位置动画来上移一些像素。

记得这个手表的界面和它光滑的动作么？真的没有什么秘诀，这个动画设计唯一的属性就是元素的位置。没有比例或者透明度的调节，元素仅仅是在屏幕上通过改变他们的位置来移入移出。每个动画的开始时间会比前一个元素稍微错开一点来给出一种“拖拽”的感觉，但是唯一用到动画里的就只有位置。

动画一个元素的位置、透明度和比例可以让你走的很远，但当然也有其他你可以在动画中操作的属性。这里是三个在更高级的动画中经常用到的元素属性。

颜色。就如CSS动画中一样，你可以在两个值之间过渡颜色。这可以是你界面中一些文本的颜色或形状和面板的背景色。你可以在一次点击或者介绍一个新界面给用户的时候过渡颜色。或者可以在用户首次体验一个滑动的时候在颜色之间缓慢地切换。

旋转。你界面中的物体可以旋转，从初始的0度到360度的旋转状态到360度的整体旋转并回到0度。当你在代码中创建动画的时候旋转通常使用弧度来表示（0到2π）。轻微的旋转动画可以增加非常灵巧有趣的元素到原本平凡的动作中去，尤其是和之后会讨论的跳跃动画曲线组合的时候。

3D。在你的界面中以3D的方式变化一个物体意味着在第三个方向上操作它，并且当你在动画中使用3D的时候，通常要么是3D旋转回屏幕，要么是旋转向用户。这个旋转的数量也是像2D平面旋转一样用弧度来表示的，但3D动画的另一个关键因素是你想使用多少透视程度。通过改变透视值，你可以有限地描述元素会被放置在视觉上离屏幕前端多远的地方。这取决于3D变化过程中变形的数值。

一个精细的3D效果的例子是Clear中捏的动画。这个视觉效果是任务条目行视觉上折了一半，其中每一半都向屏幕里面旋转（在3D空间上）。旋转的数值和行的上下两半的位置都被仔细的控制，所以在中间没有缝隙去影响效果。还有，为了让它看上去确实像一个三维物体，要让行的上半部分比下半部分暗来显示一个阴影。这类似于Paper中的弹起动画：新闻在打开的时候使用了一个3D变化来旋转向用户。

Clear中的捏交互

计划动画

如果把动画比作一个房子，你现在至少已经在熟悉造房子的工具了：锤子、扳手和螺丝刀。你熟悉的动画的工具也就是你在创建一个动画的时候操作的特定属性。但这还不是你考试思考动画和设计动作需要知道的全部。

现在是时候开始布局动画的蓝图了。这是指准确描述动画中每一步将会发生什么的说明。如我之前提到的，你不能在开会的时候仅仅挥舞你的手臂来解释当用户点击一个按钮的时候会发生什么，你需要一个语言来描述和拆分你在想想一个界面元素运动时头脑中发生的事情。在你创建之前，你的下一步应该是思考将其化为细粒度并且写下动画的各个部分的细节。这就是动画的计划。

对于每个动画化的元素，在我开始写代码之前我喜欢思考以下几点。

元素的初始属性是什么？只是在屏幕的底部？是完全透明的吗？它会缩小的微观尺度吗？它是巨大的吗？
元素的最终属性是什么？元素现在是在屏幕的中间吗？现在是对用户完全可见的吗？它是不是被旋转到一个特定的角度了？他是不是有了一个不同的背景色？
动画应该持续多长时间？在这个初始阶段要知道动画的准确时间是很难的，所以我喜欢把时间转化为我打响指的时间长度。一个响指？三个响指？因为要在结束移动前进行弹跳所以是五个响指？
元素动画的时候会发生什么？通常你会同时动画很多事情，时间上一个个错开。作为整体的一部分来思考这些次级动画很重要。
元素结束动画的时候会发生什么？当你的动画结束的时候应该移除元素吗？或者也许在结束动画三个响指之后你想要它从另一个方向上离开？或者当这完成后，另一个元素会开始它的动画？

像这样组织你的思路会很有帮助。首先，它会强制你将一个抽象的动画概念模型转化为你可以跟他人描述的具体事物。然后，通过这个步骤你可能会发现一些在宏观视角下没有发现的需要处理的问题。元素2适合元素1同时开始动画吗？还是稍微错开一些？错开的时间应该多长？我应该将元素3移动多少距离来和元素4对齐？在我将元素5缩回到1.0倍大小前应该将它置为多大？我是应该将元素6淡出还是仅仅将它的比例减小到0？你一开始往往不会有这些问题的答案，但当你开始创建和运行你的动画的时候就会很快得到的。

如同生活一样，时间就是一切

有一个我至今没提到的动画的关键成分，但它确实是创建一个非常棒的、自然的动画最重要的一块拼图。时间。在一个动作发生和一个动画开始之间的时间。一个动画持续的时间。在两个动画开始之间的时间。

当然还有的是，你的动画元素的属性如何随着时间改变，只是动画的本质。

最简单的可视化说明时间以及属性随着时间改变的效果的方式如下所示。

一个线性动画的时间曲线

图像代表了一个动画。垂直坐标轴表示你在动画的属性值，在这个例子中是元素的比例。对于这个动画，我们会从比例值为0.0开始（对用户不可见）并以1.0的比例值结束（元素的初始尺寸）。

水平轴表示动画开始（经过0秒）到你的动画完成的时间，在这个例子中，是一个1秒长的动画周期。橙色的线准确地表示了在某个特定的时间点属性值会变得怎样。如你所见，橙色的线是完全笔直的，这意味着值随着时间改变的比率是一个定值。对于这个动画，比例值随着一秒的时间以一个不变的变更比率从0.0到1.0变化。

这种特殊的时间曲线说明了一个线性动画，例如一个球在一秒时间内从比例0到比例1的线性动画。

这个球的比例随着时间以固定的速度持续增长，因为这个动画有一个线性的时间曲线。为什么要称一个直线为曲线呢？因为你很少让动画处于线性的时间下，大多数的动画时间图看起来都是曲线。下面的四个图形表示了一些典型的动画时间。

垂直轴表示你动画的属性值，例如元素的比例或位置（如上面的图形所讨论的）。垂直轴的底部表示属性的开始值，也就是为0的Y坐标，垂直轴的顶部是属性的结束值，也就是为100的Y坐标。水平轴表示你的动画从开始到结束的时间，整个轴长表示动画的周期。线准确地指示了在特定的时间点属性值会变成什么样。

曲线的动画时间看起来是什么样的？例如一个小球，以1秒的周期动画，但这次，我们要将其放在一个缓入缓出动画的球的旁边，看看有什么不同。

缓入缓出动画的小球的时间曲线大致如下。

一个缓入缓出的曲线在很多地方都和线性时间曲线不同。首先，它确实是一个曲线，所以在0.25秒的时候比例不是0.25，值改变的速率不是恒定的。然后，最容易注意到的，它产生了一种不同的动画动作，即慢慢地开始动作（好像落后了一点）并且慢慢地结束（就好像接近最终比例的时候缓慢地变成最终值）。

线性动画曲线意味着你的属性值随着时间的流动以恒定的步伐改变，而各种迟缓的图形表示属性值会缓慢地开始改变，或者缓慢地结束改变，或者两者都有。

现在来添加第三个球的动画。这第三个球，会在开始的时候动作的很快，然后归于正常，不断变慢最终停止在最终值。这是一个淡出动作的例子。

下面是淡出动作的时间曲线。

一个视觉化这种曲线的方式是想象餐厅里的服务员给你拿来了你的食物。他们不会快速地突然将盘子放在你的面前，他们会慢慢地最终把盘子停放在桌子上。

最后一种更加常见的时间曲线是淡入动作，这意味着非常缓慢地开始动画，然后快速地结束。

下面大致就是这种动画曲线的样子。

观察淡入动画曲线，你可以看到在0.5秒的时候（动画时间的一半）比例值仅仅才到最终值的1/4。这创建了一种动画开始得非常缓慢迟钝，然后在最后的时间里迅速地跑到最终值的感觉。

线性，淡入淡出，淡出，淡入动画曲线是四种大部分界面系统默认提供的内置的时间选项，比如说，在CSS3动画中就默认提供这些时间曲线。在iOS的动画框架——Core Animation中也是默认提供的。

类似Core Animation和CSS3中提供的缓慢曲线在数学上由Bezier曲线定义，就如你在Sketch、Illustrator或者其他矢量绘图工具中绘制的一样。要定义在缓慢动画中使用的Bezier曲线类型，你需要选择曲线端点的位置。Core Animation和CSS3执行缓慢动画使用的特定曲线类型是一种三维的Bezier曲线，意味着有四个控制点来定义。

移动控制点是如何影响曲线形状的。

下一节我们会开始学习漂亮动画背后的真实魔法，它创建了自然感觉的动作。