JavaScript で弾性効果を実現する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript で弾性効果を実現する方法

亚连

Jun 19, 2018 pm 04:06 PM

javascript 弾性

この記事では、JavaScript で重力落下と弾性効果を実現する方法を主に紹介し、JavaScript での重力落下と弾性効果の具体的な実装テクニックをサンプルの形式で分析します。この記事では、JavaScript での落下効果と弾む効果のメソッドの実装について説明します。参考までに皆さんと共有してください。詳細は次のとおりです。

ここでは、以下に示すように、JS 言語を使用して、HTML ページで重力の影響下で落ちた後に跳ね上がる効果を実現しています。この例では、主に次の問題が関係しています:

1. 球が下に移動するとき、およびエッジに接触する前に垂直方向の速度を増加させる効果をどのように実現するか。

回答: これは、タイマー内で毎回垂直速度の 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. 球を放すと、横速度も速度Xになります。横速度を徐々に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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7563

CakePHP チュートリアル

1385

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

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：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.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 を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワークプロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラデバイスがあるとします。

See all articles