Heim > Artikel > Web-Frontend > So erzielen Sie elastische Effekte in JavaScript

So erzielen Sie elastische Effekte in JavaScript

亚连Original: 2018-06-19 16:06:201717Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zur Realisierung von Schwerkraftabfall- und Elastizitätseffekten in JavaScript vor. Er analysiert die Prinzipien und spezifischen Implementierungstechniken von JavaScript-Schwerkraftabfall- und Elastizitätseffekten in Form von Beispielen

Das Beispiel beschreibt die Methode zur Realisierung von Schwerkraftabfall und elastischen Effekten in JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier wird die JS-Sprache verwendet, um den Effekt des Aufspringens nach dem Fallen auf den Boden unter der Wirkung der Schwerkraft auf der HTML-Seite zu erzielen, wie gezeigt unten:

In diesem Beispiel geht es hauptsächlich um die folgenden Probleme:

1. Geben Sie der Kugel eine anfängliche Freigabegeschwindigkeit, wie Sie erreichen können Abwärtsbewegung und vor dem Kontakt mit der Kante, in vertikaler Richtung Welche Auswirkung hat eine größere Geschwindigkeit speedY? Antwort: Dies kann erreicht werden, indem die Vertikalgeschwindigkeit speedY jedes Mal im Timer um einen festen Wert erhöht wird. Im folgenden Code wird dieser Effekt erreicht.

2. Wie erreicht man den Geschwindigkeitsumkehreffekt, nachdem die Kugel den Boden berührt (in diesem Fall den unteren Rand des Browsers)? Antwort: Stellen Sie nach dem Berühren des Bodens einfach die Richtungsgeschwindigkeit auf die entgegengesetzte Richtung der aktuellen Geschwindigkeit ein. Die Bedingung im Code if (iW >= w||iW 2d9723191dcb5c0dc9674168dd7d24b8= h||iH <= 0){speedY = -speedY;} bedeutet, dass die Die Geschwindigkeit wird nach dem Kontakt mit der Kante in Y-Richtung umgekehrt.

3. Wie kann erreicht werden, dass die Aufstiegshöhe wieder niedriger wird als die vorherige Höhe, nachdem der Ball vom Boden abprallt? Antwort: Nach dem Berühren des Bodens wird die Geschwindigkeit negativ, der Timer beginnt mit der Ausführung des nächsten Intervalls, speedY += 6 wird sofort ausgeführt, die Sprunggeschwindigkeit wird sofort um 6 reduziert und ihre Größe ist kleiner als im Moment zuvor den Boden berührt, sodass die Kugel nicht auf ihre ursprüngliche Höhe zurückspringt.

4. Wie erreicht man den Effekt, dass der Absolutwert der Geschwindigkeit in vertikaler Richtung der Kugel immer kleiner wird, bis er sich 0 nähert? Antwort: Verwenden Sie in diesem Beispiel nur speedY += 6. Die Geschwindigkeit speedY in vertikaler Richtung kann nicht 0 erreichen, da unter der Voraussetzung, dass die Anfangsgeschwindigkeit in dieser Funktion festgelegt wird, die Geschwindigkeit einer bestimmten Landung ist kann nicht 6 sein (die Druckgeschwindigkeit kann später anhand des Ergebnisses jeder Ausführung bestimmt werden), daher kann die nächste Ausführung nicht 0 sein. Wie genau wird also der Effekt erzielt, wenn man stationär auf den Boden fällt? Wenn der Geschwindigkeits-Erhöhungswert auf 6 eingestellt ist und der Ball in einem bestimmten Moment landet, ist seine Geschwindigkeit tatsächlich einer von 1, 2, 3, 4 und 5. Nach der Addition von 6 beträgt die momentane Rückprallgeschwindigkeit - 5 , -4, -3, -2, -1. Nach einer Timer-Periode (in diesem Beispiel 30 Millisekunden) wird die Geschwindigkeit sofort nach dem Hinzufügen von 6 zu 1, 2, 3, 4, 5 und beim nächsten Mal wird die Geschwindigkeit zu 1, 2, 3, 4, 5 werden zu -5, -4, -3, -2, -1..., da speedY += 6 an der Spitze des Timers steht, bleibt das Endergebnis immer bei -5, - hängen, bevor 6 hinzugefügt wird. Beliebiger Wert darunter 4, -3, -2, -1. Der Timer ist immer dynamisch und die letzte Kugel wird unten angezeigt.

5. Wenn die Kugel losgelassen wird, hat sie auch eine Quergeschwindigkeit speedX. Wie lässt sich die Quergeschwindigkeit allmählich auf 0 verringern? Antwort: In diesem Beispiel besteht keine Notwendigkeit, die Kollision in der ist stationär.
Wie kann verhindert werden, dass beim Ziehen eines Fensters Bildlaufleisten angezeigt werden?
Antwort: Legen Sie nach dem Ziehen des Browserfensters einen neuen Bewegungsbereich für die Kugel fest.

Der Implementierungscode und die Analyse lauten wie folgt:

<!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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die JSON-Datengruppierungsoptimierung in Javascript

Wie Sie Axios verwenden, um die Funktion zum Hochladen von Bildern zu implementieren mit einem Fortschrittsbalken

So verwenden Sie das Validate-Plug-in in jQuery

Das obige ist der detaillierte Inhalt vonSo erzielen Sie elastische Effekte in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie domänenübergreifende Cookies in AxiosNächster Artikel：So implementieren Sie domänenübergreifende Cookies in Axios

In Verbindung stehende Artikel

Mehr sehen