今天做的是勻速情況下div的運動。首先開始之前先了解運動的原理

A------------>>B
A移動到B 這段距離是總距離 　　 用一個變量保存下來：var d
A移動到B 移動的總次數　　　　 用一個變量保存下來：var c
A移動到B 每次移動的距離　　　 用一個變量保存下來：var s

function move(obj,name,target,dur,fn){
    var timer;  //控制定時器
    var c=parseInt(dur/30);   //移動的總步數
    var start=parseFloat(getStyle(obj,name));
    
 
var d=target-start;   //移動的總距離
        var s=d/c;        //每次移動的距離
    var n=0;   //初始化步數
    timer=setInterval(function(){
        n++;
        var cur=statrt+n*s;
        obj.style[name]=cur+‘px‘;  
                //[]語法是使用參數的方法
                // .語法在這裏是不可以用的
        if(n==c){//移動結束的時候
            clearInterval(time);//
 
清除定時器
            fn && fn();//有方法的時候調用方法，
                     //沒有的時候什麽都不做。
        };
    },30);  // 定時器裏設定時間都是固定的  但是這些時間都是有誤差的
              //30ms是定時器中誤差最小的 ±3  並且運行起來感覺是最好的
}                     

調用封裝的方法

var oDiv=document.getElementById("div");
oDiv.onclick=function(){
    move(oDiv,‘left‘,500,300
 
)  //最後一個回調函數可以不傳
};

這次的只是勻速運動的。下次分享變速的 哈哈~

關於tween.js 封裝的方法