javaScript--animate函數

一、思路

　　1、獲取目標值

　　2、再獲取初始值

　　3、得到總距離

　　4、定義定時器的執行間隔

　　5、獲取時間

　　6、得到總次數  

　　7、總距離/總次數 = 步長  

　　8、使用setInterval不停地改變dom元素的每一個css值 讓元素不停地改變樣式 造成動畫的錯覺。

　　9、定義一個計數器 每改變一次樣式就累加一次 直到計數器大於等於總次數 此時說明執行完畢

　　10、強行拉到終點

　　11、停表

　　12、執行回調函數

二、代碼

/*
* animate 函數能夠實現動畫
* @dom  要運動的元素 
* @json  css樣式對象
* @time  時間  以毫秒值為單位
* callback 回調函數 
*/
function animate(dom, json, time, callback) {
    // 定義定時器的間隔
    var interval = 20;
    // 定義總次數
    var allCount = time / interval;
    // 獲取初始值
    // 因為不確定json中有多少條css樣式 所以不能寫具體的代碼條數
    // 使用對應的思想 所以 我們也定義一個json
    var nowJSON = {};
    // 使用for循環獲取初始值
    for(var i in json) {
        // 強制性的給nowJSON添加屬性 並賦值
        if(window.getComputedStyle) {
            nowJSON[i] = parseInt(getComputedStyle(dom)[i]);
        } else {
            nowJSON[i] = parseInt(dom.currentStyle[i]);
        }
    }
    // 定義步長json
    var stepJSON = {};
    for(var i in json) {
        stepJSON[i] = (json[i] - nowJSON[i]) / allCount;
    }
    // 定義計數器
    var count = 0;
    var timer = setInterval(function() {
        count++;
        // 改變dom元素的css樣式
        for(var i in json) {
            dom.style[i] = nowJSON[i] + stepJSON[i] * count + "px";
        }
        // 判斷是否執行完畢
        if(count >= allCount) {
            // 停表
            clearInterval(timer);
            // 拉終
            for(var i in json) {
                dom.style[i] = json[i] + "px";
            }
            // 回調函數執行
            callback && callback();
        }
    }, interval);
}