Web Animations API

Web Animations API (WAAPI) позволяет создавать анимации и управлять ими непосредственно из JavaScript, без использования внешних библиотек. Анимации выполняются на собственном компоновщике браузера — том же движке, что лежит в основе CSS-анимаций — поэтому вы получаете плавное аппаратно-ускоренное движение в сочетании с программным управлением, характерным для JavaScript-анимаций: вы можете воспроизводить, ставить на паузу, обращать, ускорять, перематывать и выстраивать анимации в цепочки во время выполнения программы.

На этой странице рассмотрены два ключевых элемента: метод element.animate(), запускающий анимацию, и объект Animation, который он возвращает и который используется для управления воспроизведением и определения момента завершения анимации.

`element.animate(keyframes, options)`

Каждая анимация WAAPI начинается с одного вызова:

const animation = element.animate(keyframes, options);

keyframes — визуальные состояния, через которые проходит элемент. Принимается в двух форматах:
- array объектов, где каждый объект — один кадр: [{ opacity: 0 }, { opacity: 1 }]
- object массивов, где каждое свойство перечисляет свои значения на протяжении временной шкалы: { opacity: [0, 1] }
options — либо число (продолжительность в миллисекундах), либо объект настроек, например { duration: 1000, easing: "ease-in-out", fill: "forwards" }.

Вызов возвращает объект Animation и сразу начинает воспроизведение. Имена свойств задаются в camelCase-форме CSS (backgroundColor, а не background-color).

Простая анимация с 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). По завершении анимации пользователю отображается сообщение. Это иллюстрирует базовое управление анимацией и обработку событий.

Параметры синхронизации

Второй аргумент animate() определяет то, как анимация выполняется во времени. Наиболее полезные параметры:

Параметр	Назначение
`duration`	Длительность одной итерации в миллисекундах (или строка времени CSS, например `"1s"`).
`iterations`	Количество повторений. Используйте `Infinity` для бесконечного цикла.
`easing`	Кривая ускорения: `"linear"`, `"ease"`, `"ease-in-out"` или `cubic-bezier(...)`.
`fill`	Какое состояние сохранять за пределами активного диапазона. `"forwards"` фиксирует последний кадр; `"backwards"` применяет первый кадр во время `delay`; `"both"` делает оба.
`delay`	Миллисекунды ожидания перед началом.
`direction`	`"normal"`, `"reverse"` или `"alternate"` (отскок туда-обратно при каждой итерации).

Без fill: "forwards" элемент мгновенно возвращается к исходным стилям в момент завершения анимации — распространённый источник путаницы. Устанавливайте это значение, когда конечный кадр должен оставаться зафиксированным.

Объект `Animation`

element.animate() возвращает экземпляр Animation. Это дескриптор, который используется после запуска анимации:

Член	Назначение
`play()`	Запустить или возобновить воспроизведение.
`pause()`	Заморозить в текущей точке.
`reverse()`	Воспроизвести от текущей точки назад к началу.
`finish()`	Перейти сразу к концу (или к началу, если направление обратное).
`cancel()`	Остановить и удалить все эффекты, очистив применённые стили.
`finished`	Promise, которое разрешается по завершении анимации — идеально для выстраивания цепочек с `await`.
`playState`	`"running"`, `"paused"`, `"finished"` или `"idle"`.
`playbackRate`	Множитель скорости; `2` — двойная скорость, `-1` — воспроизведение назад.

const anim = box.animate({ transform: ["translateX(0)", "translateX(200px)"] }, 1000);

anim.pause();          // hold in place
anim.playbackRate = 2; // play twice as fast when resumed
anim.play();

anim.finished.then(() => console.log(anim.playState)); // "finished"

Поскольку finished является настоящим Promise, вы можете использовать await, чтобы выполнить код только после завершения движения или выстроить анимации в чистую цепочку — как в следующем примере.

Сложные анимации и последовательности

Для более сложных анимаций и последовательностей можно объединять несколько анимаций с помощью промисов и 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 и CSS-анимации

Оба подхода работают на одном компоновщике, поэтому производительность сопоставима. Разница — в управлении:

Используйте CSS-анимации, когда движение носит декларативный и статичный характер — эффект при наведении, индикатор загрузки, анимация появления, которую можно полностью определить в таблице стилей.
Используйте Web Animations API, когда анимация зависит от данных во время выполнения или действий пользователя: динамические значения ключевых кадров, пауза и возобновление по требованию, выстраивание нескольких анимаций в последовательность или реакция на завершение анимации через промис finished.

Удобным промежуточным решением является хранение стилей в классах — см. Стили и классы — и использование WAAPI только для переходов, требующих программного управления.

Заключение

Web Animation API открывает перед веб-разработчиками возможности создавать увлекательные и интерактивные анимации, повышающие качество пользовательского опыта на сайтах и в веб-приложениях. Освоив этот API, вы сможете создавать анимации — от простых переходов до сложных последовательностей — добавляя динамичное и захватывающее измерение к вашим веб-дизайнам. Будь то анимация пользовательских интерфейсов, добавление визуальных эффектов или создание элементов интерактивного повествования, Web Animations API предоставляет всё необходимое, чтобы воплотить ваши творческие идеи в жизнь в вебе.

Практика

Какие возможности предоставляет JavaScript Animation API?

Позволяет создавать анимации в вебе.Помогает решать математические уравнения.API используется для создания анимаций на основе JavaScript в HTML.Позволяет совершать телефонные звонки с помощью JavaScript.Поддерживает только анимации на основе CSS.

Web Animations API

element.animate(keyframes, options)

Простая анимация с Web Animations API

Параметры синхронизации

Объект Animation

Сложные анимации и последовательности

Управление анимациями

Web Animations API и CSS-анимации

Заключение

Практика

`element.animate(keyframes, options)`

Объект `Animation`