本文實例分析了JS彈性運動實現方法。分享給大家供大家參考，具體如下：
描述：像彈簧一樣左右彈動，最后緩慢停下來
一、加減速運動
1.加速運動
var iSpeed=0;iSpeed++;
速度越來越快，最后沖出去
2.減速運動
var iSpeed=20;iSpeed--;
速度越來越慢，降到0后開始變負值往反方向運動
二、彈性運動
1.在目標點左邊，加速；目標點右邊，減速,如
if(div1.offsetLeft<300){ iSpeed=iSpeed+1; //等同iSpeed++;}else{ iSpeed=iSpeed-1;}這是最簡單的彈性運動，缺陷：加速度恒定（應該根據松緊帶而變）
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; //乘一個小數，越來越小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; //計算出來的速度是一個小數，如果給它取整，會一直左右移動 left+=iSpeed; //把速度存在變量里，變量是可以有小數的 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //因為iSpeed和left都是小數，所以永遠達不到0和目標點，只能無限接近 clearInterval(obj.timer); //雖然速度最后接近于0，看似運動停止了，但定時器還一直開著，所以當速度=0并且到達目標點，關掉（只是速度=0關掉，運動到最右邊準備回來那一剎那，速度=0，同理只是到達目標點關掉，一開始往右運動經過中間時會達到目標點，所以必須兩者同時滿足） obj.style.left=iTarget+'px'; //小數無法完全貼合，所以最后直接讓他等于目標點，一般人肉眼看不出來 } else{ obj.style.left=left+'px'; //style.left只能是一個整數，所以每次會把小數抹掉，誤差是累計的，最終累加起來就會有1-2像素，用obj.offsetLeft+iSpeed就會無法完全貼合 } },30);};五、彈性運動不適用的地方
樣式會過界的
比如高度，先變大后變小，如果物體本身高度很小，可能會變成負值，就不對了
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
