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(持续时间)。

原文地址:https://www.cnblogs.com/wangjixianyun/p/2859093.html