Направление распространения

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

Базовое направление: от начального к конечному состоянию

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

  • стартовое состояние (initial)
  • конечное состояние (target)
import { animate } from "motion"

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

По умолчанию движение происходит от текущего состояния элемента к указанному конечному значению. Если элемент уже имеет заданные стили, Motion One интерполирует значения между текущим и целевым состоянием.

При обратной необходимости достаточно поменять порядок значений:

animate(".box",
  { opacity: 0, transform: "translateX(0px)" },
  { duration: 0.8 }
)

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

Управление направлением через keyframes

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

animate(".box",
  {
    transform: [
      "translateX(0px)",
      "translateX(150px)",
      "translateX(100px)"
    ]
  },
  { duration: 1.2 }
)

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

Особенность Motion One заключается в автоматической интерполяции между значениями, включая:

  • числовые свойства
  • цвета
  • трансформации
  • комплексные CSS-значения

Инверсия направления: reverse-поведение

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

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

Здесь направление обратное относительно стандартного движения.

Также возможно динамическое переключение направления через изменение параметров анимации:

  • повторный вызов animate с обратными значениями
  • управление через состояние приложения
  • использование timeline для синхронизации

Распространение анимации по набору элементов

Одной из ключевых особенностей Motion One является механизм stagger — последовательное распространение анимации по списку элементов. Направление распространения определяет, в каком порядке элементы будут запускать анимацию.

import { stagger, animate } from "motion"

animate(
  ".item",
  { opacity: 1, y: 0 },
  { delay: stagger(0.1) }
)

По умолчанию анимация запускается слева направо или сверху вниз (в порядке DOM).

Управление направлением stagger через from

Параметр from задаёт точку начала распространения анимации. Это ключевой инструмент управления направлением.

Возможные значения:

  • "first" — от первого элемента
  • "last" — от последнего
  • "center" — от центра массива
  • индекс (число) — от конкретного элемента
animate(
  ".item",
  { scale: 1 },
  { delay: stagger(0.08, { from: "last" }) }
)

В этом случае анимация распространяется в обратном порядке — от последнего элемента к первому.

Центрированное распространение

При использовании центра как точки старта создаётся эффект волны, расходящейся в обе стороны:

animate(
  ".item",
  { opacity: 1, y: 0 },
  { delay: stagger(0.05, { from: "center" }) }
)

Такое направление используется для визуальных эффектов появления сеток, галерей и плиточных интерфейсов.

Индексное управление направлением

Более точное управление достигается через числовой индекс:

animate(
  ".item",
  { rotate: 360 },
  { delay: stagger(0.06, { from: 3 }) }
)

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

Линейное и радиальное распространение

Хотя DOM-структура задаёт линейный порядок, визуально можно формировать радиальные и нелинейные направления анимации через комбинацию stagger и позиционного анализа.

animate(
  ".dot",
  { scale: [0, 1] },
  { delay: stagger(0.03, { from: "center" }) }
)

При применении к сетке элементов создаётся эффект расширяющейся волны.

Комбинирование направления и keyframes

Направление становится особенно выразительным при сочетании stagger и ключевых кадров.

animate(
  ".card",
  {
    opacity: [0, 1],
    transform: ["translateY(20px)", "translateY(0px)"]
  },
  { delay: stagger(0.1, { from: "first" }), duration: 0.5 }
)

Каждый элемент следует одной траектории, но стартует в разное время, формируя направленный поток движения.

Направление в сложных сценах

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

  • порядок запуска элементов (stagger)
  • направление keyframes внутри каждого элемента
  • временная синхронизация через timeline
import { timeline, stagger } from "motion"

timeline([
  [
    ".header",
    { opacity: 1, y: 0 },
    { duration: 0.4 }
  ],
  [
    ".item",
    { opacity: 1, x: 0 },
    { delay: stagger(0.05, { from: "last" }), duration: 0.6 }
  ]
])

Здесь формируется двухуровневое направление: верхний слой задаёт последовательность блоков, нижний — направление распространения внутри группы.

Пространственное направление через transform

Помимо временного направления существует пространственное направление, задаваемое трансформациями:

  • translateX — горизонтальное движение
  • translateY — вертикальное движение
  • rotate — круговое направление
  • scale — направление изменения масштаба относительно центра
animate(".box",
  { x: 300, rotate: 180 },
  { duration: 1 }
)

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

Зависимость направления от состояния DOM

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

  • количество элементов
  • порядок узлов
  • фильтрация и сортировка
const items = document.querySelectorAll(".item")

animate(
  items,
  { opacity: 1 },
  { delay: stagger(0.07, { from: items.length - 1 }) }
)

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

Нелинейные сценарии направления

При работе с интерактивными интерфейсами направление часто зависит от пользовательских действий:

  • клик
  • hover
  • прокрутка
  • появление элемента в viewport
animate(
  ".menu-item",
  { opacity: 1, y: 0 },
  { delay: stagger(0.04, { from: "center" }) }
)

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

Оглавление