Animation: reverse() 方法
Animation.reverse() 方法是 Animation 介面的方法,它會反轉播放方向,意味著動畫將從結尾播放到開始。如果對一個未播放的動畫呼叫,整個動畫將倒著播放。如果對一個已暫停的動畫呼叫,動畫將繼續反向播放。
語法
js
reverse()
引數
無。
返回值
無(undefined)。
示例
在 Growing/Shrinking Alice Game 示例中,點選或觸控瓶子會使 Alice 的生長動畫 (aliceChange) 反向播放,使她變小。這是透過將 aliceChange 的 Animation.playbackRate 設定為 -1 來實現的,如下所示:
js
const shrinkAlice = () => {
// play Alice's animation in reverse
aliceChange.playbackRate = -1;
aliceChange.play();
// play the bottle's animation
drinking.play();
};
但也可以透過呼叫 aliceChange 上的 reverse() 來實現,如下所示:
js
const shrinkAlice = () => {
// play Alice's animation in reverse
aliceChange.reverse();
// play the bottle's animation
drinking.play();
};
規範
| 規範 |
|---|
| Web 動畫 # dom-animation-reverse |
瀏覽器相容性
載入中…
另見
- Web Animations API
- 用於控制網頁動畫的其他方法和屬性的
Animation。 - 使用
Animation.pause()暫停動畫。 - 使用
Animation.play()使動畫向前播放。