在JavaScript中如何實現彈性效果-js教程-PHP中文網

首頁

web前端

js教程

在JavaScript中如何實現彈性效果

亚连

Jun 19, 2018 pm 04:06 PM

javascript彈性

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

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

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

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

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

2.球體接觸地面（此範例中指瀏覽器下緣）後，如何實現速度反向效果？ 答案：接觸地面後，將方向速度置為當前速度的反方向即可，代碼if (iW >= w||iW = h||iH

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外掛

以上是在JavaScript中如何實現彈性效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。