选择合适的动画缓动函数

最近在写要兼容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

参考

• Choosing the Right Easing
• The Basics of Easing

工具

• 缓动函数速查表
• 贝塞尔曲线在线生成工具

作者：九彩拼盘
链接：https://www.jianshu.com/p/9b6824f7af51
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。