Einfache Animationen mit RequestAnimationFrame

Kernpunkte

• requestAnimationFrame ist eine Helferfunktion, mit der Animationen geschrieben werden, die mit dem Zeichenzyklus des Browsers synchronisiert sind, wodurch glattere und mehr CPU-sparende Animationseffekte erzielt werden. Es wird von allen modernen Browsern unterstützt und ist mit älteren Browsern kompatibel.
• Die mit requestAnimationFrame erstellten animate -Funktionen können entwickelt werden, um eine Reihe von Funktionen als Parameter zu akzeptieren, die in Sequenz bezeichnet werden, wodurch eine Animationssequenz implementiert wird. Diese Funktion kann den Fortschritt der Animation verfolgen und die Endzeit der Animation berechnen.
• requestAnimationFrame erstellt Animationen effizienter als setTimeout oder setInterval, da sie synchron mit der Refresrate des Browsers funktioniert. Es kann mit jedem JavaScript-Framework oder jeder Bibliothek verwendet werden und können eine Vielzahl von Animationen verarbeiten, einschließlich CSS-Eigenschaften, Leinwandanimationen, SVG-Animationen und scrollen- oder Benutzer-Interaktionsbasierten Animationen.

DOM -Element -Animation beinhaltet die Änderung des CSS -Stils alle paar Millisekunden, um die Illusion von Bewegung zu erstellen. Dies bedeutet, die Rückruffunktion an setTimeout zu übergeben und das Stilobjekt des Knotens in dieser Rückruffunktion zu ändern. Rufen Sie dann erneut setTimeout an, um den nächsten Animationsrahmen in die Warteschlange zu stellen. requestAnimationFrame Diese neue Helferfunktion entstand zur Animation. Es wurde ursprünglich in Firefox 4 gesehen und wurde allmählich von allen Browsern, einschließlich der IE 10, übernommen. Glücklicherweise ist es einfach, es mit älteren Browsern kompatibel zu machen.

window.requestAnimationFrame(callbackFunction);

Im Gegensatz zu setTimeout (Ausführen nach einer bestimmten Zeitverzögerung) führt requestAnimationFrame die Rückruffunktion aus, wenn der Browser das nächste Mal den Bildschirm zeichnet. Auf diese Weise können Sie mit dem Zeichenzyklus des Browsers synchronisieren, damit Sie nicht zu oft oder nicht häufig genug zeichnen, was bedeutet, dass Ihre Animation sehr glatt ist und die CPU nicht überlastet.

Browser -Kompatibilitätsverarbeitung

Derzeit hat jeder Browser eine vorangestellte Version von requestAnimationFrame. Lassen Sie uns also feststellen, welche Version unterstützt wird, und verweisen Sie auf:

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

Beachten Sie, wie wir die Quadratklassen -Notation verwenden, um auf Eigenschaften auf Fensterobjekten zuzugreifen. Wir verwenden eine Quadratklassen -Notation, da wir dynamisch Eigenschaftsnamen mithilfe von String -Verkettung bauen. Wenn der Browser es nicht unterstützt, werden wir auf eine reguläre Funktion zurückgreifen, die nach 60 Millisekunden setTimeout aufruft, um einen ähnlichen Effekt zu erzielen.

Animationsfunktion Konstruktion

Erstellen wir nun eine einfache Funktion, die wiederholt unsere _requestAnimationFrame aufruft, um die Animation zu simulieren. Um die Animation zu implementieren, benötigen wir eine externe Funktion als Einstiegspunkt und eine interne Funktion (als Schrittfunktion bezeichnet), die wiederholt aufgerufen wird.

window.requestAnimationFrame(callbackFunction);

Jedes Mal, wenn wir die Schrittfunktion aufrufen, müssen wir den Fortschritt der Animation verfolgen, um zu wissen, wann sie endet. Wir werden die Zeit berechnen, in der die Animation enden und den Fortschritt basierend auf der verbleibenden Zeit für jeden Zyklus berechnen sollte.

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

Beachten Sie, dass wir new Date() verwenden, um die aktuelle Zeit in Millisekunden zu erhalten. Das Plus -Zeichen legt das Datumsobjekt einem numerischen Datentyp aus. rate Die Variable ist eine Zahl zwischen 0 und 1, die die Fortschrittsrate der Animation angibt.

Anime -Funktionsverbesserung

Jetzt müssen wir den Eingang und die Ausgabe der Funktion berücksichtigen. Lassen Sie uns der Funktion die Funktion und Dauer als Parameter akzeptieren.

function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}

wir können diese Funktion so nennen:

function animate() {
  var duration = 1000 * 3,  // 3 秒
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {       // 如果剩余时间少于 60 毫秒，则在此结束动画
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 执行一些动画操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

In der Funktion run werde ich einen Code platzieren, der die Breite des Knotens von "100px" zu "300px" animiert.

function animate(item) {
  var duration = 1000 * item.time,
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      item.run(1);  // 1 = 进度为 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}

Verbesserte Animationsfunktion

Es funktioniert einwandfrei, aber ich möchte wirklich in der Lage sein, eine Reihe von Funktionen einzugeben, die in Sequenz bezeichnet werden. Auf diese Weise beginnt nach Ablauf der ersten Animation die zweite Animation. Wir werden das Array als Stapel behandeln und die Gegenstände nacheinander nacheinander aufnehmen. Ändern wir die Eingabe:

animate({
  time: 3,  // 以秒为单位的时间
  run: function(rate) { /* 使用 rate 执行某些操作 */ }
});

Wenn die Animation zum ersten Mal ausgeführt wird, ist item null, remaining ist weniger als 60 Millisekunden, so dass wir das erste Element aus dem Array stecken und damit beginnen, es auszuführen. Im letzten Frame der Animation ist remaining auch weniger als 60, sodass wir die aktuelle Animation vervollständigen, das nächste Element aus dem Array aussprechen und den nächsten Element animieren. Beachten Sie auch, dass ich den Wert rate durch die Locker -Formel übergeben habe. Die Werte von 0 bis 1 wachsen jetzt in einem kubischen Verhältnis, was es weniger steif aussieht. Um die Animationsfunktion aufzurufen, machen wir Folgendes:

animate({
  time: 3,
  run: function(rate) {
    document.getElementById("box").style
      .width = (rate * (300 - 100) + 100) + "px";
  }
});

Bitte beachten Sie, dass sich die Breite der Box zuerst erweitert, 2 Sekunden dauert, dann die Höhe erweitert und 2 Sekunden angeht.

Codeoptimierung

Lassen Sie uns unseren Code ein wenig aufräumen. Bitte beachten Sie, dass wir mehrmals getElementById nennen, was nicht sehr gut ist. Lassen Sie uns es zwischenstreiten und zwischenspeichern, während sie die Start- und Endwerte zwischenspeichern.

function animate(list) {
  var item,
      duration,
      end = 0;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      if (item) item.run(1);  // 1 = 进度为 100%

      item = list.shift();  // 获取下一个项目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 进度为 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 缓动公式
      item.run(rate);
    }

    _requestAnimationFrame(step);
  };
  step();
}

Beachten Sie, dass wir die Hauptfunktion nicht ändern müssen, da die run -Funktion immer Teil des in sich geschlossenen Objekts ist und über die this Variable auf alle Eigenschaften des Objekts zugreifen kann. Wenn wir nun die Schrittfunktion ausführen, werden alle Variablen zwischengespeichert. Das war's. Eine einfache Animation Helper -Funktion, die requestAnimationFrame nutzt und Fallbacks für ältere Browser bietet.

(Der Skript -Demo -Teil wird weggelassen, weil JavaScript -Code in dieser Umgebung nicht ausgeführt werden kann.)

(Der FAQ-Abschnitt zur Verwendung von RequestAnimationFrame für einfache Animation wird ebenfalls weggelassen, da der Inhalt stark vom Originaltext dupliziert wird und Sie nur die Kernpunkte beibehalten müssen, um die Pseudo-Original zu vervollständigen.)

Das obige ist der detaillierte Inhalt vonEinfache Animationen mit RequestAnimationFrame. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!