动画：reverse() 方法

基线 广泛可用

此功能已得到良好确立，并且可在许多设备和浏览器版本中使用。它自以下时间起在各个浏览器中可用： 2020 年 3 月.

Animation.reverse() 方法是 Animation 接口的一部分，用于反转播放方向，这意味着动画将在其开头结束。如果在未播放的动画上调用，则整个动画将倒放。如果在暂停的动画上调用，则动画将反向继续。

语法

js
reverse()

参数

无。

返回值

无 (undefined)。

示例

在 Alice 生长/缩小游戏 示例中，点击或轻触瓶子会导致 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅