JS彈性運動實現(xiàn)方法分析

更新時間：2016年12月15日 12:03:36 作者：鬼畜十三

這篇文章主要介紹了JS彈性運動實現(xiàn)方法,結(jié)合實例形式分析了JS實現(xiàn)彈性運動的原理、相關(guān)技術(shù)細(xì)節(jié)與實現(xiàn)技巧,需要的朋友可以參考下

本文實例分析了JS彈性運動實現(xiàn)方法。分享給大家供大家參考，具體如下：

描述：像彈簧一樣左右彈動，最后緩慢停下來

一、加減速運動

1.加速運動

var iSpeed=0;
iSpeed++;

速度越來越快，最后沖出去

2.減速運動

var iSpeed=20;
iSpeed--;

速度越來越慢，降到0后開始變負(fù)值往反方向運動

二、彈性運動

1.在目標(biāo)點左邊，加速；目標(biāo)點右邊，減速,如

if(div1.offsetLeft<300){
 iSpeed=iSpeed+1;  //等同iSpeed++;
}
else{
 iSpeed=iSpeed-1;
}

這是最簡單的彈性運動，缺陷：加速度恒定（應(yīng)該根據(jù)松緊帶而變）

if(div1.offsetLeft<300){
 iSpeed=iSpeed+(300-div1.offsetLeft)/50; 
}
else{
 iSpeed=iSpeed-(div1.offsetLeft-300)/50;
}
iSpeed=iSpeed+(300-div1.offsetLeft)/50; ==>iSpeed=iSpeed+300/50-div1.offsetLeft/50;
iSpeed=iSpeed-(div1.offsetLeft-300)/50; ==>iSpeed=iSpeed-div1.offsetLeft/50+300/50;

這兩個完全一樣所以不需要if/else

iSpeed+=(300-div1.offsetLeft)/50; 
div1.style.left=div1.offsetLeft+iSpeed+'px';

缺陷2：不會停下來（缺少摩擦力）

iSpeed+=(300-div1.offsetLeft)/50; 
iSpeed*=0.95; //乘一個小數(shù)，越來越小
div1.style.left=div1.offsetLeft+iSpeed+'px';

三、帶摩擦力的彈性運動

比較好的組合

iSpeed+=(300-div1.offsetLeft)/5; 
iSpeed*=0.7;

注：var iSpeed=0;要放在定時器外面，不然每次都從0開始，加啊乘啊就沒用了

四、整合好的彈性運動框架

var iSpeed=0;
var left=0;
function startMove(obj,iTarget){
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  iSpeed+=(iTarget-obj.offsetLeft)/5;
  iSpeed*=0.7;  //計算出來的速度是一個小數(shù)，如果給它取整，會一直左右移動
  left+=iSpeed;  //把速度存在變量里，變量是可以有小數(shù)的
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //因為iSpeed和left都是小數(shù)，所以永遠(yuǎn)達(dá)不到0和目標(biāo)點，只能無限接近
   clearInterval(obj.timer);  //雖然速度最后接近于0，看似運動停止了，但定時器還一直開著，所以當(dāng)速度=0并且到達(dá)目標(biāo)點，關(guān)掉（只是速度=0關(guān)掉，運動到最右邊準(zhǔn)備回來那一剎那，速度=0，同理只是到達(dá)目標(biāo)點關(guān)掉，一開始往右運動經(jīng)過中間時會達(dá)到目標(biāo)點，所以必須兩者同時滿足）
   obj.style.left=iTarget+'px'; //小數(shù)無法完全貼合，所以最后直接讓他等于目標(biāo)點，一般人肉眼看不出來
  }
  else{
   obj.style.left=left+'px';  //style.left只能是一個整數(shù)，所以每次會把小數(shù)抹掉，誤差是累計的，最終累加起來就會有1-2像素，用obj.offsetLeft+iSpeed就會無法完全貼合
  }
 },30);
};

五、彈性運動不適用的地方

樣式會過界的

比如高度，先變大后變小，如果物體本身高度很小，可能會變成負(fù)值，就不對了

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: