Animation:updatePlaybackRate() 方法

Baseline 已廣泛支援

此功能已經成熟,並可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 3 月⁩起,它已在各瀏覽器中推出。

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

瀏覽器相容性

另見