在JavaScript中如何實(shí)現(xiàn)彈性效果

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:36:25

在JavaScript中如何實(shí)現(xiàn)彈性效果

在JavaScript中如何實(shí)現(xiàn)彈性效果:這篇文章主要介紹了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法,結(jié)合實(shí)例形式分析了javascript重力下落及彈性效果的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下本文實(shí)例講述了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：這里利用J

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀在JavaScript中如何實(shí)現(xiàn)彈性效果:這篇文章主要介紹了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法,結(jié)合實(shí)例形式分析了javascript重力下落及彈性效果的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下本文實(shí)例講述了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：這里利用J

這篇文章主要介紹了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法,結(jié)合實(shí)例形式分析了javascript重力下落及彈性效果的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法。分享給大家供大家參考，具體如下：

這里利用JS語言在Html頁面中實(shí)現(xiàn)重力作用下落地后彈起的效果，如下所示：

在此例中主要涉及以下幾個(gè)問題：

1.給球體一個(gè)釋放初速度，如何實(shí)現(xiàn)越向下運(yùn)動(dòng)且在接觸邊緣之前，豎直方向上的速度speedY越大的效果？答案：可以在計(jì)時(shí)器中，每及時(shí)一次，豎直方向上的速度speedY自增一個(gè)固定值來實(shí)現(xiàn)，下面代碼中speedY += 6;就是實(shí)現(xiàn)這個(gè)效果。

2.球體接觸地面（此例中指瀏覽器下邊緣）后，如何實(shí)現(xiàn)速度反向效果？答案：接觸地面后，將方向速度置為當(dāng)前速度的反方向即可，代碼if (iW >= w||iW <= 0){speedX = -speedX;}if中條件表示如果超出運(yùn)動(dòng)范圍，實(shí)現(xiàn)水平方向接觸邊緣后運(yùn)動(dòng)方向相反，代碼if (iH >= h||iH <= 0){speedY = -speedY;}則表示Y方向接觸邊緣后速度變反。

3.球體接觸地面反彈后，如何實(shí)現(xiàn)再次上升的高度低于上一次高度的效果？答案：在接觸地面后，速度變?yōu)樨?fù)值，計(jì)時(shí)器開始執(zhí)行下一個(gè)間隔，立即執(zhí)行了speedY += 6，彈起速度立刻減小了6，其大小相對(duì)接觸地面前一瞬間小，因此球體不會(huì)彈跳到原來的高度。

4.如何實(shí)現(xiàn)球體豎直方向上的速度絕對(duì)值越來越小直至逼近于0的效果？答案：事實(shí)上，僅利用speedY += 6;此例中豎直方向上速度speedY不可能達(dá)到0，因?yàn)樵谠摵瘮?shù)設(shè)置好了初速度的前提下，某一次落地速度不可能為6（通過后來打印速度每次執(zhí)行結(jié)果可以確定），所以下一次執(zhí)行不可能為0，那么究竟是怎樣實(shí)現(xiàn)落到地面靜止的效果的呢？實(shí)際上，當(dāng)把speedY增加值設(shè)置為6時(shí)，當(dāng)球體某一次落地瞬間它的速度是1，2，3，4，5中的任何一個(gè)值是，經(jīng)加上6后反彈瞬時(shí)速度分別為-5，-4，-3，-2，-1，經(jīng)過一個(gè)計(jì)時(shí)器周期（此例中為30毫秒），速度再加6立刻變?yōu)?，2，3，4，5，下一次速度變?yōu)?5，-4，-3，-2，-1......，由于speedY += 6在計(jì)時(shí)器的頭處，因此最終結(jié)果將總是在加6之前，停留在-5，-4，-3，-2，-1.中的任何一個(gè)數(shù)值，且計(jì)時(shí)器始終處于動(dòng)態(tài)，最終球體顯示在底部。

5.當(dāng)球體釋放后，也具備有個(gè)橫向速度speedX，如何使橫向速度也逐漸減小值0？答案：此例中不需要考慮x方向的碰撞，因此每次計(jì)時(shí)可將speedX乘以一個(gè)小于1的數(shù)，最終的speedX值將無限趨近于0，顯示為靜止。
當(dāng)拖動(dòng)窗口時(shí)如何實(shí)現(xiàn)不出現(xiàn)滾動(dòng)條的效果？
答案：拖動(dòng)后瀏覽器窗口后，對(duì)球體設(shè)置新的運(yùn)動(dòng)范圍即可。

實(shí)現(xiàn)代碼及解析如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>彈性運(yùn)動(dòng)</title>
 <style type="text/css">
 #p {
 width: 100px;
 height: 100px;
 background: green;
 position: absolute;
 border-radius: 50%;
 }
 </style>
 </head>
 <body>
 <script type="text/javascript">
 //window.onload表示等頁面標(biāo)簽內(nèi)容加載完之后再加載window.onload里面的內(nèi)容
 window.onload = function(){
 //分別設(shè)置p在x和y方向的的初速度
 var speedX = 2;
 var speedY = 3;
 //獲取p標(biāo)簽
 var p = document.getElementById("p");
 //獲取按鈕
 var btn = document.getElementById("btn");
 //定義點(diǎn)擊事件
 btn.onclick = function(){
 startMove();
 };
 //定義一個(gè)空的定時(shí)器，防止上次事件定時(shí)器的返回值疊加
 var timer = null;
 //定義點(diǎn)擊事件函數(shù)
 function startMove(){
 //內(nèi)部清空計(jì)時(shí)器，防止上次返回值疊加
 clearInterval(timer);
 //設(shè)置計(jì)時(shí)器
 timer = setInterval(function(){
 //豎直方向上反向運(yùn)動(dòng)時(shí)速度為負(fù)值，為了達(dá)到反彈逐漸速度逐漸減小的效果，可以在向下碰撞后速度加上一個(gè)正值
 speedY += 6;
 //分別獲取p距離左邊距和上邊距的動(dòng)態(tài)距離
 var iW = p.offsetLeft + speedX;
 var iH = p.offsetTop + speedY;
 //獲取p水平方向運(yùn)動(dòng)的最大距離，即不包含邊框的瀏覽器窗口的寬度clientWidth減去p的寬度
 var w = document.documentElement.clientWidth - p.offsetWidth;
 //獲取p垂直方向運(yùn)動(dòng)的最大距離
 var h = document.documentElement.clientHeight - p.offsetHeight;
 //當(dāng)動(dòng)態(tài)寬度達(dá)到p最大運(yùn)動(dòng)寬度范圍時(shí)，立刻轉(zhuǎn)換速度為反方向負(fù)值，同時(shí)把w的值負(fù)值給iw，因?yàn)閣是可視窗口范圍，當(dāng)w縮小時(shí)，iw保存的還是上一次窗口條件下的距離左邊距的距離
 if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
 //當(dāng)動(dòng)態(tài)高度達(dá)到p最大運(yùn)動(dòng)高度范圍時(shí)，立刻轉(zhuǎn)向速度，同時(shí)將x方向速度乘以0.8，使之速度逐漸減小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
 //由于p.style.left和p.style.top還儲(chǔ)存這上一次或第一次的計(jì)時(shí)后的值，此次計(jì)時(shí)后應(yīng)把新的值儲(chǔ)存起來，使p出現(xiàn)動(dòng)態(tài)效果
 p.style.left = iW + "px";
 p.style.top = iH + "px";
 console.log(speedX);
 },30);
 }
 }
 </script>
 <input type="button" name="btn" id="btn" value="開始運(yùn)動(dòng)" />
 <p id="p"></p>
 </body>
</html>

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在Javascript中如何實(shí)現(xiàn)JSON數(shù)據(jù)分組優(yōu)化

使用axios如何實(shí)現(xiàn)上傳圖片帶有進(jìn)度條功能

在jQuery中如何使用Validate插件

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com