javascript中的緩動效果實作程式_javascript技巧

常見的動畫有四種類型，介紹一下：
　　linear：線性動畫，即勻速
　　easeIn：速度從小到大，即淡入
　　ease ：速度從大到小，即淡入
　　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 >= Math.pow(a, 2)是肯定的
2. 每次調用函數時，t / d 這個比值也是勻速變大的，比如第1次呼叫時是0.1(平方0.01)，第2次呼叫時是0.2(平方0.04)等，那第10次呼叫時，一定是1沒錯吧，這時候c * 1 b，動畫就到此結束了
3. 第2點證明了比值越小，值的變化量就越小，比值越大，值的變化量就越大，如果不用平方而是三次方，那淡入效果就更明顯了。

樣式、結構及公用函數如下：

複製程式碼

複製程式碼


程式碼🎜>
 

   

   

首先，從最簡單的入手：設定開始位置及結束位置及步長，每次增加固定的值，直至終止條件 複製程式碼

代碼如下:


var timer = null;
  400, step = 5;
        var drag = $("drag");
        function run() {
Le      function run() {
Le     ft")))                 drag.style.left = iLeft step "px";
      clearInterval(timer);
            }
        }

       ;

上面這個方法是勻速，每次運動的距離是固定的，下面來看另外一種實現方式：

複製程式碼

程式碼如下:

 var timer = null;
        var begin = 0, end = 400;
     🎜>            if(( iLeft = parseInt(getStyle(drag,"left")))                 var step = Math.ce   drag.style.left = iLeft step "px ";
            }else{
                   }
        var timer = setInterval(run, 20);



上面這種方式是透過目前的位置距離目標的距離來計算此次位移的步長
在flash中有專門處理緩動的類tween，轉化為javascript的程式碼為：

複製程式碼

程式碼如下:

var Tween = {
 線性：函數(t,b,c,d){ return c*t/d b; },
 四元組：{
  easeIn: 函數(t,b,c,d){
   return c*(t/=d)*t b;
  },
  easeOut : 函數(t,b,c,d){
   return -c *(t/=d)*(t-2) b;
  },
  escapeInOut: 函數(t,b,c ,d ){
   if ((t/=d/2)    return -c/2 * ((--t)*(t-2) - 1) b;
  }
 },
 三次：{
  easyIn: function(t,b,c,d){
   return c*(t/=d)*t * t b;
  },
  escapeOut: function(t,b,c,d){
   return c*((t=t/d-1)*t*t 1) b;
},
  easyInOut: function(t,b,c,d){
   if ((t/=d/2)    return c/2*((t-=2)*t*t 2) b;
  }
 },
 誇脫：{
  easeIn：函數(t,b,c,d) {
   return c*(t/=d)*t*t*t b;
  },
  escapeOut: function(t,b,c,d){
   return -c * (( t =t/d-1)*t*t*t - 1) b;
  },
 easeInOut: function(t,b,c,d){
   if ((t/=d / 2)    return -c/2 * ((t-=2)*t*t*t - 2) b;
  }
 },
 五元組：{
 easeIn: function(t,b,c,d){
   return c*(t/=d)*t*t*t*t b;
  },
  escapeOut: function(t,b,c,d){
   return c*((t=t/d-1)*t*t*t*t 1) b;
},
  escapeInOut: 函數(t,b,c,d){
   if ((t/=d/2)    return c/2*((t-=2)*t*t*t*t 2) b;
  }
 },
 正弦：{
  escapeIn: function(t,b,c,d){
   return -c * Math.cos(t/d * (Math.PI/2)) c b;
  },
  escapeOut: function(t,b,c,d){
   return c * Math.sin(t/d * (Math.PI/2)) b;
  },
  escapeInOut: function(t,b,c,d){
   return -c/2 * (Math.cos(Math.PI*t/d) - 1) b;
  }
},
 東南：{
 easeIn: function(t,b,c,d){
   return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) b;
  },
  escapeOut: function(t,b,c,d){
   return (t= =d）？ >   if (t ==0) return b;
   if (t==d) return b c;
   if ((t/=d/2)    return c/2 * (-Math.pow(2, -10 * --t) 2) b;
  }
 },
循環：{
  escapeIn: function(t,b,c,d){
   return -c * (Math.sqrt(1 - (t/=d)*t) - 1) b;
},
  escapeOut: function(t,b,c,d){
   return c * Math.sqrt(1 - (t=t/d-1)*t) b;
  },
  easyInOut : 函數(t,b,c,d){
   if ((t/=d/2)    return c/2 * (Math.sqrt(1 - (t-=2)*t) 1) b;
  }
 },
 彈性: {
  ease : 函數(t,b,c,d,a,p){
   如果(t==0) 回傳b;  if ((t/=d)==1) 回傳b c;  if (!p) p =d*.3;
   if (!a || a    else var s = p/(2*Math .PI) * Math.asin (c/a);
   return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2* Math.PI)/p ) ) b;
  },
  easeOut: 函數(t,b,c,d,a,p){
   如果(t==0) 回傳b;  if ((t/=d)==1) 返回 b c;  if (!p) p=d*.3;
   if (!a || a    else var s = p/(2*Math.PI) * Math.asin (c/a);
   return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) c b);
  },
  escapeInOut: 函數(t,b,c,d,a,p){
   if (t ==0）返回b；  if ((t/=d/2)==2) 返回b c; if (!p) p=d*(.3*1.5);
   if (!a || a    else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t return a*Math.pow(2,-10*( t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 c b;
  }
 },
 回傳：{
escapeIn: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
/=d)*t*((s 1)* t - s) b;
  },
  escapeOut: function(t,b,c,d,s){
   if (s == undefined) s = 1.70158;
   return c*( (t=t/d-1)*t*((s 1)*t s) 1) b;
  },
  escapescape: 函數(tInOut ,b,c,d,s){
if (s == undefined) s = 1.70158;
   if ((t/=d/2)    return c/2*((t-=2)*t*(((s* =(1.525)) 1) *t s) 2) b;
  }
 },
 Bounce: {
  easeIn: function(t,b,c,d){
   return c - Tween.Bounce.easeOut(d-t, 0, c, d) b;
  },
  easeOut: function(t,b,c,d){
   if ((t/=d)     return c*(7.5625*t*t) b;
   } else if (t     return c*(7.5625*(t-=(1.5/2.75))*t .75) b;
      return c*(7.5625*(t-=(2.25/2.75))*t .9375) b;
   } else {
return,75. t-=(2.625/2.75))*t .984375) b;
   }
  },
  easeInOut: function(t,b,c,d){
  easeInOut: function(t,b,c,d){
  ease if (t    else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 c*.5 b;
  }
 }
}

其中每種緩動方式對應3種類型
easeIn：從0開始加速的緩動；
easeOut：減速到0的緩動；
easeInOut：前半段從0開始加速，後半段減速到0的緩動
參數說明：
t：當前時間
b：初始值
c：變化量
d：持續時間呼叫方式：

複製程式碼

程式碼如下:

 var timer = nullm


 var timer = nullm

        var drag = $("drag");
         .Circ .easeInOut(t,b,c,d)) "px";
            if(t      else{
                clearInterval(timer);
            }

        }var timer = setInterval(run, 20);