选择合适的加/减速选项

为项目选择合适的缓动,无论是缓入、缓出,还是缓入缓出。甚至还可以利用弹跳获得更多乐趣!

Paul Lewis

前面已经讨论了可在动画中实现缓动的各种选项,您应当在项目中使用哪种?您的动画应采用哪种持续时间?

摘要

  • 为界面元素使用缓出动画;Quintic 的缓出十分不错,不过又快又轻松。
  • 请务必使用动画时长;缓出和缓入应为 200 毫秒 - 500 毫秒,而弹跳和弹性缓动的持续时间应为 800 毫秒 - 1200 毫秒。
Quintic 缓出动画的曲线。

一般来说,缓出是正确选择,当然也是很好的默认选择。它开头较快,给动画带来反应快的感觉,这很可取,但结尾会有一个很好的减速。

除了在 CSS 中使用 ease-out 关键字指定的公式之外,还有一组知名的缓出公式,它们按其“激进性”排列。如需快速缓出效果,请考虑使用 Quintic 缓出

查看 Quintic 缓出动画

其他缓动公式(尤其是弹跳或弹性缓动)应谨慎使用,且仅在适合您的项目时使用。很少有东西会像不协调的动画那样让用户退出体验。如果您的项目不是为了搞笑,那么就不要使用在界面周围弹跳的元素。相反,如果您要创建一个轻松愉快的网站,则一定要使用弹跳!

试试各种缓动,看看哪些缓动与您的项目个性相符,然后以此为起点。有关加/减速类型的完整列表和演示,请参阅 easings.net

选择合适的动画时长

添加到项目中的所有动画都必须具有正确的时长。太短,动画让人感觉有攻击性和锐利度;过于冗长,让人厌烦,而且会给用户带来困扰。

  • 缓出:约 200 毫秒 - 500 毫秒。这让眼睛有机会看到动画,但不会有遮挡。
  • 缓入:约 200 毫秒 - 500 毫秒。请记住,它在结束时会抖动,任何时间变化都无法减轻这种影响。
  • 弹跳或弹性效果:约 800 毫秒 - 1200 毫秒。您需要留出时间让弹性或弹跳效果“停下”。如果没有这一额外时间,动画的弹性弹跳部分会比较有攻击性,让人感到不舒服。

当然,这些只是指南。尝试不同的缓动,选择适合自己项目的缓动。