Animation: updatePlaybackRate() メソッド

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

updatePlaybackRate() はウェブアニメーション API の Animation インターフェイスのメソッドで、最初に再生位置を同期させた後に、アニメーションの速度を設定します。

場合によっては、アニメーションが別個のスレッドやプロセスで実行され、長時間実行される JavaScript がメインスレッドを遅延させている間も更新を続けることがあります。このような場合、アニメーションに playbackRate を直接設定すると、メインスレッドでの再生位置が現在動作している再生位置からずれることがあるため、アニメーションの再生位置がジャンプすることが発生する可能性があります。

updatePlaybackRate() は非同期メソッドで、アニメーションの現在の再生位置と同期した後に速度を設定します。 updatePlaybackRate() を呼び出した後、アニメーションの playbackRate はすぐには更新されません。アニメーションの ready プロミスが解決された時点で更新されます。

構文

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}`);
  });
});

仕様書

Specification
Web Animations
# dom-animation-updateplaybackrate

ブラウザーの互換性

BCD tables only load in the browser

関連情報