Animation: reverse() 方法

Baseline 已廣泛支援

此功能已經成熟,並可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 3 月⁩起,它已在各瀏覽器中推出。

Animation.reverse() 方法是 Animation 介面的方法,它會反轉播放方向,意味著動畫將從結尾播放到開始。如果對一個未播放的動畫呼叫,整個動畫將倒著播放。如果對一個已暫停的動畫呼叫,動畫將繼續反向播放。

語法

js
reverse()

引數

無。

返回值

無(undefined)。

示例

Growing/Shrinking Alice Game 示例中,點選或觸控瓶子會使 Alice 的生長動畫 (aliceChange) 反向播放,使她變小。這是透過將 aliceChangeAnimation.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

瀏覽器相容性

另見