Detailliertes Beispiel dafür, wie JavaScript setTimeout verwendet, um eine Zyklusanimation zu implementieren-js-Tutorial-php.cn

Detailliertes Beispiel dafür, wie JavaScript setTimeout verwendet, um eine Zyklusanimation zu implementieren

黄舟

Freigeben： 2018-05-11 14:08:42

Original

2709 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt den spezifischen Code von setTimeout zur Implementierung einer Zyklusanimation als Referenz. Der spezifische Inhalt lautet wie folgt:

Ich dachte immer, dass der Animationseffekt mit setInterval ausgeführt wird. Es ist auch einfacher zu verstehen, die Ausführung fortzusetzen, bis setInterval gelöscht wird, wenn die Bedingung erneut auftritt.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id=&#39;box&#39;></p>
  <script>
    var oBox = document.getElementById("box");
    var maxLeft = utils.win(&#39;clientWidth&#39;)-oBox.offsetWidth;
    var step = 5;
    var timer = null;
    //使用递归思想完成setTimeout的轮循动画：每一次在执行动画之前把上一次设置没用的定时器清除掉，节约我们的内存空间
    function move(){
      window.clearTimeout(timer);
      var curLeft = utils.css(oBox,"left");
      if(curLeft+step >= maxLeft){//边界判断
        utils.css(oBox,"left",maxLeft);
        return;
      }
      curLeft+=step;
      utils.css(oBox,"left",curLeft);
      timer = window.setTimeout(move,10)
    }
    move();

  </script>
</body>
</html>

Nach dem Login kopieren

In den letzten Tagen habe ich Beispiele für die Verwendung von setTimeout zum Erstellen von Animationen gesehen, die ich zunächst nicht verstand. Es besteht ein Zusammenhang zwischen Animation und verzögerter Ausführung (eigentlich besteht ein Zusammenhang, der später besprochen wird). Der Code sieht folgendermaßen aus:

Der Code sieht wie oben aus. Was ich damals nicht verstand, war, warum die Verzögerungszeit jedes Mal erhöht wurde? Warum stoppt die Ausführung kurz nach Erreichen von 200 Pixel? i ist offensichtlich Zeit, aber warum ist es dasselbe wie Entfernung?

for ( i=0; i<200; i++){
    setTimeout ( function(){
        var left = el.style.left ? el.style.left : 0;
        left = parseInt( left ) +1;
        el.style.left = left+ "px";
    } , i );
}

Nach dem Login kopieren

Um zunächst die erste Frage zu beantworten:

Die for-Schleife ist eigentlich der Schlüssel zur Animation. Durch einfaches Ausführen von setInterval wird das Objekt nur einmal bewegt. Sie können den Code zunächst analysieren: Wenn i 0 ist, bewegt sich das Objekt um 1 Pixel, wenn i 1 ist, ist es nach links 2 Pixel und die Verzögerung beträgt 1 Millisekunde. . . . Wenn i 99 ist, beträgt left 100 Pixel und die Ausführung wird um 99 Millisekunden verzögert. . . Wenn i 199 ist, beträgt left 200 Pixel und die Ausführung wird um 199 Millisekunden verzögert. . . Die Verzögerungszeit erhöht sich mit der Bewegung des Objekts.

In gewisser Hinsicht hängt die Verzögerung also nicht unbedingt mit der Animation zusammen. Aber aus einer kontinuierlichen Perspektive (die for-Schleife spielt eine Rolle) wird basierend auf unserer visuellen Beständigkeit eine Animation erstellt, die durch ein Bild dargestellt wird:

Schleife, Ein Animationseffekt entsteht. Detailliertes Beispiel dafür, wie JavaScript setTimeout verwendet, um eine Zyklusanimation zu implementieren

Zweite Frage:

Wenn die Animation endet, beträgt der Abstand zufällig 200. Was hat das mit i zu tun? Tatsächlich besteht kein direkter Zusammenhang. Es ist nur so, dass, wenn i um 1 erhöht wird, auch left sich um i erhöht. Wenn der Wert von left jedes Mal um 3 erhöht wird, sehen Sie ein anderes Ergebnis. (Am Ende sollte es 600 sein, aber es ist trotzdem wichtig, weil es 200 Mal wiederholt wird.)

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie JavaScript setTimeout verwendet, um eine Zyklusanimation zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!