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

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

亚连

リリース： 2018-06-19 16:06:20

オリジナル

1724 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。