Animation: playbackRate プロパティ

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月⁩.

Animation.playbackRate はウェブアニメーション API で、アニメーションの再生レートを返すしたり設定したりします。

アニメーションには再生時間があり、アニメーションの timeline 時刻の変化率からアニメーションの現在時刻への変倍率を指定します。再生レートは初期値で 1 です。

値

0、負、正の値を取ります。負の値ではアニメーションが反転します。この値は変倍率で、例えば 2 の値を指定すると再生速度が 2 倍になります。

メモ: アニメーションの playbackRate を 0 に設定すると、アニメーションは一時停止します（ただし、playstate は必ずしも paused にはなりません）。

例

アリスの成長/縮小ゲームの例では、ボトルをクリックしたりタップしたりすると、アリスの成長アニメーション (aliceChange) が反転し、アリスが縮みます。

const shrinkAlice = () => { aliceChange.playbackRate = -1; aliceChange.play(); }; // タップまたはクリックすると、アリスは縮小する bottle.addEventListener("mousedown", shrinkAlice, false); bottle.addEventListener("touchstart", shrinkAlice, false);

反対に、ケーキをクリックすると、彼女は「成長」し、 aliceChange を再び前方に再生します。

const growAlice = () => { aliceChange.playbackRate = 1; aliceChange.play(); }; // タップまたはクリックすると、アリスが成長する cake.addEventListener("mousedown", growAlice, false); cake.addEventListener("touchstart", growAlice, false);

別の例として、赤の女王のレースゲームでは、アリスと赤の女王は常に減速しています。

setInterval(() => { // 再生レートが 0.4 を下回らないことを確認 if (redQueen_alice.playbackRate > 0.4) { redQueen_alice.playbackRate *= 0.9; } }, 3000);

しかし、それらをクリックしたりタップしたりすると、 playbackRate が倍増してスピードアップします。

const goFaster = () => { redQueen_alice.playbackRate *= 1.1; }; document.addEventListener("click", goFaster); document.addEventListener("touchstart", goFaster);