这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
updatePlaybackRate()
方法在
Web 动画 API
's
动画
Interface sets the speed of an animation after first synchronizing its playback position.
In some cases, an animation may run on a separate thread or process and will continue updating even while long-running JavaScript delays the main thread. In such a case, setting the
playbackRate
on the animation directly may cause the animation's playback position to jump since its playback position on the main thread may have drifted from the playback position where it is currently running.
updatePlaybackRate()
is an asynchronous method that sets the speed of an animation after synchronizing with its current playback position, ensuring that the resulting change in speed does not produce a sharp jump. After calling
updatePlaybackRate()
the animation's
playbackRate
is
not
immediately updated. It will be updated once the animation's
ready
promise is resolved.
Animation.updatePlaybackRate(2);
None.
A speed selector component would benefit from smooth updating of
updatePlaybackRate()
, as demonstrated below:
speedSelector.addEventListener('input', evt => {
cartoon.updatePlaybackRate(parseFloat(evt.target.value));
cartoon.ready.then(() => {
console.log(`Playback rate set to ${cartoon.playbackRate}`);
});
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'updatePlaybackRate()' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
updatePlaybackRate
|
Chrome 不支持 No | Edge 不支持 No | Firefox 60 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 60 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
Animation.playbackRate
— read back the current playback rate or set it in a synchronous manner.
Animation.reverse()
— invert the playback rate and restart playback if necessary.
动画
— contains other methods and properties you can use to control web page animation.
动画