选择合适的动画缓动函数

0.092字数 382阅读 5627

最近在写要兼容IE6的幻灯组件(感兴趣的点这里)。为了让幻灯的切换效果更舒服,就研究了下动画的缓动函数。

缓动函数定义

缓动函数指定动画效果在执行时的速度,使其看起来更加真实。

为什么要使用缓动函数

在平常的生活中,物体在运动的过程中,总是时而加速,时而减速。因此我们的大脑习惯了这种物体的这种自然的运动方式。所以在应用中加入这种自然的运动方式,会让用户觉得很舒服。

常见的缓动函数

Linear

匀速运动


linear.png

Ease

慢速开始,然后变快,然后慢速结束


ease.png

Ease-out

先快后慢


ease-out.png

Ease-in

先慢后快


ease-in.png

Ease-in-out

以慢速开始和结束


ease-in-out.png

选择合适的

大部分情况下,都可以用easeOut。

不要过多的使用bounces和elastic效果,因为这两个效果往往使网站变得不和谐。在比较活泼的网站可以使用bounces效果。但也要适量。

缓动函数的持续时间参考

  • Ease-outs 或 Ease-ins: 200到500毫秒
  • Bounce 或 elastic effects:800到1200毫秒

CSS3支持的缓动函数(transition-timing-function)类型

ease,ease-in-out,ease-in,ease-out,linear

参考

工具

推荐阅读更多精彩内容