现在界面动画已经很难给人留下深刻印象甚至很难给人带来惊喜了。它展示屏幕之间的交互，解释如何使用应用程序，或简单地引起用户的注意。在浏览关于动画的文章时，我发现几乎所有文章描述的都只是一些关于动画的特定用例或一般事实，但我并没有遇到过任何一篇关于涉及界面动画的所有规则能够被清晰而事实描述出来的文章。好了，在这篇文章我也不会写任何新的东西，我只是想把所有重要的原则和规律都网罗在一个地方，这样其他想要开始做动画界面的设计师也不用在去搜索其他额外的信息了。

动画的持续时间和速度

当元素改变了他们的状态或者位置的时候，动画的持续时间应该要足够慢，以便于让用户有可能注意到这些改变，但同时也要足够快，以免引起用户的等待。

在你的动画中使用合适的持续时间。不要让它太快也不要让用户有足够的时间打呵欠。

大量研究发现界面动画最理想的速度在200-500毫秒之间。这些数字是基于人类大脑的特殊性质得出的。任何短于100毫秒的动画都是瞬时的且完全不能被识别。而动画超过一秒的话会传达一种延迟的感觉，因此对于用户来说很无聊。

你最好在你的界面里拥有对应的动画持续时间

在移动设备上，MD规范还建议将动画持续时间限制在200-300毫秒之间。就平板电脑来说，持续时间应该加长30% - 大概在400-450毫秒之间。这个原因很简单：屏幕的尺寸更大所以当它们改变位置时需要对象克服更长的路径。在可穿戴设备上，持续时间应该相对应地缩短30% - 大概在150-200毫秒之间，因为在一个较小的屏幕上要经过的距离更短。

移动设备的尺寸影响动画的持续时间

网页动画是以不同的方式处理。因为我们已经习惯了在浏览器中几乎是瞬间打开网页，所以我们也希望在不同的状态之间也能快速切换。因此，网页转换的持续时间应该比移动设备短两倍 - 在150-200毫秒之间。在其他情况中，用户会不可避免的认为电脑当机或者是网络连接有问题。

但是，如果当你在你的网站上创造一个装饰性的动画或者正在尝试去引起用户对某些元素的注意，请忘记这些规则。在这些情况中，动画能够持续更长的时间。

大屏幕的电脑 = 缓慢的动画？

不存在的！

你需要记住的是，不管平台是什么，动画的持续时间应该不仅仅取决于移动的距离，还要取决于对象的尺寸。较小元素或者改动较小的动画都需要移动得快一些。相对应的，包含较大且复杂元素的动画持续稍长一点时间时看起来效果会好一些。

在正在运动的相同尺寸的物体中，首先停止的物体通过的距离最短。

小的物体相比较大的物体移动速度较慢，因为它们产生了较大的偏移量。

动画的持续时间的不同取决于物体的尺寸和移动的距离。

当物体碰撞时，碰撞所产生的能力必须根据物理规律均匀分布。所以，最好排除反弹效应。只有在特殊情况中具有特殊意义时才使用它。

避免使用反弹特效，因为它会分散注意力。

物体移动应该是清晰锐利的，所以不要使用动态模糊（是的，AE用户，这次不用）。即使是在现代移动设备上也很难复制这种效果而且根本没有在界面动画上被使用。

不要在你的动画里使用模糊效果

列表项（新闻卡片，邮件列表等）之间出现的间隔应该非常短。新元素的每次出现都应该持续20-25毫秒。元素出现太缓慢的话可能会惹恼用户。

列表项的动画应该持续20-25毫秒

缓动

缓动能有助于使物体移动移动得更加自然。这是动画的基本原则之一，在《生命的幻觉：迪士尼动画》一书中有详细的描述，这本书由两位迪士尼动画大师 - 奥莱·约翰顿和弗兰克·托马斯所写。

为了让动画看起来不机械或人工，物体应该以某种加速或者减速运动-就像是在物理世界中所有的活体一样。

缓动动画相比较线性动画而言看起来更自然

线性运动

不被任何物理压力影响的物体是线性运动的，换句话说就是匀速运动的。正因为这样，它们在人们的眼中看起来太做作太不真实。

所有动画应用程序都是用动画曲线。我将尝试去解释如何阅读它们以及它们的含义是什么。该曲线展示了对象的位置（Y轴）在同样时间间隔（X轴）内是如何改变的。在当前情况下，运动是线性的，所以物体在相同时间内移动的距离也是相同的。

线性动画的曲线

举一个例子，线性动画只可以在物体改变了自身的颜色或透明度时使用。一般来说，当一个物体并没有改变它的位置时，我们能够使用它来表示状态。

缓入或者加速曲线

我们能够在曲线上看到，物体位置在开始时发生变化缓慢，并且速度逐渐增加。这代表着物体正在加速运动。

加速曲线

这个曲线应该被用来当对象以全速飞出屏幕时的情况，比如系统提示或者只是界面中的卡片一类。但是请记住像是这类曲线应该只是被适用于当对象永远的离开屏幕，即我们再也不能撤回或返回它们

将卡片扔出屏幕的加速曲线

动画曲线有助于表达正确的情绪语义。在下面的例子中，我们能够看到物体运动的持续时间和距离都是一样的，但是在曲线中即便是细微的改变也可能影响动画所产生的情绪语义。

当然，通过改变曲线，你能够尽可能像真实世界一样的移动对象。

相同的持续时间和距离但是表达了不同的情绪语义。

缓出或者减速曲线

和缓入曲线相反，对象能快速移动很长的距离之后慢慢减速，直到它最终停止。

减速曲线

这种类型的曲线应该被用于当元素出现在屏幕上时的情况 - 它在屏幕上全速飞行，逐渐缓慢下来直到它完全停止。这也能够被应用在来自屏幕外部出现的不同卡片或者对象出现在屏幕上的情况。

一个很好的减速曲线的展示

缓入缓出

这个曲线使物体在一开始的时候就获得速度，然后速度慢慢减少直到归零。这种类型的运动是最常被应用在界面动画中的。每当你在疑惑要使用哪一种运动用在你的动画上时，那就用标准曲线吧。

标准曲线

这个曲线使物体在一开始的时候就获得速度，然后速度慢慢减少直到归零。这种类型的运动是最常被应用在界面动画中的。每当你在疑惑要使用哪一种运动用在你的动画上时，那就用标准曲线吧。

可以看到对称与非对称的标准曲线的不同。

当物体从屏幕的一端运动到另一端时，使用缓入缓出。在这种情况下，动画避免了太过引人注目。

卡片在屏幕上的运动和相对应的非对称曲线。

当元素从屏幕中消失时，应该使用相同的运动类型，但用户能够在任何时候将它还原到之前的状态。像是导航边栏等。

导航边栏以标准曲线从屏幕中隐藏。

从这些案例可以总结出许多初学者忽视的基本规则-开始动画并不等于结束动画。还是以导航边栏为例-它以减速曲线出现但以标准曲线隐藏。此外，根据Google MD，物体展示的时间应该更长些，以此来吸引更多注意。

侧边菜单的出现和隐藏分别用减速和标准曲线来实现。

立方贝塞尔函数（）（function cubic-bezier() ）被用来描述这种曲线。之所以称之为立方是因为它基于四个端点。第一个端点在坐标0；0（左下），最后一个端点在坐标1；1（右上）都已经在图表上被定义。

在此基础上，我们只需要描述图表上的两点，这两点由立方贝塞尔函数（）的四个参数给出：前两个点是x和y轴的第一个值，后两个点是x和y轴的第二个值。

为了简化你的工作，我建议设定曲线时使用两个网站：easing.net和cubic-bezier.com。第一个网站包含了一系列最常使用的曲线和参数，你能够直接复制到你的建模工具中。第二个资源可以让你尝试不同的曲线参数并且能直观地看到物体是如何运动的。

立方贝塞尔函数（）的不同类型的曲线及其参数

界面动画的编排

就像是芭蕾编舞一样，主要思想就是去引导用户的注意力流畅地从一个状态转变到另一个状态。

编排主要有两种类型-对等交互和从属交互。

对等交互

对等交互意味着所有物体的出现都服从于一个特定的规则。

在这种情况中，所有的卡片都可以被看作是将用户的注意力自上至下单向引导的过程。如果我们没有遵循这个规律，用户的注意力就会被分散。而如果所有元素全都一起出现，看起来也会非常糟糕。

用户的注意力应该被流畅地引导至同一个方向。

至于表格视图，这会更复杂一点。用户的焦点应该是对角线方向的，所以逐个展示元素不是一个好主意。每个元素被逐一展示会让动画过长，并且用户的注意力会呈Z字形，这是错误的。

按对角线展示的表格视图卡片

从属交互

从属交互意味着我们有一个吸引所有用户的中心对象，并且所有其他的元素都从属于它。这个动画类型给人秩序感，并且更注重主要内容。

在其他情况中，用户很难知道要去追随哪个对象，从而分散了注意力。因此，如果你有想做动画效果的若干元素，你需要去清楚的定义他们的运动序列并且尽可能减少同一时间出现对象的数量。

只做中心对象的动画并且所有其他的物体从属于它的这种做法是很可取的。

否则，用户将不知道该跟随哪一个对象。

根据DM，当移动的物体不成比例地改变大小时，它们应该沿圆弧移动而不是直线移动。这能够让运动更自然。“不成比例”的意思是指物体长和宽的增加/减少的改变是不对称进行的，即遵照不同的速度（例如，一个正方形卡片变成矩形）。

不成比例的改变其尺寸的对象的运动应沿弧线排列

当物体成比例地改变它的尺寸时，将使用沿直线运动。由于实现起来这种运动更容易，因此不对称的圆弧运动的规律经常被忽略。看看应用程序的实际案例，你将会看到线性移动占绝大多数。

尺寸的成比例变化时再一条直线上实现的。

曲线的运动能够通过两种方式实现：第一个叫做垂直移出（Vertical out）-对象以水平运动开始并且以垂直运动结束；第二个-水平移出（horizontal out）-对象以垂直运动开始并且以水平运动结束。

物体沿曲线运动的轨迹必须与界面滑动的主轴重合。例如，在下面的图片中我们能够上下滑动界面，因此，卡片以垂直移出的方式展开-首先向右，然后往下。反向运动的方式正好相反-卡片首先垂直升起，然后水平运动结束。 

打开/折叠卡片的方向应该与界面的轴重合

如果物体移动的路径彼此相交，他们不能交叠移动。这个物体应该通过减慢或增加自身速度来给另一个物体的运动留下足够的空间。另一个选择 - 他们只是推开其他的物体。为什么会那样呢？因为我们假设界面上所有对象都位于一个平面。

在运动时，物体不应该相互穿行通过，而是为另一个物体的运动留下空间。

在另一种情况下，移动的物体能够升到高于其他物体之上。但要再次强调的是，不能叠加或穿过其他物体。为什么呢？因为我们相信界面中元素的行为遵循物理规律，在真实世界中并且没有实体能够做到这样。

物体能够越过其他物体后再移动。

结论

所以，如果我们总结上面提到的所有的规律和原则，界面的动画应该反应的是我们从物理世界中所认知的运动规律-比如摩擦力，加速等等。根据模仿物体从真实世界中的行为，我们能够创造出一系列动效来辅助用户去了解从界面中期望得到什么。

如果动画被正确的创建，那么它看起来就十分不引人注目，并且不会让用户注意力从他们的目标上被分散。如果是这样的话，你要么就消减它，要么直接移除它。这代表着动画不应该减慢用户的速度或者是组织用户执行他们的操作。

但不要忘了动画较科学来说更是一种艺术。所以最好直接在用户身上去尝试和实验来验证你的观点。

欢迎关注我和妖怪的公众号：喵与她的朋友们（MZSWAGCOM）

公众号里面有这篇文章的原文和一些单词的解析，还有相对应的单词本，可以一边学习设计文章，一边学习英语哟～

直接扫码关注公众号吧～