彈性運動在生活中類似考慮阻力的單擺運動，即在指定位置的左右搖擺最后停在指定位置

基礎代碼

html代碼

<div></div> <span></span>

css代碼

div {width: 100px;height: 100px;background-color: steelblue;position: absolute;top: 0;left: 0;cursor: pointer; } span {width: 1px;height: 100px;background-color: black;position: absolute;top: 0;left: 300px; }

js代碼

var oDiv = document.getElementsByTagName('div')[0]; var span = document.getElementsByTagName('span')[0]; oDiv.onclick = function () {startMove(this,300) } function startMove(dom, target) {clearInterval(timer);var speed = 0;var a = 3;var u = 0.8;var timer = setInterval(function () {a = (target - dom.offsetLeft) / 5;speed += a;speed *= u;if (Math.abs(speed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {clearInterval(timer);dom.style.left = target + 'px';} else {dom.style.left = dom.offsetLeft + speed + 'px';console.log(speed, target - dom.offsetLeft); }},30) }

問題1：實現加速度減小的加速運動和加速度增大的減速運動

解決：由單擺運動的原理可知，隨著小方塊的左邊線與指定位置的距離減小，加速度減小，由此可建立二者的關系，控制增大或者減小加速度（該思路與緩沖運動利用距離減小控制速度變化相同）

問題2：小方塊要停留在指定位置

解決：首先需要增加一個摩擦系數u來消耗動能；其次分析小方塊速度可為0的點，除了最終的指定位置速度為0，還有運動到兩邊加速度最大，速度為0的臨界點，因此定時器清除的條件有兩個，一是速度為0，二是小方塊的左邊線到達指定位置。

問題3：實際過程中，速度基本不可能正好為0，左邊線也不能正好到達指定位置，因此雖然小方塊看起來停住了，但是定時器并沒有清除

解決：將判定條件改為速度與距離的絕對值均小于1，同時滿足二者時，清理定時器。為了防止小方塊并為到達指定位置，將其左邊線設置為到指定位置

---

案例

代碼功能：第一個方塊上疊加著一個透明度為0.2的方塊，移動鼠標到其他方塊，則透明方塊會做彈性移動到該方塊，代碼如下：

html代碼

<ul><li class="ele">黑執事</li><li class="ele">火影忍者</li><li class="ele">海賊王</li><li class="ele">死神</li><li class="bg"></li> </ul>

css代碼

ul {width: 800px;height: 100px;padding: 0;position: relative;top: 100px;left: 100px;list-style: none;border: 1px solid black; } ul .ele {float: left;width: 198px;height: 98px;background-color: steelblue;border: 1px solid black;line-height: 98px;text-align: center; } ul .bg {width: 200px;height: 100px;background-color: black;opacity: 0.2;position: absolute;top: 0;left: 0; }

js代碼

var liList = document.getElementsByTagName('li'); var liBg = liList[liList.length - 1]; var timer = null; for (var i = 0; i < liList.length - 1; i++) {liList[i].onmouseenter = function () {startMove(liBg, this.offsetLeft);} }function startMove(dom, target) {clearInterval(timer);var speed = 0;var a = 3;var u = 0.8;timer = setInterval(function () {a = (target - dom.offsetLeft) / 5;speed += a;speed *= u;if (Math.abs(speed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {clearInterval(timer);dom.style.left = target + 'px';console.log(1);} else {dom.style.left = dom.offsetLeft + speed + 'px';console.log(speed, target - dom.offsetLeft); }},30) }

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的JavaScript的运动——弹性运动原理及案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。