最近在写要兼容IE6的幻灯组件(感兴趣的点这里)。为了让幻灯的切换效果更舒服,就研究了下动画的缓动函数。
缓动函数指定动画效果在执行时的速度,使其看起来更加真实。
在平常的生活中,物体在运动的过程中,总是时而加速,时而减速。因此我们的大脑习惯了这种物体的这种自然的运动方式。所以在应用中加入这种自然的运动方式,会让用户觉得很舒服。
匀速运动
linear.png
慢速开始,然后变快,然后慢速结束
ease.png
先快后慢
ease-out.png
先慢后快
ease-in.png
以慢速开始和结束
ease-in-out.png
大部分情况下,都可以用easeOut。
不要过多的使用bounces和elastic效果,因为这两个效果往往使网站变得不和谐。在比较活泼的网站可以使用bounces效果。但也要适量。
ease,ease-in-out,ease-in,ease-out,linear