Анимация: свойство playbackRate

Свойство Animation.playbackRate API веб-анимаций возвращает или задаёт скорость воспроизведения анимации.

Анимации имеют скорость воспроизведения, которая обеспечивает коэффициент масштабирования от скорости изменения значений времени анимации timeline до текущего времени анимации. Скорость воспроизведения по умолчанию 1.

Принимает числовое значение, которое может быть 0, отрицательным или положительным. Отрицательные значения изменяют направление анимации. Значение представляет собой коэффициент масштабирования, поэтому, например, значение 2 удвоит скорость воспроизведения.

В примере игры «Растущая/Уменьшающаяся Алиса» нажатие на бутылку заставляет анимацию роста Алисы (aliceChange) меняться на противоположное, заставляя её уменьшаться:

const shrinkAlice = () => {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

// On tap or click, Alice will shrink.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);

Напротив, нажатие на торт заставляет её «расти», снова воспроизводя aliceChange вперёд:

const growAlice = () => {
  aliceChange.playbackRate = 1;
  aliceChange.play();
};

// On tap or click, Alice will grow.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

В другом примере, игра «Бег Красной Королевы», Алиса и Красная Королева постоянно замедляются:

setInterval(() => {
  // Make sure the playback rate never falls below .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);

• API веб-анимаций
• Animation