在JavaScript中如何實現彈性效果
這篇文章主要介紹了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中如何實現彈性效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
