Window: requestAnimationFrame() method

callback

Die Funktion, die aufgerufen wird, wenn es Zeit ist, Ihre Animation für das nächste Neuzeichnen zu aktualisieren. Diese Callback-Funktion erhält ein einzelnes Argument:

timestamp

Ein DOMHighResTimeStamp, der die Endzeit der Rendering des vorherigen Frames anzeigt (basierend auf der Anzahl der Millisekunden seit dem time origin). Der Zeitstempel ist eine Dezimalzahl in Millisekunden, jedoch mit einer minimalen Präzision von 1 Millisekunde. Für Window-Objekte (nicht Workers) entspricht er document.timeline.currentTime. Dieser Zeitstempel wird zwischen allen Fenstern geteilt, die auf dem gleichen Agenten laufen (alle gleichherkunftlichen Fenster und, noch wichtiger, gleichherkunftliche iframes) — was eine Synchronisation der Animationen über mehrere requestAnimationFrame-Callbacks hinweg ermöglicht. Der Zeitstempelwert ähnelt auch dem Aufruf von performance.now() zu Beginn der Callback-Funktion, ist jedoch nie derselbe Wert.

Wenn mehrere durch requestAnimationFrame() gequeue-te Callbacks in einem einzelnen Frame zu feuern beginnen, erhält jeder den gleichen Zeitstempel, auch wenn während der Berechnung der Arbeitslast jedes vorherigen Callbacks Zeit verstrichen ist.

Ein unsigned long Integerwert, die Anfrage-ID, die den Eintrag in der Callback-Liste eindeutig identifiziert. Sie sollten keine Annahmen über seinen Wert machen. Sie können diesen Wert an window.cancelAnimationFrame() übergeben, um die Neuzeichnungs-Callback-Anfrage abzubrechen.

In diesem Beispiel wird ein Element für 2 Sekunden (2000 Millisekunden) animiert. Das Element bewegt sich mit einer Geschwindigkeit von 0,1px/ms nach rechts, sodass seine relative Position (in CSS-Pixeln) in Abhängigkeit von der seit Beginn der Animation verstrichenen Zeit (in Millisekunden) mit 0.1 * elapsed berechnet werden kann. Die Endposition des Elements ist 200px (0.1 * 2000) rechts von seiner ursprünglichen Position.

const element = document.getElementById("some-element-you-want-to-animate");
let start;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  // Math.min() is used here to make sure the element stops at exactly 200px
  const shift = Math.min(0.1 * elapsed, 200);
  element.style.transform = `translateX(${shift}px)`;
  if (shift < 200) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

Die folgenden drei Beispiele veranschaulichen verschiedene Ansätze zur Festlegung des Nullpunkts, der Basislinie zur Berechnung des Fortschritts Ihrer Animation in jedem Frame. Wenn Sie mit einer externen Uhr synchronisieren möchten, wie zum Beispiel BaseAudioContext.currentTime, ist die höchste verfügbare Präzision die Dauer eines einzelnen Frames, 16,67ms @60hz. Das Zeitstempelargument des Callbacks repräsentiert das Ende des vorherigen Frames, sodass der früheste Zeitpunkt, zu dem Ihre neu berechneten Werte gerendert werden, im nächsten Frame liegt.

Dieses Beispiel wartet, bis der erste Callback ausgeführt wird, um zero festzulegen. Wenn Ihre Animation beim Starten zu einem neuen Wert springt, müssen Sie sie auf diese Weise strukturieren. Wenn Sie nichts externes wie Audio synchronisieren müssen, wird dieser Ansatz empfohlen, da einige Browser eine Mehrframe-Verzögerung zwischen dem ersten Aufruf von requestAnimationFrame() und dem ersten Aufruf der Callback-Funktion haben.

let zero;
requestAnimationFrame(firstFrame);
function firstFrame(timestamp) {
  zero = timestamp;
  animate(timestamp);
}
function animate(timestamp) {
  const value = (timestamp - zero) / duration;
  if (value < 1) {
    element.style.opacity = value;
    requestAnimationFrame((t) => animate(t));
  } else element.style.opacity = 1;
}

Dieses Beispiel verwendet document.timeline.currentTime, um einen Nullwert vor dem ersten Aufruf von requestAnimationFrame festzulegen. document.timeline.currentTime stimmt mit dem timestamp-Argument überein, sodass der Nullwert dem Zeitstempel des 0. Frames entspricht.

const zero = document.timeline.currentTime;
requestAnimationFrame(animate);
function animate(timestamp) {
  const value = (timestamp - zero) / duration; // animation-timing-function: linear
  if (value < 1) {
    element.style.opacity = value;
    requestAnimationFrame((t) => animate(t));
  } else element.style.opacity = 1;
}

Dieses Beispiel animiert mithilfe von performance.now() anstelle des Zeitstempelwerts des Callbacks. Sie könnten dies verwenden, um eine etwas höhere Synchronisationspräzision zu erreichen, obwohl der zusätzliche Grad an Präzision variabel ist und nicht viel zunimmt. Hinweis: Dieses Beispiel ermöglicht es Ihnen nicht, Animation-Callbacks zuverlässig zu synchronisieren.

const zero = performance.now();
requestAnimationFrame(animate);
function animate() {
  const value = (performance.now() - zero) / duration;
  if (value < 1) {
    element.style.opacity = value;
    requestAnimationFrame((t) => animate(t));
  } else element.style.opacity = 1;
}

• Window.cancelAnimationFrame()
• DedicatedWorkerGlobalScope.requestAnimationFrame()
• Animieren mit JavaScript: vom setInterval zu requestAnimationFrame - Blogpost
• TestUFO: Testen Sie Ihren Webbrowser auf Timing-Abweichungen von requestAnimationFrame()
• Firefox wechselt zu uint32_t für die requestAnimationFrame-Anfrage-ID