Синтаксис и базовые параметры

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

Главная функция:

animate(target, keyframes, options)

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

Второй аргумент задаёт ключевые кадры. В простейшем виде используется объект, описывающий конечное состояние:

animate(".box", { opacity: 1, transform: "translateX(200px)" })

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

animate(".box", [
  { opacity: 0, transform: "translateX(0px)" },
  { opacity: 1, transform: "translateX(200px)" },
  { opacity: 0.5, transform: "translateX(100px)" }
])

Третий аргумент определяет параметры проигрывания анимации и является ключевым механизмом управления динамикой.

Структура параметров анимации

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

duration

Параметр задаёт длительность анимации в миллисекундах.

animate(".box", { x: 300 }, { duration: 800 })

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

delay

Задержка перед стартом анимации.

animate(".box", { opacity: 1 }, { delay: 300 })

Задержка не блокирует поток выполнения JavaScript, а лишь смещает момент начала интерполяции.

easing

Параметр, определяющий кривую изменения значения во времени. Поддерживаются строки и функции.

animate(".box", { scale: 1.2 }, { easing: "ease-in-out" })

Также допускается использование кастомных кривых Безье и функций:

animate(".box", { x: 200 }, { easing: [0.42, 0, 0.58, 1] })

Кривые интерполяции напрямую влияют на ощущение физики движения и визуальную динамику интерфейса.

repeat

Управляет количеством повторений анимации.

animate(".box", { rotate: 360 }, { repeat: 2 })

Значение Infinity задаёт бесконечный цикл воспроизведения.

animate(".loader", { rotate: 360 }, { repeat: Infinity })

direction

Определяет направление повторов:

  • normal — стандартное воспроизведение
  • reverse — обратное направление
  • alternate — чередование прямого и обратного движения
animate(".box", { x: 200 }, { repeat: 3, direction: "alternate" })

Работа с transform-параметрами

Одной из ключевых особенностей является возможность передавать трансформации как отдельные числовые значения без ручного формирования строк transform.

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

Внутри библиотека автоматически агрегирует трансформации в корректное CSS-значение, что устраняет необходимость ручной конкатенации.

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

  • x, y, z
  • scale, scaleX, scaleY
  • rotate, rotateX, rotateY, rotateZ

Такой подход уменьшает количество ошибок и делает анимацию декларативной.

Ключевые кадры и интерполяция значений

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

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

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

Нормализация значений и единицы измерения

Одним из механизмов упрощения является автоматическая обработка единиц измерения. Числовые значения интерпретируются в контексте свойства:

  • x, y, rotate, scale — без единиц
  • CSS-значения могут задаваться строками
animate(".box", { width: "300px", opacity: 0.5 })

Если единица не указана, библиотека стремится привести значение к наиболее безопасному варианту интерполяции.

Поведение временной шкалы

Внутренне библиотека синхронизируется с высокоточным таймером браузера и использует модель, совместимую с Web Animations API. Это позволяет избегать лишних вычислений и обеспечивает стабильность кадровой частоты.

Временные параметры преобразуются в прогресс анимации, где значение 0 соответствует началу, а 1 — завершению.

Управление анимацией через объект результата

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

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

Доступные методы:

  • play() — запуск
  • pause() — пауза
  • stop() — остановка
  • finish() — мгновенное завершение
  • reverse() — смена направления

Такой интерфейс позволяет строить сложные сценарии без дополнительных зависимостей.

Композиция свойств и приоритеты

При одновременной анимации одного и того же свойства учитывается последний вызов. Это поведение важно при построении цепочек анимаций.

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

Финальным состоянием станет 200, поскольку второе объявление перекрывает первое.

Для предотвращения конфликтов используется разделение по экземплярам анимации или управление через возвращаемые контроллеры.

Параметры с нестандартными значениями

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

animate(".box", {
  x: (i) => i * 50,
  opacity: (i) => 1 - i * 0.1
})

Индекс элемента передаётся автоматически, что упрощает создание каскадных эффектов без циклов.

Интеграция с системой Motion One

Библиотека Motion One разработана как лёгкий слой поверх нативных механизмов анимации браузера и ориентирована на минимальный runtime overhead. Архитектура построена таким образом, чтобы большая часть вычислений выполнялась на уровне браузерного движка, а JavaScript использовался только для декларации состояния.

Связь с экосистемой Framer проявляется в ориентации на интерфейсную анимацию и интеграцию с современными UI-подходами, где важна предсказуемость поведения и низкая задержка рендера.

Контекст выполнения и оптимизация

Анимации группируются и обрабатываются в рамках одного кадра, что снижает количество layout recalculations. Изменения свойств синхронизируются с фазой render pipeline браузера, что позволяет избегать лишних reflow и repaint операций.

Использование числовых значений вместо строковых трансформаций также уменьшает нагрузку на парсер CSS и ускоряет интерполяцию значений.

Событийная модель

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

animation.onfin ish = () => {}
animation.oncan cel = () => {}

Эти события соответствуют жизненному циклу анимации и позволяют синхронизировать логику интерфейса с визуальными изменениями.

Структура синтаксиса Motion One формирует единый декларативный слой, в котором управление движением выражается через компактные параметры и предсказуемую модель интерполяции значений, минимизируя необходимость низкоуровневого управления CSS и таймингами.

Оглавление