javascript中的缓动效果实现程序_javascript技巧

常见的动画有四种类型，介绍一下：
　　linear：线性动画，即匀速
　　easeIn：速度从小到大，即淡入
　　easeOut ：速度从大到小，即淡出
　　easeInOut：开始时速度从小到大，结束时速度从大到小，即淡入淡出

其实说到缓动，就不得不提Robert Penner，他发明了N多缓动公式，举个例子

我还是解释一下吧：

　　设当前变化量为X，则
　　t / d = X / c，所以X = c * t / d，然后X + b就可以获得当前属性值

再看一个稍复杂的：

这个有淡入效果，也就是说动画开始时，值的变化量从小到大。
可以发现两者唯一的区别就是 t / d 和 (t /= d) * t，刚才说了t / d是一个>=0 && <=1的比值，暂取名为a，而(t /= d) * t就相当于Math.pow(a, 2)。

为什么要平方呢？

1. 首先a >= Math.pow(a, 2)是肯定的
2. 每次调用函数时，t / d 这个比值也是匀速变大的，比如第1次调用时是0.1(平方0.01)，第2次调用时是0.2(平方0.04)等，那第10次调用时，肯定是1没错吧，这时候 c * 1 + b，动画就到此结束了
3. 第2点证明了比值越小，值的变化量就越小，比值越大，值的变化量就越大，如果不用平方而是三次方，那淡入效果就更明显了。

样式、结构及公共函数如下：