運動：
a). 連續(xù)不斷的走
for
定時器：setInterval();
b). 改變某一個屬性(left)
讓Div走一個

定時器的時間給30ms ?
a). 人的眼睛最容易接受
b). 時間給小一點，程序的性能開銷大

定時器的問題 ？
a). 不能設(shè)置太小的值
0 -> 其實不是0
b). 時間越小越不穩(wěn)定
c). 多標(biāo)簽打開瀏覽器，定時器在背景的標(biāo)簽里面執(zhí)行變慢了

運動：
多長時間 -> 已知
總時間：1000

起點，終點 -> 已知

總距離：終點-起點

多長時間走一次 30ms

總次數(shù)：總時間/30
1000/30
把一個數(shù)變成整數(shù) ？
a). parseInt();
b). Math.floor(); √ 用floor性能最優(yōu)
c). Math.ceil();
d). Math.round();

一次能走多少 ？
總距離/總次數(shù)

現(xiàn)在走到哪里了 ？：n*總距離/總次數(shù)
鏈?zhǔn)竭\動：
判斷第一次運動完成 ？
回調(diào)函數(shù)
move(oDiv,'width',400,1000,complete);

運動形式：
    勻速運動：'linear'
    var a = n/count;
        var cur = start[name] + dis[name] * a;
    加速運動：'ease-in'
    var a = n/count;
    var cur = start[name] + dis[name] * a*a*a;
    減速(緩沖)運動：'ease-out'
    var a = 1 - n/count;
    var cur = start[name]+dis[name]*(1-a*a*a);

運動框架(封裝的函數(shù))：
a). 通用性
b). 方便
最后封裝的運動框架：move(oDiv,json,options);

options:可選json{}
duration
easing
complete

代碼

// ojb : 物體 ，json ：要改變的屬性， duration 總時間 ，easing 運動形式 ，complete： 鏈?zhǔn)竭\動回調(diào)函數(shù)  
function getStyle(obj,name) {
    return (obj.currentStyle || getComputedStyle(obj,false))[name];
}

function move(obj,json,options) {
    options = options || {}
    options.duration = options.duration || 500;
    options.easing = options.easing || 'ease-out';
    
    clearInterval(obj.timer); // 定時器先關(guān)后開
     //總次數(shù)
    var count = Math.floor(options.duration/30);
    var start = {}; // 起點
    var dis = {}; // 總距離
    // 循環(huán)獲取起點位置 ，然后計算出總距離
    for (var name in json) {
        start[name] = parseFloat(getStyle(obj,name));
        // 總距離 = 終點 - 起點
        dis[name] = json[name] -start[name];
    };
    var n =0; //當(dāng)前已經(jīng)走了多少次了
    obj.timer = setInterval(function () {
        n++;
        //循環(huán)讓所有的屬性改變
        for (var name in json) {
            // 根據(jù)運動形式 計算每次走的距離
            switch(options.easing){
                case 'linear': //勻速
                    var a = n/count;
                    var cur = start[name] + dis[name]*a;
                
                    break;
                case 'ease-in': // 加速
                    var a = n/count;
                    var cur =start[name] + dis[name] *a*a*a;
                    break;
                case 'ease-out': // 緩沖
                    var a = 1- n/count;
                    var cur = start[name] + dis[name]*(1-a*a*a);
                    break;  
            }
            //設(shè)置樣式
            if ( name = 'opacity') {
                obj.style.opacity = cur;
                obj,style.filter = 'alpha(opacity:'+cur*100+')';
            } else {
                obj.style[name] = cur + 'px';   
            }   
        }   
            //判斷當(dāng)前走的次數(shù)跟總是是否相等，相等表示已經(jīng)走完了
            if (n == count) {
                clearInterval(obj.timer);
                //回調(diào)鏈?zhǔn)竭\動函數(shù)
                options.complete && options.complete();
            }
    },30);
}