看過上一篇關於Javascript 勻速運動文章的朋友相信對於運動已經有了初步的了解
接下來 講一下關於緩沖運動的原理 ,我會逐行分析代碼，代碼簡單易懂，能馬上理解其中的原理，適用於初學者。
#div1 { width: 100px; height: 100px; position: absolute; background: red; top: 50px; left: 0; /*600 初始值*/ } #div2 { width: 1px; height: 300px; position: absolute; left: 300px; top: 0; background: black; }
<body> <input type="button" id="btn" value="開始運動" onclick="startMove()" /> <div id="div1"> </div> <div id="div2"> </div> </body>
以下是Javascript 代碼
<script type="text/javascript">
function startMove() {
var oDiv = document.getElementById("div1");
setInterval(function() {
var speed = (300 - oDiv.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30)
}
</script>
這短短的幾行代碼，讓我們看看其中有些什么原理，為何是這樣寫，實現緩沖運動。
原理：
當物體和終點之間的距離大的時候 速度是大的 距離不斷的減小，速度也不斷的減小
也就是說 速度與距離成正比 這樣就是緩沖運動的原理。
代碼分析：
var speed = (300 - oDiv.offsetLeft) / 10; 300 是自己定義的目標點 , 也就是div1 要運動到哪個地方
這里為什么要除以10呢 ？ 因為 當物體的offsetLeft 為0 的時候 ，300-0=0 speed=300;
這樣運動會直接到達目標點,而沒有了中間的過程。 本質的問題其實就是速度太大太快了，一下就到了終點。
解決方案：除以10， 這樣速度就變小了，就有了中間的過程。 那隨着距離的越來越小 速度也就越來越小 達到緩沖的效果。
若分母越小 速度越大 ,控制速度 去改變分母即可。
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
此時 除出來會有小數的情況 大家知道在css中 290.5px =290px ， 299.9px = 299px 像素會舍去小數部分
所以他運動到最后不會達到目標點 這樣就會出現了bug ，附上圖
可以看到div2 作為一個標桿 物體並沒有運動到底。
解決方案： 就要取整。
當div往右動, speed 為正 就ceil() ， 若div的初始位置為600,那就是在向左走 , 此時speed是負值
若算出來speed=-0.9 在ceil() 一下 那就是變成0了 ,就會出問題 所以要floor,向下取整
最后結合起來判斷speed 的正負 來調用不同的取整方式。 這套程序就可以 既往右邊 又往左邊運動。
總結：
往右邊移動 就向上取整 / 左邊就向下取整
用緩沖運動一定要取整,否則就會出bug
最后的效果
