动效持续时长分享

大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间，这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来，而超过1秒的动效会让人有迟滞感。

移动端设备的屏幕尺寸影响动画的持续时长

在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间。在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。

原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。

更大的屏幕=更慢的动效？绝不是如此！

网页动效的处理方式也不一样，由于我们习惯在浏览器中直接打开网页，考虑到浏览器性能和大家的使用习惯，用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度，网页中的速度会快上一倍，换句话说，就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长，用户会忍不住觉得网页卡住了。

不过，如果你的网页中所用的动效并非功能性的，而是装饰用的，或者用来吸引用户的注意力，那么请忘记这个规则，在这种情况下，动效可以更长。

动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化，相应的动效应该更快一点。因此，大而复杂的元素动效持续时间更长，看起来也更舒服一点。

动效的持续时长还和元素大小、运动距离有关

大小相同的元素，在移动的时候，移动距离最短的元素，是最先停止下来的。

与较大的元素相比，较小的元素运动速度应该更慢，因为相同的移动距离，对于小元素而言，位移距离和自身大小比例倍数更大，相对偏移更远。

列表项之间的延迟应该在20~25毫秒

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