在JavaScript中如何實現彈性效果

來源：懂視網責編：小采時間：2020-11-27 19:36:25

在JavaScript中如何實現彈性效果

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

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

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

在此例中主要涉及以下幾個問題：

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

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

3.球體接觸地面反彈后，如何實現再次上升的高度低于上一次高度的效果？答案：在接觸地面后，速度變為負值，計時器開始執行下一個間隔，立即執行了speedY += 6，彈起速度立刻減小了6，其大小相對接觸地面前一瞬間小，因此球體不會彈跳到原來的高度。

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

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

實現代碼及解析如下：

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

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

在Javascript中如何實現JSON數據分組優化

使用axios如何實現上傳圖片帶有進度條功能

在jQuery中如何使用Validate插件

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com