Функция animate

Функция animate является центральным механизмом библиотеки Motion One, через который создаются, управляются и синхронизируются анимации в браузере. Она работает поверх Web Animations API и предоставляет более компактный и выразительный интерфейс для описания переходов состояний элементов.

Сигнатура и общая форма вызова

Основная форма функции:

animate(target, keyframes, options)

Параметры:

  • target — DOM-элемент, список элементов или CSS-селектор
  • keyframes — описание состояний анимации
  • options — настройки воспроизведения

Функция возвращает объект управления анимацией, через который можно управлять проигрыванием, паузой и состоянием.

Целевые элементы (target)

В качестве цели анимации могут использоваться различные типы значений:

animate(document.querySelector(".box"), {...}, {...})

animate(".box", {...}, {...})

animate(document.querySelectorAll(".box"), {...}, {...})

Поддержка CSS-селекторов позволяет избегать ручного выбора элементов, а NodeList автоматически разворачивается в набор целей.

Keyframes — описание состояний

Keyframes определяют изменение свойств во времени. В Motion One используется декларативный формат, близкий к CSS-анимациям, но с расширенной гибкостью.

Простая форма keyframes

animate(".box", 
  { x: 300, opacity: 0 },
  { duration: 1 }
)

В этом случае библиотека интерпретирует начальное состояние автоматически, а конечное задаётся явно.

Массивные keyframes

Для более сложных переходов используются массивы значений:

animate(".box", 
  { x: [0, 100, 200, 0] },
  { duration: 2 }
)

Каждое значение массива соответствует ключевой точке анимации, равномерно распределённой по времени.

Множественные свойства в keyframes

Одновременно можно анимировать несколько свойств:

animate(".box", {
  x: [0, 200],
  opacity: [1, 0],
  scale: [1, 1.5, 1]
}, {
  duration: 1.5
})

Каждое свойство может иметь собственное количество ключевых точек, что позволяет создавать сложные синхронные переходы.

Поддерживаемые типы значений

Motion One автоматически обрабатывает различные типы данных:

  • числа (opacity: 0 → 1)
  • пиксели (x: 100)
  • поворот (rotate: 180)
  • проценты (x: "50%")
  • цвета (backgroundColor: "#ff0000")

Интерполяция выполняется через Web Animations API с дополнительной нормализацией значений.

Опции анимации

duration

Продолжительность анимации в секундах:

animate(".box", { x: 200 }, { duration: 0.8 })

delay

Задержка перед стартом:

animate(".box", { x: 200 }, { delay: 0.3 })

easing

Кривая изменения скорости:

animate(".box", { x: 200 }, { easing: "ease-in-out" })

Также поддерживаются cubic-bezier значения:

easing: [0.42, 0, 0.58, 1]

repeat / iterations

Повтор анимации:

animate(".box", { x: 200 }, { repeat: Infinity })

или

animate(".box", { x: 200 }, { iterations: 3 })

direction

Направление воспроизведения:

  • "normal"
  • "reverse"
  • "alternate"
  • "alternate-reverse"
animate(".box", { x: 200 }, { direction: "alternate" })

fill

Поведение после завершения:

  • "forwards"
  • "backwards"
  • "both"
  • "none"
animate(".box", { x: 200 }, { fill: "forwards" })

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

Функция animate возвращает объект анимации с методами управления.

play

const animation = animate(".box", { x: 200 });

animation.play();

pause

animation.pause();

stop

animation.stop();

finish

Мгновенное завершение анимации:

animation.finish();

seek

Перемещение к определённому времени:

animation.time = 0.5;

или через прогресс:

animation.progress = 0.5;

События жизненного цикла

Объект анимации поддерживает реакцию на ключевые события:

animation.onfin ish = () => {
  console.log("завершено");
};

Дополнительно доступны:

  • oncancel
  • onupdate

Анимация нескольких элементов

При передаче списка элементов каждый из них анимируется синхронно:

animate(".item", { opacity: 0 }, { duration: 0.5 })

Для независимой обработки требуется явное разделение:

document.querySelectorAll(".item").forEach(el => {
  animate(el, { opacity: 0 }, { duration: 0.5 });
});

Сложные последовательности значений

Motion One позволяет комбинировать разные типы keyframes:

animate(".box", {
  x: [0, 100, 50, 200],
  rotate: [0, 90, 45, 180],
  opacity: [1, 0.5, 1]
}, {
  duration: 2,
  easing: "ease-in-out"
})

Анимация трансформаций

Свойства трансформации объединяются в единый CSS transform:

animate(".box", {
  x: 100,
  y: 50,
  rotate: 45,
  scale: 1.2
})

Под капотом формируется оптимизированная строка transform без конфликтов между свойствами.

Работа с цветами

Поддерживаются различные форматы:

animate(".box", {
  backgroundColor: ["#ff0000", "#00ff00"],
  color: ["rgb(0,0,0)", "rgb(255,255,255)"]
})

Интерполяция выполняется автоматически независимо от формата входных значений.

Анимация числовых значений без единиц

Числовые свойства интерполируются напрямую:

animate(".box", {
  opacity: [0, 1],
  scale: [0.5, 1]
})

Использование относительных значений

Допускаются относительные изменения:

animate(".box", {
  x: "+=100"
})

или

animate(".box", {
  rotate: "-=45"
})

Синхронизация анимаций

Несколько анимаций могут запускаться одновременно:

animate(".box", { x: 200 }, { duration: 1 });
animate(".circle", { scale: 1.5 }, { duration: 1 });

Для координации используется единый временной контекст через управление задержками:

animate(".box", { x: 200 }, { delay: 0 });
animate(".circle", { scale: 1.5 }, { delay: 0.2 });

Обработка завершения

Завершение анимации может использоваться для цепочек переходов:

animate(".box", { x: 200 }, { duration: 1 }).onfin ish = () => {
  animate(".box", { opacity: 0 }, { duration: 0.5 });
};

Поведение при повторном вызове

При повторном вызове animate на одном элементе предыдущая анимация может быть заменена новой, если не сохранён её объект управления.

animate(".box", { x: 100 });
animate(".box", { x: 200 });

Второй вызов перезапишет первый.

Интеграция с динамическими значениями

Keyframes могут вычисляться на лету:

const distance = 300;

animate(".box", {
  x: [0, distance]
})

Особенности исполнения через Web Animations API

Motion One транслирует параметры animate в native WAAPI-анимации, что обеспечивает:

  • аппаратное ускорение
  • минимальные reflow/repain
  • оптимизацию через compositor thread

Ограничения и поведение по умолчанию

При отсутствии явного duration используется стандартное значение:

duration: 0.3

При отсутствии easing применяется:

ease: "ease"

Применение анимации к SVG-элементам

Поддерживаются SVG атрибуты:

animate("circle", {
  r: [10, 50],
  opacity: [0, 1]
})

Анимация с процентными значениями

Проценты интерполируются относительно текущего контейнера:

animate(".box", {
  x: ["0%", "100%"]
})

Вложенные сценарии анимации

Сложные последовательности реализуются через цепочки:

const a = animate(".box", { x: 200 }, { duration: 1 });

a.onfin ish = () => {
  animate(".box", { rotate: 180 }, { duration: 1 });
};

Поведение при отмене

При вызове stop происходит немедленная остановка без завершения перехода:

const a = animate(".box", { x: 200 });

a.stop();

Событие oncancel срабатывает при отмене:

a.oncan cel = () => {
  console.log("анимация отменена");
};
Оглавление