Web Animations API
Эффективное использование Web Animations API
Web Animations API предоставляет мощный и гибкий способ создания анимаций непосредственно в браузере без необходимости использования дополнительных библиотек. Она позволяет разработчикам анимировать HTML-элементы и управлять анимациями программно. Этот API объединяет возможности CSS-анимаций и переходов с функциональностью JavaScript, предлагая больший контроль и дополнительные функции, такие как синхронизация анимаций, управление их воспроизведением, а также возможность динамического изменения и композиции анимаций.
Теперь, когда мы разобрали, что такое Web Animations API, её преимущества, причины выбора, области применения и решаемые проблемы, давайте перейдём к тому, как эффективно использовать этот API, чтобы оживить ваши веб-дизайны.
Базовая анимация с помощью Web Animations API
Создание базовой анимации с помощью Web Animations API включает определение ключевых кадров анимации, указание целевого элемента и настройку параметров анимации. Вот упрощённый пример анимации прозрачности элемента:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Opacity Animation</title>
</head>
<body>
<h1>Simple Opacity Animation</h1>
<div
class="animated-element"
style="width: 100px; height: 100px; background-color: blue"
></div>
<button style="margin-top: 15px" onclick="startAnimation()">
Start Animation
</button>
<p id="message"></p>
<script>
let animation;
function startAnimation() {
const element = document.querySelector(".animated-element");
const keyframes = [
{ opacity: 0, offset: 0 },
{ opacity: 1, offset: 1 },
];
const options = {
duration: 1000,
easing: "ease-in-out",
iterations: 1,
fill: "forwards",
};
// Create and play the animation
animation = element.animate(keyframes, options);
// Handle animation events
animation.onfinish = () => {
document.getElementById("message").textContent =
"Animation finished!";
};
animation.oncancel = () => {
document.getElementById("message").textContent = "Animation reset.";
};
}
// Resets the animation
function resetAnimation() {
if (animation) {
animation.cancel();
}
startAnimation(); // Restart the animation
}
</script>
</body>
</html>Этот пример демонстрирует, как анимировать прозрачность элемента с помощью Web Animations API. Кнопка запускает анимацию, которая плавно изменяет прозрачность элемента от невидимой (0) до полностью видимой (1). После завершения анимации пользователю отображается сообщение. Это иллюстрирует базовое управление анимацией и обработку событий.
Сложные анимации и последовательности
Для более сложных анимаций и последовательностей вы можете объединять несколько анимаций в цепочку, используя промисы и async/await. Вот пример цепочки анимаций:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animation Sequence</title>
</head>
<body>
<h1>Animation Sequence</h1>
<div
class="animated-element"
style="width: 100px; height: 100px; background-color: red"
></div>
<button style="margin-top: 15px" onclick="animateSequence()">
Start Animation
</button>
<p id="message"></p>
<script>
async function animateSequence() {
document.getElementById("message").textContent = ""; // Clear message
const element = document.querySelector(".animated-element");
const animation1 = element.animate(
{ opacity: [0, 1], transform: ["scale(0)", "scale(1)"] },
{ duration: 1000, easing: "ease-in-out" }
);
await animation1.finished;
const animation2 = element.animate(
{ opacity: [1, 0], transform: ["scale(1)", "scale(0)"] },
{ duration: 1000, easing: "ease-in-out" }
);
await animation2.finished;
document.getElementById("message").textContent = "Sequence complete!";
}
</script>
</body>
</html>В этом примере первая анимация увеличивает прозрачность элемента и масштабирует его, а по завершении вторая анимация плавно скрывает элемент и уменьшает его масштаб. В конце отображается сообщение о завершении, демонстрирующее последовательное объединение анимаций.
Управление и контроль анимаций
Web Animations API также предоставляет методы для управления и контроля анимаций. Например, вы можете приостановить, возобновить или отменить анимацию. Вот пример того, как приостановить и возобновить анимацию:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Animation Play/Pause</title>
</head>
<body>
<h1>Toggle Play/Pause Animation</h1>
<div
class="animated-element"
style="width: 100px; height: 100px; background-color: green"
></div>
<button style="margin-top: 15px" onclick="togglePlayPause()">Toggle Play/Pause</button>
<p id="message"></p>
<script>
let animation;
document.addEventListener("DOMContentLoaded", function () {
const element = document.querySelector(".animated-element");
animation = element.animate(
{ opacity: [0, 1] },
{
duration: 1000,
easing: "ease-in-out",
iterations: Infinity,
direction: "alternate"
}
);
animation.pause(); // Start paused
animation.onfinish = () => {
document.getElementById("message").textContent =
"Animation finished!";
};
});
function togglePlayPause() {
if (animation.playState === "running") {
animation.pause();
document.getElementById("message").textContent = "Animation paused";
} else {
animation.play();
document.getElementById("message").textContent = "Animation playing";
}
}
</script>
</body>
</html>Этот пример показывает, как переключать состояния воспроизведения и паузы анимации по клику. Начальная анимация заставляет элемент непрерывно появляться и исчезать. Нажатие кнопки позволяет пользователю приостановить анимацию, если она воспроизводится, или возобновить её, если она на паузе. Сообщения указывают текущее состояние анимации, улучшая взаимодействие с пользователем и контроль над состояниями анимации.
Заключение
Web Animations API даёт веб-разработчикам возможность создавать захватывающие и интерактивные анимации, которые улучшают пользовательский опыт на сайтах и веб-приложениях. Освоив этот API, вы сможете создавать анимации — от простых переходов до сложных последовательностей, добавляя динамичную и увлекательную составляющую вашим веб-дизайнам. Независимо от того, анимируете ли вы пользовательские интерфейсы, добавляете визуальные эффекты или создаёте интерактивные элементы повествования, Web Animations API предоставляет необходимые инструменты для воплощения ваших творческих идей в вебе.
Практика
Какие возможности предоставляет JavaScript Animation API?