Animation：updatePlaybackRate() 方法
updatePlaybackRate() 方法是 Web Animations API 中的 Animation 接口的一部分，用于在首次同步其播放位置后设置动画的速度。
在某些情况下，动画可能在一个单独的线程或进程上运行，即使长时间运行的 JavaScript 延迟了主线程，它也会继续更新。在这种情况下，直接在动画上设置 playbackRate 可能会导致动画的播放位置发生跳跃，因为主线程上的播放位置可能与其当前正在运行的播放位置发生漂移。
updatePlaybackRate() 是一个异步方法，它会在与当前播放位置同步后设置动画的速度，确保由此产生的速度变化不会产生剧烈的跳跃。调用 updatePlaybackRate() 后，动画的 playbackRate 不会立即更新。一旦动画的 ready Promise 解析，它就会更新。
语法
js
updatePlaybackRate(playbackRate)
参数
playbackRate-
要设置的新速度。这可以是一个正数（用于加速或减慢动画）、一个负数（用于向后播放动画）或零（用于有效地暂停动画）。
返回值
无（undefined）。
示例
如以下示例所示，一个速度选择器组件将从 updatePlaybackRate() 的平滑更新中受益。
js
speedSelector.addEventListener("input", (evt) => {
cartoon.updatePlaybackRate(parseFloat(evt.target.value));
cartoon.ready.then(() => {
console.log(`Playback rate set to ${cartoon.playbackRate}`);
});
});
规范
| 规范 |
|---|
| Web 动画 # dom-animation-updateplaybackrate |
浏览器兼容性
加载中…
另见
- Web Animations API
Animation.playbackRate— 读回当前播放速率或以同步方式设置它。Animation.reverse()— 反转播放速率，并在必要时重新启动播放。Animation— 包含您可以用来控制网页动画的其他方法和属性。