动画：playbackRate 属性

基线 广泛可用

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

Animation.playbackRate 属性是 Web 动画 API 的一部分，用于返回或设置动画的播放速率。

动画具有一个播放速率，它提供了一个缩放因子，用于将动画的 timeline 时间值的改变速率转换为动画的当前时间。播放速率最初为 1。

值

接受一个可以为 0、负数或正数的数字。负值会反转动画。该值是一个缩放因子，例如，值为 2 会使播放速率加倍。

注意：将动画的 playbackRate 设置为 0 会有效地暂停动画（但是，其 playstate 不一定会变为 paused）。

示例

在 Alice 生长/缩小游戏 示例中，点击或轻触瓶子会导致 Alice 的生长动画 (aliceChange) 反转，从而使她缩小。

js
const shrinkAlice = () => {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);

相反，点击蛋糕会导致她“生长”，并再次向前播放 aliceChange。

js
const growAlice = () => {
  aliceChange.playbackRate = 1;
  aliceChange.play();
};

// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

在另一个示例中，红皇后赛跑游戏 中，爱丽丝和红皇后一直在不断减速。

js
setInterval(() => {
  // Make sure the playback rate never falls below .4

  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.playbackRate *= 0.9;
  }
}, 3000);

但是，点击或轻触它们会导致它们通过乘以它们的 playbackRate 来加速。

js
const goFaster = () => {
  redQueen_alice.playbackRate *= 1.1;
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);

规范

规范
Web 动画
# dom-animation-playbackrate

浏览器兼容性

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

另请参阅