JS властивість CSSStyleDeclaration.animationPlayState

Загальний опис

animationPlayState є властивістю CSS, яка в JavaScript використовується для контролю стану відтворення анімації для конкретного HTML-елемента. Ця властивість дозволяє призупиняти або відновлювати анімацію, що є дуже корисним для управління анімаціями у відповідь на певні дії користувача або події на веб-сторінці. Основні значення, які може приймати animationPlayState, — це running (для відтворення анімації) та paused (для призупинення анімації).

Для використання animationPlayState, необхідно спочатку визначити анімацію за допомогою правил CSS @keyframes, а потім застосувати її до елемента. Далі, за допомогою JavaScript, можна призупиняти або відновлювати анімацію в залежності від умов або подій.

Розглянемо базовий приклад використання animationPlayState. Припустимо, ми маємо HTML-елемент з id "box":

<div id="box"></div>

У CSS визначено анімацію для цього елемента:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Тепер, використовуючи JavaScript, ми можемо призупинити анімацію:

var box = document.getElementById('box');
box.style.animationPlayState = 'paused';

У цьому прикладі анімація spin буде призупинена на елементі box.

Щоб відновити анімацію, потрібно встановити значення animationPlayState в running:

box.style.animationPlayState = 'running';

Розглянемо більш складний приклад, де анімація призупиняється та відновлюється при натисканні кнопки:

<button id="toggleButton">Toggle Animation</button>
<div id="box"></div>

var box = document.getElementById('box');
var button = document.getElementById('toggleButton');

button.addEventListener('click', function() {
  if (box.style.animationPlayState === 'paused') {
    box.style.animationPlayState = 'running';
  } else {
    box.style.animationPlayState = 'paused';
  }
});

У цьому прикладі при натисканні кнопки Toggle Animation анімація елемента box буде чергуватися між станами paused та running.

Властивість animationPlayState також може бути використана для управління анімаціями у відповідь на інші події, такі як наведення миші. Наприклад, можна призупиняти анімацію при наведенні миші на елемент:

<div id="box"></div>

var box = document.getElementById('box');

box.addEventListener('mouseover', function() {
  box.style.animationPlayState = 'paused';
});

box.addEventListener('mouseout', function() {
  box.style.animationPlayState = 'running';
});

У цьому випадку анімація буде призупинена при наведенні миші на елемент box і відновлена при знятті наведення.

Ще один приклад демонструє, як можна керувати анімацією на основі інших дій користувача, таких як прокручування сторінки:

<div id="box"></div>

var box = document.getElementById('box');

window.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    box.style.animationPlayState = 'paused';
  } else {
    box.style.animationPlayState = 'running';
  }
});

У цьому прикладі анімація елемента box буде призупинена, якщо користувач прокрутить сторінку більше ніж на 100 пікселів вниз, і відновлена, якщо прокрутка буде менше 100 пікселів.

Завдяки властивості animationPlayState, розробники мають можливість точно контролювати, коли анімація повинна зупинятися або відновлюватися. Це особливо корисно для створення інтерактивних та динамічних веб-сторінок, де поведінка анімацій може змінюватися у відповідь на дії користувача або інші події. Ця властивість робить анімації більш гнучкими та адаптивними до різних сценаріїв використання.

Синтаксис

element.style.animationPlayState

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Отримуємо елемент
const myElement = document.getElementById('myElement');

// Запускаємо анімацію
myElement.style.animationName = 'fadeIn';

// Призупиняємо анімацію після 2 секунд
setTimeout(() => {
  myElement.style.animationPlayState = 'paused';
}, 2000);

<button id="playPauseButton">Призупинити</button>
<div id="animatedElement"></div>


<script>
// Отримуємо елементи
const animatedElement = document.getElementById('animatedElement');
const playPauseButton = document.getElementById('playPauseButton');

// Запускаємо анімацію
animatedElement.style.animationName = 'moveAnimation';
animatedElement.style.animationDuration = '2s';
animatedElement.style.animationIterationCount = 'infinite';

// Функція для призупинення/відновлення анімації
function toggleAnimation() {
  if (animatedElement.style.animationPlayState === 'paused') {
    animatedElement.style.animationPlayState = 'running';
    playPauseButton.textContent = 'Призупинити';
  } else {
    animatedElement.style.animationPlayState = 'paused';
    playPauseButton.textContent = 'Відновити';
  }
}

// Додаємо обробник події для кнопки
playPauseButton.addEventListener('click', toggleAnimation);
</script>