SECTION 1

在2013年六月，苹果推出了iOS 7，并与iOS 6大相径庭，让设计师回归本初。曾经代表漂亮iOS设计的现实主义拟物化离去了，而一个更加平面、光滑，更加“计算机真实”的美学到来了。这种向平面设计专项的一个重大影响就是在Photoshop（或者任何可选的设计工具）中进行一个设计变得更简单、花费更少的时间、并且不再有差异。创建一个有着漂亮现实渐变色、阴影和高亮的app界面是一件很艰苦的事情。而创建一个根本没有渐变色和阴影并且主要由大块相同颜色组成的app界面明显更简单。

平面设计让app更难从其他app中在视觉上脱颖而出。

现在，在这个iOS 7的世界，很多iOS app分享了类似的视觉设计美学。类似的颜色，类似的字体，类似的空白。iOS 7app设计中渐变色、阴影和其他视觉装饰的缺失降低了竞争（可以这么说！），并且现在设计师和开发者意识到不得不与他们的竞争对手通过使用动作和动画来区分创意。

这意味着什么？在iOS 7之前app中也有动画，有什么改变吗？改变的是如今提升app用户体验的动作设计的重要性和意义。曾经被认为后续再添加的东西（在你设计全拟物化和渲染3D界面之后）现在是你的客户体验你的app的焦点和关键方面。动画不再是最后的附属品，他们现在在整个设计过程中被设计和思考。

所以你现在准备好添加一些可爱的动画到你的app中了，那么从何处开始呢？在哪里并且如何添加动画呢？什么类型的动画是引人注目且自然的，什么动画是无聊且平凡的呢？

让我们开始吧！

流动的现实动画的起源

在1981年，迪士尼长期动画师Ollie Johnston 和 Frank Thomas（迪士尼九大元老的成员——1920年代和1930年代迪士尼的原始动画团队）写了一本名为《Disney Animation: The Illusion of Life》的书，概括了他们在迪士尼早期卡通工作中倡导人物动画的基本原则。

这12个基本动画原则在《Disney Animation: The Illusion of Life》一书中被详细的描述，并且这本书现在被工作于此领域的艺术家和动画师广泛地认为是“动画界的圣经”。即使这些原则是将近80年前的手绘卡通动画师所提出的，它们至今依然使用。

重印版颠倒了标题，将“The Illusion of Life”印在了前面

这些基本的原则是：挤压和拉伸(Squash and stretch)、预备动作 (Anticipation)、演出布局 (Staging)、连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose)、跟随和重叠动作 (Follow Through and Overlapping Action)、缓入缓出 (Slow In and Slow Out)、弧线运动 (Arc)、次要动作 (Secondary Action)、时间节奏 (Timing)、夸张手法 (Exaggeration)、扎实的描绘 (Solid drawing)、吸引力 (Appeal)。

设计师Cento Lodigiani创建了一个很棒的video来演示这12个原则，用于一个有魅力的弹性立方体的简单对象。他也将这些例子转换成了一系列的GIF动图。

这些原始的动画原则创建了1920年代到1930年代精心制作的动画的框架。Ollie Johnston 和 Frank Thomas是新的卡通动画时代的先锋，所以我们如何运用这些基本的动画原则来设计现代软件交互呢？在进入这些细节之前，让我们先来谈谈为什么动画应该被用到你的产品中以及一般该如何考虑动画。

过渡，焦点和乐趣

当SDK第一次发布时我就开始思考设计和构建iOS app的动画。经过这次思考和所有这些app，我意识到有三个我要为一个iOS app（或者任何数字产品）想象、设计和构建一个动画的关键原因：

1. 过渡：在两个视觉状态之间突出一个平滑的运动，让用户适应新界面而不是被推进去。像这样的平滑过渡可以减轻对于不熟悉的界面的精神负担。

2. 焦点：引导用户关注界面上的一个重要的或者最近更新的特殊部分，尤其是那些需要用户立即操作的元素。

3. 乐趣：通过使用奇思妙想或意料之外的动作让一个平凡的交互更加吸引人且有趣。

让我们看一些动画的例子并仔细剖析它们存在的原因以及它们使用这三类动画的目的。

iOS 7日历app的动画

苹果给iOS的日历app为iOS 7彻底重新构想了一遍。查看一年和单个月份之间的动画是一个很好的过渡的例子，在两个视觉状态直接引导用户。因为过渡不只是一个简单的导航栏控制器push，而是动画地放大一个更深细节的层次，用户能明确地感知到他们正在深入这个数据。

iOS 7.1 通话界面和关机动画

从iOS 7.1开始通过界面动画变得彻底精致了，并且现在比以前有了更加一致的设计。当接电话时，绿色的接通按钮会旋转并过渡成红色的，这样就可以变成挂断按钮。一个相似的过渡也发生在你点击绿色的拨通按钮发起一次通话的时候。带锁的关机滑动条现在变得更加易懂，并且整个屏幕（除了你在滑动的关机按钮）都会淡出来暗示如果你继续滑动它的话界面接下来将会进入什么状态——一部关机了的手机。

上面显示的界面使用了一个内置的效果来从空白状态过渡到信息填充的屏幕。通过每个元素单独的动画，它迫使用户在其动画出现在屏幕上时一次只关注一个元素。内置的一步一步类型的动画让设计师可以调整用户使用过程中每一秒的的视觉焦点。这也比简单没有任何动画地显示这个界面或者一次对整个界面进行动画要更加有视觉吸引力。这种类型动画不好的一个方面是它展示界面和信息给用户花费了太多时间。这会引起反感，特别是当它一次次地发生的时候。动画时间和迟缓感知会在之后进行讨论。

这是一个很好的关于动画如何让用户适应并帮助他们理解app背后更大的逻辑模型的例子。当动画渐出主界面以及动画渐入地图时保持图标不动让地图图标看起来像两个面板之间的视觉支点。当用户点击地图图标时，地图会承接上一页，之前的界面收缩到背后但依然可见。用户不会觉得他们在移动时迷失在应用之中并且能够理解主要特性是如何工作的。

Facebook Paper中所有的过渡和新展现的信息都使用了很多2D和3D动画效果。在第一个面板中，当点击地球图标时，Notifacations表单会从图标下方滑出，给用户一种它总是折起在地球图标下方，等待被显示的印象。还有，通过图标，它加强了一种特定的心理模型给用户，暗示这个额外的界面总是可以通过地球图标获取，无论他们在应用的那个地方。

在第三个面板中，当你从底部滚动视图中滑出一块占据整个屏幕的内容时，它会滑到当前内容的顶部来提醒用户他们可以通过一次简单的点击回到他们之前的地方。当整个界面淡出并且文章详细视图淡入时，用户可能忘记他们之前在app中的位置，所以Paper的多种过渡总是用来在用户的脑中定位导航流。

Paper使用了非常棒的动画框架Pop，Facebook将其发布为开源工程供所有开发者来使用。我们之后会深入研究Pop。

在这个概念下Apple手环的动画，你可以看到每个界面之间的过渡都是流动性的，并且物体在内物体出现在界面上之前移出。每个物体移动得好像被之前运动中的物体拖出了屏幕。因为显示区域太小了，并且在水平方向上，使用动作来建立用户对app的心理模型非常重要。这里你可以看到音乐控件在时钟的左边并且在其下方是更改歌曲的功能区。在时钟的右边是一系列的app。所以即使在屏幕的左边没有任何导航线索（比如返回按钮），过渡动画也给了你关于产品及其界面的整体信息结构的感觉。

就像之前手环的例子一样，这是另一个在视觉上解释应用数据层级的整体架构的动画。这个动画从一个简单的中心对齐文本菜单开始，当点击My Files的时候，文件夹图标会扩展开来显示那些文件。用户会得到一种菜单就在文件列表背后的感觉，并且觉得他们可以在任何时候点击右下角的菜单按钮回到列表。当点击菜单按钮时，收缩整个文件列表进入之前的文件夹图标然后再次显示菜单。

这是另一个Jakub Autalik设计的非常有趣的动画，之前的里程计东湖也是他创建的。每个界面都使用了多种内置的效果来错开每个视觉元素的显示。歌曲列表动画进入的方式比起简单地使用iOS导航栏push的动画进入来说是一种非常好看的方式。这个动画的关键不同点在于屏幕不是一次性移动的，界面上每一个独立的元素都在移动。为了达到这种效果，每个元素的开始时间都需要与之前的元素又一些错开，好像它们都被拖进来一样。这种类型的拖动效果会在之后作为编码示例来展示。

这个下拉刷新的骷髅头动画是一个很好的介绍一些古怪而有趣的，容易被忽视并且构建非常简单（而且廉价！）不需要任何复杂动画的界面元素的例子。在下拉手势中发生了一系列事情，首先，组成骷髅头图片的元素会旋转，让它像是在向下旋转一样。然后，有两个默认状态下界面上不可见的动画人物在下拉的时候出现。最后，这些动画人物不是简单的在用户下拉的时候出现，它们的一部分也会在手势过程中旋转和移动。这是一个包含多个不同元素的非常复杂的动画，但是你可以想象用户可能会一次次地下拉界面，因为它实在是太有趣了。这是让他们记住这个app的地方，而在用户的主屏幕上凸现出来是非常重要的。

如果你在寻找其他人创建的非常棒的app动画例子，我高度推荐你浏览CAPPTIVATE.co和Dribbble里的动画标签。

寻找动画并讨论它们为什么棒是很好的事，但是这不会让我们接近并充分分解它们做了什么从而自己创建惊艳的动画。让我们继续本指南的下一节来学习动画的结构和性能。