Animation: reverse()-Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.
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
| Spezifikation |
|---|
| Web Animations # dom-animation-reverse |
Browser-Kompatibilität
Siehe auch
- Web Animations API
Animationfü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.