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