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 des Web Animations API-Animation-Interfaces setzt die aktuelle Wiedergabezeit auf das Ende der Animation entsprechend der aktuellen Wiedergaberichtung.

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

Syntax

finish()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidState: Die Abspielrate des Players ist 0 oder die Wiedergaberate 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

Siehe auch

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