js中实现缓动效果

转自：http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html

js中实现缓动效果，前不久在公司的项目中，要用到js来做图片缓动切换的效果，虽然之前了解过一些关于js实现缓动的效果，但是实际要用的时候，还是感觉和想象中的不一样。
所以今天有空拿出时间来具体做下，体验一下。

js做缓动主要是用到Tween这个算法

关于Tween算法的原理分析
要说起Tween算法，就要谈到数学中的函数问题了。
问题：怎么求函数关于某个点对称后的函数?
例如：求函数 f(x) = x+(2/x) 关于点(1,2)的对称函数？
解：
//解 这个字真是好熟悉啊，有木有感觉，之前不知道写了多少遍了。
设要求的函数为 g(x)，它上的一点为 (x,y)
它关于点 (1,2) 的对称点为 (x0,y0)
通过中点坐标公式得到它们的关系如下：
x+x0=2*1 --> x0=2-x
y+y0=2*2 --> y0=4-y
也就是说：x+x0=(y+y0)/2
而点(x0,y0) 在函数 f(x) 上，所以有如下关系：
y0 = x0+(2/x0)

未完，待续，在下先去睡下，哈哈，……

这样将 y0, x0分别代换为 x,y 便能得出 x,y 的关系：
4-y = 2-x+(2/(2-x)) --> y = 2+x-2/(2-x)
即：f(x) = x+2/x 关于点 (1,2) 的对称函数为 g(x) = 2+x-2/(2-x)

那么再进一步
问题：求已知函数关于一条直线的对称函数的解析式
如：Y = X^2+1 关于 Y=X 的对称函数的解析式？
解：设点a(x,y) 在函数 Y = X^2+1 上
则点a(x,y) 关于 Y=X 的对称点b(x',y') 在函数Y=X^2+1的对称函数上
a b 的中点 c 在Y=X 上
而c的坐标为 [(x+x')/2, (y+y')/2], 由c在Y=X上，得出
(y+y')/2 = (x+x')/2 (1)
设直线 ab 的斜率为 Kab ，那么，因为 直线ab与 Y=X 垂直, Y=X的斜率为1
则有 Kab*1=-1，而 Kab = (y-y')/(x-x')，即：
(y-y')/(x-x') = -1 (2)

由 (1) (2) 得：
x'=y
y'=x
设 a(x,y) 在函数Y=X^2+1上，将 x'=y ,y'=x 代入方程
Y=X^2+1 得：x'=y'^2+1
这就是要求的函数的解析式

下面再看一个例子：
var Tween = { 
    Quad: { 
        easeOut: function(t,b,c,d){ 
            return -c *(t/=d)*(t-2) + b; 
        } 
    } 
} 

var b=50,c=300,d=100,t=0; 
function Run(){ 
    div.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px"; 
    if(t<d){ t++; setTimeout(Run, 10); } 
} 
Run();
其中：
t: current time（当前时间）；
b: beginning value（初始值）；
c: change in value（变化量）；
d: duration（持续时间）。