彈性運(yùn)動(dòng)在生活中類似考慮阻力的單擺運(yùn)動(dòng)，即在指定位置的左右搖擺最后停在指定位置

基礎(chǔ)代碼

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) }

問(wèn)題1：實(shí)現(xiàn)加速度減小的加速運(yùn)動(dòng)和加速度增大的減速運(yùn)動(dòng)

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

問(wèn)題2：小方塊要停留在指定位置

解決：首先需要增加一個(gè)摩擦系數(shù)u來(lái)消耗動(dòng)能；其次分析小方塊速度可為0的點(diǎn)，除了最終的指定位置速度為0，還有運(yùn)動(dòng)到兩邊加速度最大，速度為0的臨界點(diǎn)，因此定時(shí)器清除的條件有兩個(gè)，一是速度為0，二是小方塊的左邊線到達(dá)指定位置。

問(wèn)題3：實(shí)際過(guò)程中，速度基本不可能正好為0，左邊線也不能正好到達(dá)指定位置，因此雖然小方塊看起來(lái)停住了，但是定時(shí)器并沒(méi)有清除

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

---

案例

代碼功能：第一個(gè)方塊上疊加著一個(gè)透明度為0.2的方塊，移動(dòng)鼠標(biāo)到其他方塊，則透明方塊會(huì)做彈性移動(dòng)到該方塊，代碼如下：

html代碼

<ul><li class="ele">黑執(zhí)事</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) }

?

?

?

?

?

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。