Animation: finish()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Die finish()-Methode der Animation-Schnittstelle der Web Animations API setzt die aktuelle Wiedergabezeit auf das Ende der Animation, entsprechend der aktuellen Abspielrichtung.

Das bedeutet, wenn die Animation vorwärts läuft, wird die Wiedergabezeit auf die Länge der Animationssequenz gesetzt. Läuft die Animation rückwärts (nachdem die Methode reverse() aufgerufen wurde), wird die Wiedergabezeit auf 0 gesetzt.

Syntax

finish()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidState: Die Wiedergabegeschwindigkeit des Players ist 0 oder die Wiedergabegeschwindigkeit der Animation ist größer als 0 und die Endzeit der Animation ist unendlich.

Beispiele

Das folgende Beispiel zeigt, wie die finish()-Methode verwendet wird und ein InvalidState-Fehler abgefangen wird.

interfaceElement.addEventListener("mousedown", () => {
  try {
    player.finish();
  } catch (e) {
    if (e instanceof InvalidState) {
      console.log("finish() called on paused or finished animation.");
    } else {
      logMyErrors(e); //pass exception object to error handler
    }
  }
});

Das folgende Beispiel beendet alle Animationen auf einem einzelnen Element, unabhängig von ihrer Wiedergaberichtung.

elem.getAnimations().forEach((animation) => animation.finish());

Spezifikationen

Specification
Web Animations # dom-animation-finish

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Web Animations API
Animation für andere Methoden und Eigenschaften, die Sie zur Steuerung von Webseiten-Animationen verwenden können.
Animation.play(), um eine Animation vorwärts abzuspielen.
Animation.reverse(), um eine Animation rückwärts abzuspielen.