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 March 2020.
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}`);
});
});
仕様書
Specification |
---|
Web Animations # dom-animation-updateplaybackrate |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ウェブアニメーション API
Animation.playbackRate
— 現在の再生レートを読み出すか、同期的に設定します。Animation.reverse()
— 再生レートを反転させ、必要に応じて再生を再開します。Animation
— ウェブページのアニメーションを制御するために使用することができる他のメソッドやプロパティがあります。