zoukankan      html  css  js  c++  java
  • 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(持续时间)。

  • 相关阅读:
    Click和Command事件的区别是什么
    后台取不到repeater里的checkbox选中状态 和 checkbox 值
    asp.net 控件生命周期 内的执行步骤
    采购流程
    matlab练习程序(图像放大/缩小,双立方插值)
    matlab练习程序(获取鼠标坐标)
    matlab练习程序(区域填充算法,队列版)
    matlab练习程序(二值图像连通区域标记法,两步法)
    matlab练习程序(寻找凸包,Graham扫描法)
    matlab练习程序(图像旋转,双线性插值)
  • 原文地址:https://www.cnblogs.com/wangjixianyun/p/2859093.html
Copyright © 2011-2022 走看看