阅读全文大约需要时间15分钟 （思维导图 原文地址在最后）
文章里干货满，有助于想扎实页面动效基础，以及想了解动效如何更加贴切用户体验的同学
原文是由Taras Skytskyi撰写，他供职于Soft serve公司
以下是正文
现如今交互动效很难有让人印象深刻甚至是惊艳的感觉。这就是屏幕与App如何使用或者是如何直接引导用户注意力的相互作用的结果。在搜索动效文章的时候，我发现几乎所有的文章都在描述特别的案例或者是常见的动效常识，我重来都没有遇到过能把所有的关于交互动效规则清晰以及准确的描述出来的文章。
所以在接下来这篇文章中，我不会描述新的内容，我会把所有的主要原则和规则集合起来，这样设计师开始了解交互动画的时候，他就不需要看别的文章了。
动画持续的动作与时间
当元素改变它们的状态或位置时，动画的持续时间应该足够慢以使用户能够注意到变化，但同时又足够快不至于让用户等待
大量研究发现界面动画的最佳速度在200到500毫秒之间。这些数据是基于人脑的特殊性。任何短于100毫秒的动画都是瞬时的，根本不会被识别。而超过1秒的动画会传达延迟感，对用户来说是无聊的。
在移动设备上，Material Design设计指南 也建议将动画的持续时间限制在200-300毫秒。至于平板电脑，持续时间应该延长30％（大约400-450毫秒）原因很简单：屏幕尺寸较大，所以物体在改变位置时会克服较长的路径。在智能手表上，持续时间应相应缩短30％ （大约150-200毫秒）因为在较小的屏幕上，行程距离较短。
Web页面动画则有不同的方式处理。由于我们习惯于在浏览器中几乎立即打开网页，因此我们期望在不同的状态之间快速切换。因此，web页面过渡的持续时间应比移动设备的持续时间短约2倍，在150-200毫秒之间。否则，用户将不可避免地认为计算机冻结或与互联网连接有麻烦。
但是如果您在网站上创建了装饰性动画或试图吸引用户注意某些元素，请忘记这些规则。在这些情况下，动画可以更长。
你需要记住，无论平台是什么，动画的持续时间不仅取决于行进的距离，还取决于物体的大小。较小的元素或具有较小变化的动画，应该移动得更快。因此，具有大而复杂元素的动画在持续时间稍微长一点时看起来更好。
在相同大小的移动物体中，第一个停止的物体是通过最短距离的物体。
与大物体相比，小物体移动速较慢，由于它们产生较大的偏移。（Small objects in comparison with large objects are moving slower since they make bigger offsets.）
当物体碰撞时，碰撞能量必须根据物理定律在它们之间均匀分布。因此，最好排除反弹效果。仅在特殊情况下使用它才有意义。
物体的移动应该清晰锐利，所以不要使用运动模糊（是的，After Effects用户，这次不行）。即使在现代移动设备上也难以再现效果，并且它根本不用于界面动画中。
列表项（新闻卡片，电子邮件列表等）在其外观之间应该有非常短的延迟。每次出现的新元素应该持续20到25毫秒。元素的较慢出现可能会使用户烦恼。
缓动（Easing）
缓动有助于使物体的运动更自然。这是动画的基本原则之一，在《生命的幻觉：迪士尼动画》（The Illusion of Life: Disney Animation）一书中有详尽的描述，这本书是由两位迪士尼动画师奥利·约翰斯顿和弗兰克·托马斯撰写。（Ollie Johnston and Frank Thomas）
对于看起来不那么机械和人工的动画，对象应该以一些加速或减速的方式移动-就像物理世界中的所有活动对象一样。
直线运动 Linear motion
不受任何物理力影响的物体线性移动，也就是说，速度恒定。正因为这个事实，它们看起来非常不自然，对人眼来说就是人为的动作。
所有的动画都使用动画曲线。我将尝试解释如何阅读它们以及它们的含义。曲线显示对象的位置（y轴）在相同的时间间隔（x轴）内如何变化。在当前情况下，运动是线性的，因此物体在相同的时间行进相同的距离。
例如，直线运动只能在对象改变其颜色或透明度时使用。一般来说，当对象不改变其位置时，我们可以将线性运动用于其状态改变。
缓入或加速曲线 Ease-in or acceleration curve
我们可以在曲线上看到，在开始时，物体的位置变化缓慢，速度逐渐增加。这意味着物体以一定的加速度移动。
当物体以全速飞出屏幕时，应使用此曲线。这些可以是系统通知或只是界面的卡片。但请记住，只有当对象永远离开屏幕并且我们无法回忆或返回时，才应使用此类曲线。
动画曲线有助于表达正确的情绪。在下面的示例中，我们可以看到移动的持续时间和所有对象的距离是相同的，但即使曲线中的微小变化也可以影响动画的情绪。
当然，通过更改曲线，你可以将对象移动到尽可能类似于现实世界。
缓出或减速曲线 Ease-out or deceleration curve
它与缓入曲线相反，因此物体快速覆盖长距离然后慢慢降低速度直到它最终停止。
当元素出现在屏幕上时，应使用这种类型的曲线-它以全速飞向屏幕，逐渐减速直至完全停止。这也可以应用于从屏幕外部入场的不同卡片或对象
缓入缓出或标准曲线 Ease-in-out or standard curve
此曲线使对象在开始时获得速度，然后慢慢将其降回零。这种类型的移动是界面动画中最常用的。每当你犹豫动画中使用何种类型的动效时，请使用标准曲线。
根据Material Design设计指南，最好使用非对称曲线（asymmetric）使运动看起来更自然和逼真。曲线的末端必须比其开头更加强调 （be more emphasized），因此加速的持续时间短于减速的持续时间。在这种情况下，用户将更加关注元素的最终移动，从而关注其新状态。
当对象从屏幕的一个部分移动到另一个部分时，使用缓入缓出。在这种情况下，动画避免了引人注目和戏剧性的效果
当元素从屏幕上消失时，应使用相同的移动类型，但用户可以随时将其返回到之前的位置。它涉及导航抽屉等。
从这些例子中可以看出许多初学者忽视的基本规则-开始动画不等于结束动画。与导航抽屉的情况一样 - 它以缓出曲线出现，并随标准曲线消失。此外，根据谷歌Material Design设计指南，对象出现的时间应该更长，可以吸引更多的注意力。
贝塞尔曲线 （A function cubic-bezier）用于描述曲线。它被称为立方体（cubic），因为它基于四点。坐标为0; 0（左下）的第一个点和坐标为1; 1（右上）的点定义图形
基于此我们需要在图上仅描述两个点，它们由贝塞尔曲线 （A function cubic-bezier）的四个参数给出：前两个是第一个点的坐标x和y，后两个是坐标x和第二点的y。
为了简化曲线工作，我建议使用网站easings.net和cubic-bezier.com 第一个包含最常用曲线的列表，你可以将参数复制到原型工具中。第二个网站使你可以使用曲线的不同参数进行播放，并立即查看对象的移动方式。
界面动画中的编排
就像在芭蕾舞编排中一样，主要思想是在从一个状态到另一个状态的过渡时引导用户注意的流动方向。
有两种类型的编排-平等和从属的交互（equal and subordinate interaction）
平等交互 Equal interaction
平等交互意味着所有对象的外观都遵循一个特定的规则。
在这种情况下，所有卡片的出现被视为一个引导用户注意力的流程，即从顶部到下部。如果我们不遵守顺序，用户的注意力就会分散。所有元素的出现一下子看起来也会很糟糕。
至于表格视图，它有点复杂。在这里，用户的焦点应该是对角线，因此逐个显示元素是一个糟糕的主意。逐个显示每个元素会使动画过长，并且用户的注意力将呈锯齿状，这是错误的。
从属交互Subordinate interaction
从属交互意味着我们有一个中心对象吸引所有用户的注意力，而所有其他元素都从属于它。这种类型的动画给出了秩序感，并引起了对主要内容的更多关注。
在其他情况下，用户很难知道要跟随哪个对象，因此他的注意力将被分散。因此，如果你有多个想要设置动画的元素，则需要清楚地定义它们的运动顺序，并一次尽可能少地设置移动对象。
根据Material Design设计指南，当移动物体不成比例地改变它们的尺寸时，它们应该沿着弧线移动而不是沿直线移动。它有助于使运动更自然。“不成比例地”是指通过不对称的增加/减少来改变物体的高度和宽度，且用不同的速度（例如，正方形变成矩形）。
当对象按比例改变其大小时，使用沿直线的移动。由于这种运动曲线的使用起来更容易，因此不成比例的弧形运动规则经常被忽略。看看应用程序的真实示例，你将看到直线运动的合理运用。
运动曲线路径可以通过两种方式实现：
第一种为 垂直向外（Vertical out ）对象开始水平移动并以垂直移动结束;
第二种为 水平输出（Horizontal out ）物体开始垂直移动并以水平运动结束。
对象沿曲线移动的路径必须与滚动界面的主轴重合。例如，在下一个图像上，我们可以向上和向下滚动界面，因此卡片以垂直向外（Vertical out）的方式展开-首先向右，然后向下。反向运动以相反的方式完成 - 即卡片首先垂直上升并最终水平移动。
如果移动物体的路径彼此相交，则它们不能相互穿过。物体应通过减慢或加速自身速度为其他物体的运动留出足够的空间。另一种选择他们只是推开其他物体。为什么？因为我们假设界面中的所有对象都位于一个平面中。
在另一种情况下，移动物体可以高于其他物体。但同样没有穿过其他物体消失或移动。为什么？因为我们认为界面的元素符合物理定律，现实世界中没有固体物体能够穿过其他物体。
结论
如果我们总结所有上述规则和原则，界面中的动画应该反映我们从物理世界中熟知的运动摩擦，加速等。模仿现实世界中物体的行为我们可以创建一个链让用户了解从交互页面中期望得到的内容。
如果动画构建正确，那么它是不显眼的，也不会分散用户的目标。如果不是这样，你要么需要软化它，要么根本不需要它直接删除。这意味着动画不应该减慢用户的速度或阻止执行任务。
但不要忘记，动画更像是一门艺术，而不是科学，所以最好是对用户进行实验和测试。
译者一小段宇宙的总结
我看到这篇文章以后觉得非常值得阅读，所以就义无反顾的翻译了，UI页面动效真的是一个苦差事，我觉得的作者说的话很到位，它不是那么显眼，做ui的小伙伴就是在做没有功利心的毫厘之间的艺术呀
希望你们看了这篇文章以后有收获，最后奉上我总结的思维导图
附录
原文地址 若有翻译不当之处欢迎指正