Animation: updatePlaybackRate() メソッド

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

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

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

updatePlaybackRate(playbackRate)

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