详细解析UI动效基本规则全面总结(2)

列表项（新闻列表、邮件列表等）所使用的动效，在实际运动的过程中，项和项之间应该有轻微的延迟，元素之间的延迟应该控制在20~25毫秒之间，如果持续时间再长，可能会给人一种迟滞的观感。

缓动
缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然，这是运动的基本原则之一。对于缓动，迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。
为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样。

匀速直线运动
不受任何物理力量的影响，匀速直线运动看起来是非常不自然的，尤其是对于人眼而言。
所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征，我将尝试阐述它们的含义，以及如何使用。坐标轴的 X轴是实现，而 Y轴则表示的唯一，换句话来说，如同我们在初中物理中所学到的，坐标轴上的线条描述的是速度和加速度的特征。
下面所示的直线，表示速度是均匀的，也就是匀速直线运动，物体在相同时间内运动的距离是不变的。

均匀的变化通常只会用在色彩的改变或者透明的改变上，一般来说，我们也可以让背景元素均匀运动，而前景元素保持不变，来呈现它的状态，就像上图一样。
缓动加速曲线
通过曲线我们可以看到，物体开始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意味着物体在加速运动。

当物体加速飞出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要再回来的话，则不行。

动画曲线有助于正确传达讯息，甚至表达情绪和感觉。在下面的案例当中，我们可以看每个元素的运动位移是完全一样的，所消耗的总时长也是一样的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。
当然，通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。