Javascript實現緩動效果

一、何為緩動效果

緩動效果在任何軟體上都是常用的，尤其是在web開發裡。

所謂緩動效果，即是說元素的運動不是勻速的，而是由快到慢或者由慢到快這樣變化的。緩動效果可以使得頁面看起來更豪華，提高網頁的品質。

 

二、原理

我的這種緩動效果的實現方法來源於大家都非常熟悉的Flash。在建立動畫補間的時候，下面會有緩動的選項：

 

改變右邊緩動的數值可以實現緩動效果，數值為正的時候就先快後慢，數值為負則先慢後快。點擊右邊的編輯就會看到一條關於緩動程度的一條曲線。

緩動數值為零時，緩動曲線為一條直線，這種情況下的運動為勻速運動：

 

緩動數值為正（100）時，緩動曲線如下，這種情況下的運動為先快後慢：

 

緩動數值為負（-100）時，緩動曲線如下，這種情況下的運動為先慢後快：

 

通過這三幅圖，就可以得出緩動效果的原理了。注意：每張圖的橫座標是這個動作的幀數，縱座標是補間完成的百分比。說通俗一點就是：橫座標是時間，縱座標是位移。那麼這條線所表示的不正是這個對象移動的速度嗎？這也恰好印證了緩動值不同的三種情況的運動狀態。

 

三、Javascript實現

通過觀察，我認為可以用拋物線的函數曲線來表達緩動曲線。

同樣的，在js移動html對象的時候，也可以讓對象的速度來遵循這個曲線。

為了將這個邏輯通用，寫了如下方法，通過eval和各種參數，來給對象具體的數值賦值，這可以是位移的像素，也可以是透明度。

 

//sProperty:所需設定的屬性
//nStart:屬性值的起始值
//nEnd:屬性值的結束值
//nInterval:總的運動時間
//nStep:步進時間
//fnCallback:緩動完成的回呼函數
function BufferMove(sProperty,nStart,nEnd,nInterval,nStep,fnCallback){
    oFlag.isMoving = true;
    //rank表示拋物線的階數 階數越大 緩動越明顯 一般設定為2或3
    var rank = 3;
    // 根據傳入的參數 計算y^2=ax中的a 以確定曲線的方程
    var arg =((nEnd-nStart)/Math.abs(nEnd-nStart)) * Math.pow(Math.abs(nEnd - nStart),rank) / nInterval;
    var curStep = 0;
    var SetValue = function(){
        if(curStep + nStep >= nInterval){
            clearInterval(interval);
            eval(sProperty + "=" + nEnd);

            oFlag.isMoving = false;

            if(fnCallback)

                 fnCallback();

        }else{
            curStep += nStep;
            eval(sProperty + "=" + ((arg/Math.abs(arg)) * Math.pow((Math.abs(arg) *curStep),1/parseFloat(rank.toString())) + nStart));
        }
    }
    var interval = setInterval(SetValue,nStep);
}