Animation: reverse()-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 Animation.reverse()-Methode des Animation-Interfaces kehrt die Abspielrichtung um, was bedeutet, dass die Animation am Anfang endet. Wenn sie bei einer nicht abgespielten Animation aufgerufen wird, wird die gesamte Animation rückwärts abgespielt. Wenn sie bei einer pausierten Animation aufgerufen wird, wird die Animation rückwärts fortgesetzt.

Syntax

reverse()

Im Beispiel des Wachsenden/Shrinkenden Alice-Spiels bewirkt ein Klick oder Tippen auf die Flasche, dass die Wachstumsanimation von Alice (aliceChange) rückwärts abgespielt wird, wodurch sie kleiner wird. Dies wird erreicht, indem die Animation.playbackRate von aliceChange auf -1 gesetzt wird, so:

const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // play the bottle's animation
  drinking.play();
};

Es könnte aber auch durch Aufrufen von reverse() auf aliceChange erreicht werden, so:

const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.reverse();

  // play the bottle's animation
  drinking.play();
};

Spezifikationen

Specification
Web Animations # dom-animation-reverse

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Web Animations API
Animation für weitere Methoden und Eigenschaften, mit denen Sie die Animation von Webseiten steuern können.
Animation.pause() um eine Animation zu pausieren.
Animation.play() um eine Animation vorwärts zu bewegen.