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()
Parameter
Keine.
Rückgabewert
Keiner (undefined
).
Beispiele
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.