原生js實現jquery函數animate()動畫效果__資料結構

　　通過在公司一個月的實習，慢慢的對css跟html算是比較熟悉了，這幾天開始研究js，今天用js寫了一個jquery的animate函數，測試了下，效能還可以。個人覺得jquery並不是萬能的，因為是個架構，所以有些東西寫的比較死，就像animate函數一樣，可選的參數不多有時候可能並不能實現我們想要的效果。
　　
　　注釋的部分是用來測試用的，寫代碼的過程並不是十分順利，因為用js平時用的不是很細，都是大體知道方法，也用過，但等到真正要實現動畫函數的時候，細枝末節寫錯了就可能把人難住了。
函數裡面有幾個參數解釋一下，

obj,函數的對象

json,數值對，形式{attr：”value”, attr: “value”}，在這裡是指要動畫對象的運動屬性 interval,每執行一次改變的間隔，這裡改變的是對象是屬性值 sp,值變換的速度，使動畫具有緩衝效果，而不只是勻速不變（sp為1）的

fn,回呼函數，執行完動畫之後的行為

　　代碼比較簡單，只是有幾個細節需要注意，在這裡提醒一下： 對象的屬性不必直接聲明，所以函數的第一句clearInterval(obj.timer);並不會報錯。 必須為每一個對象分別添加一個定時器，否則互相會影響，一個定時器公用的結果是定時器的多個對象運動出現卡頓。 son資料格式瞭解一下，當遍曆對象的動畫屬性的時候，需要icur != json[arr]判斷是否每一個屬性已經達到目標值。flag的作用是防止當其中某個屬性第一個達到目標值後，clearInterval(obj.timer)清除了定時器，結果其他動畫屬性並沒有達到目標值。所以在每次遍曆的時候初始化flag值為true，只要遇到一個沒有達到目標屬性的對象，就將flag置為false，直至對象的所有屬性達到目標值，清除定時器。 speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);這一句的作用是將屬性值取整，因為屬性值除了opacity沒有小數。 最後調用的時候注意動畫的對象，在使用for迴圈的時候不能隨意使用arr[i]形式，尤其是嵌套迴圈的時候i的值已經變成了最大值。
js

function animate(obj, json, interval, sp, fn) {    clearInterval(obj.timer);    //var k = 0;    //var j = 0;    function getStyle(obj, arr) {        if(obj.currentStyle){            return obj.currentStyle[arr];    //針對ie        } else {            return document.defaultView.getComputedStyle(obj, null)[arr];         }    }    obj.timer = setInterval(function(){        //j ++;        var flag = true;        for(var arr in json) {            var icur = 0;            //k++;            if(arr == "opacity") {                icur = Math.round(parseFloat(getStyle(obj, arr))*100);            } else {                icur = parseInt(getStyle(obj, arr));            }            var speed = (json[arr] - icur) * sp;            speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);            if(icur != json[arr]){                flag = false;            }             if(arr == "opacity"){                obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";                obj.style.opacity = (icur + speed)/100;            }else {                obj.style[arr] = icur + speed + "px";            }            //console.log(j + "," + arr +":"+ flag);        }        if(flag){            clearInterval(obj.timer);            //console.log(j + ":" + flag);              //console.log("k = " + k);            //console.log("j = " + j);            //console.log("DONE");            if(fn){                fn();            }        }    },interval);}

調用方式：

<script>    var move = document.getElementById("move").getElementsByTagName("li");    for(var i = 0; i < move.length; i ++){        move[i].onmouseover = function(){            var _this = this;            animate(_this, {width: 500, height: 200},10, 0.01, function(){                animate(_this, {width: 300, height: 200},10, 0.01);            });        }    }</script>

更多精彩內容請訪問：前端部落格