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()使动画向前播放。