關於tween.js 封裝的方法

標籤：star   class   沒有   time   bsp   ++   tin   --   tween   

今天做的是勻速情況下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 封裝的方法