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

Только для чтения Animation.playState свойство API веб-анимаций возвращает перечисление, описывающее состояние воспроизведения анимации.

idle

Текущее время анимации не определено, и нет ожидающих задач.

running

Анимация выполняется.

paused

Анимация приостановлена, и свойство Animation.currentTime не обновляется.

finished

Анимация достигла одной из границ, и свойство Animation.currentTime не обновляется.

Ранее API веб-анимаций определял значение pending для обозначения того, что некоторые асинхронные операции, такие как инициирование воспроизведения, ещё не завершились. Сейчас это указывается отдельным свойством Animation.pending.

В примере Игра «Растущая/Уменьшающаяся Алиса» игроки могут получить финал с Алисой, плачущей в луже слёз. В игре из соображений производительности слёзы должны анимироваться только когда они видны. Поэтому они должны быть приостановлены, как только анимированы, следующим образом:

// Setting up the tear animations

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // randomized for each tear
    duration: getRandomMsRange(2000, 6000), // randomized for each tear
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// Play the tears falling when the ending needs to be shown.

tears.forEach((el) => {
  el.play();
});

// Reset the crying tears animations and pause them.

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});

• API веб-анимаций
• Animation для других методов и свойств, которые можно использовать для управления анимацией веб-страницы.