动效设计标准与规范

6.缓入缓出动画-用在界面中对象从一个位置移动到另一个位置时。在这种情况下，动画的目的是为了不让人有过多不必要的关注。

卡片的非对称曲线运动

同样的情况还适用于，元素在界面中消失后用户还能随时显示，抽屉导航就是这样的例子。

抽屉导航收起过程应用了标准曲线，

动画在界面中的编排

同级动画

同级动画意味着所有对象的外观都服从一个特定的规则。

在这种情况下，所有卡片都按一个相同的流程出现，引导用户注意力在一个方向上，即从上到下。如果我们不按照这个顺序，用户的注意力就会分散，如果所有元素同时出现也会很糟糕。

用户的注意力应被引导在一个方向上

至于表格视图，就会略微有些复杂。这种情况下，用户往往是以对角线为焦点去看界面的，所以逐个出现的形式也比较糟糕。另外，逐个出现的动画在时间上也会过长，而且把用户的注意力引导成锯齿状，这是很不友好的。

按对角线出现的表格视图动画

从属动画

从属动画是指有一个核心运动的元素，它吸引用户所有的注意力，其他元素也都跟随它的运动。这种类型的动画会显得更有秩序感，让用户更多的去关注到内容本身。

而在其他情况下，用户是很难知道他到底要去看哪个元素，注意力很容易被分散。如果要设置多个动画元素，一定要清楚的知道他的动画顺序，并尽可能的将其他动画元素弱化。

物体的运动如果不成比例，那应该按弧线变化

当对象按比例改变其大小时，则此时直线运动的形式会更好。由于这种运动形式做起来容易得多，弧线轨迹运动的规律就往往被忽视。在现在很多应用中，我们都能找到这种例子。等比的物体运动轨迹应该使用直线

曲线轨迹运动也会有两种实现方式:第一种是开始水平移动，然后以垂直运动结束;第二种是开始垂直移动，然后以水平运动结束。

物体沿曲线移动的路径必须与滚动界面的方向重合。例如，在下面的例子中，我们可以上下滚动界面，相应地，卡片以垂直的方式展开更合适——先向右，然后向下。

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

如果物体的运动路径彼此相交，它们就应该不能穿过对方。物体应该通过减慢或加速自身的速度为另一个物体的运动留下足够的空间。另一种方式——只是推开其他物体。为什么要这么做？因为我们假设界面中的所有对象都位于一个平面上。（译者注：对于这一点我不是很认同，为了更加真实么？）

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

在另一种情况下，移动的物体可以通过抬高于其他物体，而不会以溶解或通过其他物体的形式来移动。为什么?因为我们相信界面上元素的行为应该要符合物理定律，在现实世界中没有任何实体能够做到直接穿透对方。

动画的速度和持续时间-界面中最优的时间是200ms-500ms

当界面元素改变他们的位置时，动画的持续时间应该以用户能注意到缺又不用等待为标准。

界面中最优的时间是200ms-500ms。这个数字是根据人类大脑的认知水平得出来的。任何小于100ms的动画是人类很难感知到的，而其他大于1秒的动画又会让用户觉得有些延迟，不够流畅。

动画持续的时间是使界面流畅的关键

谷歌规范设计建议：在手机上，建议动画的持续时间为200ms-300ms为宜。

                               在平板电脑上，这个时间会稍微长30%，大约在400-450ms。因为在更大的屏幕上，元素变化的位置路径会更长，需要的时间也就更长。

                              在在可穿戴设备中，持续时间又要缩短30%了，大约在150-200ms，因为小屏幕上元素变化的位置路径会更短。

动画持续的时间是使界面流畅的关键

                         在网页上的动画在150-200ms,应该要比在手机上持续时间少2倍多.由于我们习惯于在浏览器中快速打开网页，所以我们也希望在不同的状态之间能够快速切换。所以，在网页上的动画应该要比在手机上持续时间少2倍多，在150-200ms之间。一旦超过这个时间区间，用户就会觉得网页是不流畅的，或者觉得是不是网络有了问题。

但是，如果你是在页面中创建一些装饰性的动画或者目的是为了吸引用户的注意力，此时就应该抛弃这些规范，时间你可以做的更长一些。

网页中的动画时间要快些，避免用户感觉卡顿

无论在什么平台，动画的持续时间不仅跟它的一定距离有关，还跟它本身大小有关（胖子跑起来总是比较费力的嘛）。小的元素或者变化不大的元素应该移动起来更快，而大的元素或者复杂的元素持续时间稍长一些看起来会更好。

动画的持续时间取决于移动的距离和物体的大小

2.物体碰撞和运动轨迹-物体碰撞最好避免回弹效果，运动轨迹应该清晰锐利

当对象发生碰撞时，根据物理原则，碰撞的能量必须在碰撞对象之间平均分布。而如果在界面中只能看到碰撞体的一部分回弹，往往会显得不够自然。因此，最好避免回弹效果，只在一些特殊情况下才用到它。

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

物体的运动轨迹应该是清晰锐利的，所以尽量不要使用动态模糊（在AE中做动画效果除外）。即使是在现在最新的设备上也很难重现这些效果，不能把这种动态模糊的动画效果应用到界面中。

动画中尽量不要使用动态模糊

3.列表项延迟时间不宜过长-每一个新列表项的出现间隔应该在20-25ms之间

列表项的出现应该只允许有一个短暂的延迟。每一个新列表项的出现间隔应该在20-25ms之间。元素出现太慢的话，会让用户感到很不爽。

每一个新列表项的出现间隔应该在20-25ms之间。

3.缓动-缓动可以让物体运动的更加自然。这是动画的基本原理之一

为了让动画看起来不会觉得太过机械，物体的运动应该会同时伴有一些加速度，就像现实世界中的运动一样，不会有绝对匀速的运动形式。

缓动的物体会比较线性运动的物体看起来更加自然

4.线性运动（匀速运动）-对象仅改变它的颜色和透明度的时候会用到

坐标轴X轴是时间，Y轴是位置。

5.缓入运动（加速运动）-应用于对象移出界面时，这些可能是系统通知，也可能只是界面中的卡片设计

加速运动曲线-应用于物体被移出界面时

       动画曲线有助于表达正确的情绪。在下面的例子中，物体动画的持续时间和位移大小都是相同的，但你会发现即使是曲线上一些微小的变化也会让你看动画的感受不同。

当然，通过改变曲线，可以让物体的运动显得更加真实自然。

相同的持续时间和相同的位移变化，不同的加速度，但是会有不同的感受