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 までご連絡ください。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、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はフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。