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

浏览器兼容性

另见