Animation: updatePlaybackRate() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年3月⁩.

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

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

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

構文

updatePlaybackRate(playbackRate)

引数

playbackRate: 設定する新しい速度。正の値（アニメーションを速くしたり遅くしたりする）、負の値（逆再生する）、またはゼロ（アニメーションを効果的に一時停止する）です。

返値

なし (undefined)。

例

スピードセレクターコンポーネントは、下記のように updatePlaybackRate() のスムーズな更新が良いでしょう。

speedSelector.addEventListener("input", (evt) => {
  cartoon.updatePlaybackRate(parseFloat(evt.target.value));
  cartoon.ready.then(() => {
    console.log(`Playback rate set to ${cartoon.playbackRate}`);
  });
});