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) {       // 如果剩余時(shí)間少于 60 毫秒，則在此結(jié)束動(dòng)畫(huà)
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動(dòng)畫(huà)操作
    }

    _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 = 進(jìn)度為 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,  // 以秒為單位的時(shí)間
  run: function(rate) { /* 使用 rate 執(zhí)行某些操作 */ }
});

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 = 進(jìn)度為 100%

      item = list.shift();  // 獲取下一個(gè)項(xiàng)目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 進(jìn)度為 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 緩動(dòng)公式
      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!