關於tween.js 封裝的方法
阿新 • • 發佈:2017-06-14
++ r+ cti obj 今天 nbsp start document timer
今天做的是勻速情況下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 封裝的方法