Ключевые слова и специальные значения

Строковые алиасы и система интерпретации значений

Motion One интерпретирует входные значения анимации не только как «сырые» числа или строки CSS, но и как набор специальных ключевых слов, которые упрощают управление анимацией и расширяют выразительность API. При передаче значений движок сначала пытается распознать тип данных, а затем применяет преобразование в зависимости от контекста свойства.

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

Значения по умолчанию и auto

Специальное значение auto используется для делегирования вычисления браузеру или движку layout.

В Motion One auto применяется в нескольких контекстах:

  • размеры (width, height)
  • позиционирование (top, left)
  • трансформации в отдельных сценариях
  • анимации, зависящие от контента
animate(element, {
  height: "auto"
})

Особенность обработки заключается в том, что Motion One:

  • вычисляет текущий пиксельный размер
  • фиксирует начальное состояние
  • анимирует между числовыми значениями
  • корректно обновляет layout при завершении

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

Ключевое слово from и начальные состояния

При описании анимации часто используется логика явного задания стартового состояния через from. Это не CSS-свойство, а директива уровня API.

animate(
  element,
  { opacity: 1 },
  { from: { opacity: 0 } }
)

Особенности:

  • from имеет приоритет над текущим DOM-стилем
  • используется для переопределения начальной точки интерполяции
  • применяется только на старте анимации

Если значение отсутствует, Motion One извлекает его из computed styles.

Infinity и бесконечные циклы

Для управления повторением анимации используется значение Infinity, которое задаёт бесконечное число итераций.

animate(element, {
  rotate: 360
}, {
  repeat: Infinity
})

Поведение:

  • цикл не завершается автоматически
  • обратные вызовы завершения не вызываются
  • управление остановкой осуществляется вручную через контроллер

Дополнительно может использоваться комбинация:

  • repeat
  • direction: "alternate"
{
  repeat: Infinity,
  direction: "alternate"
}

Это создаёт возвратно-поступательное движение без резких скачков.

Direction как управляющее ключевое слово

Параметр direction принимает строковые значения, которые изменяют порядок воспроизведения ключевых кадров:

  • normal
  • reverse
  • alternate
  • alternate-reverse
animate(element, { x: 100 }, { direction: "alternate" })

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

Easing как строковые алиасы

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

Часто используемые значения:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
animate(element, { opacity: 1 }, { easing: "ease-in-out" })

Внутренне такие значения преобразуются в cubic-bezier кривые.

Особенность:

  • строка проходит этап резолвинга
  • затем заменяется на функцию интерполяции
  • финально применяется к таймлайну

Transform-алиасы и сокращённые ключи

Motion One поддерживает сокращённые ключи трансформаций, которые автоматически маппятся в CSS transform matrix:

  • x → translateX
  • y → translateY
  • scale → scale()
  • rotate → rotate()
  • skewX, skewY
animate(element, {
  x: 100,
  scale: 1.2,
  rotate: 45
})

Специальные свойства:

  • объединяются в единый transform-слой
  • избегают конфликтов между CSS-правилами
  • оптимизируются в один GPU-композируемый вызов

Если одновременно используется transform, он имеет приоритет над алиасами и может их переопределить.

CSS переменные как динамические значения

Motion One напрямую поддерживает CSS custom properties:

animate(element, {
  "--progress": 1
})

Особенности работы:

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

Пример интерполяции:

animate(element, {
  "--blur": "20px"
}, {
  from: { "--blur": "0px" }
})

calc() и вычисляемые выражения

CSS-функция calc() не интерпретируется Motion One как математическое выражение. Вместо этого она передаётся напрямую в браузер, если не требуется интерполяция.

animate(element, {
  width: "calc(100% - 40px)"
})

Если участвует анимация, Motion One:

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

Stagger как специальный управляющий ключ

stagger используется для создания каскадных задержек при анимации списков элементов.

import { stagger } from "motion"

animate(items, {
  opacity: 1
}, {
  delay: stagger(0.1)
})

Поведение:

  • каждому элементу назначается индивидуальная задержка
  • индекс элемента влияет на итоговое время старта
  • поддерживается обратное направление через отрицательные значения
stagger(0.1, { from: "center" })

Режимы from:

  • first
  • last
  • center
  • числовой индекс

repeatDelay и синхронизация циклов

Специальное значение repeatDelay используется совместно с повторениями:

{
  repeat: Infinity,
  repeatDelay: 0.5
}

Это создаёт паузу между циклами без вмешательства в сам keyframe-тайминг.

Особенность:

  • не влияет на easing
  • не изменяет duration
  • добавляется после завершения цикла

Keyframes как специальная форма значений

Ключевые кадры могут задаваться массивами, что является отдельным типом интерпретации:

animate(element, {
  x: [0, 100, 50, 0]
})

Правила обработки:

  • первый элемент становится стартом
  • последний — финальной точкой
  • промежуточные значения создают дополнительные сегменты интерполяции

Также допускается смешанный формат:

{
  opacity: [0, 1]
}

Transition-level ключевые слова

Объект transition содержит собственный набор специальных значений:

  • duration
  • delay
  • ease
  • repeat
  • type

Особое значение type:

{
  type: "spring"
}

или

{
  type: "tween"
}

При выборе spring активируется физическая модель интерполяции, игнорирующая стандартный easing.

Spring как параметризованное значение

При использовании spring ключевые параметры становятся управляющими значениями:

  • stiffness
  • damping
  • mass
{
  type: "spring",
  stiffness: 200,
  damping: 20
}

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

Null и удаление анимации свойства

Значение null используется для явного сброса или исключения свойства из анимации.

animate(element, {
  x: null
})

Поведение:

  • свойство исключается из интерполяции
  • возвращается управление CSS
  • может вызывать мгновенный reset состояния

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

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

  1. Разбор ключей (from, stagger, repeat)
  2. Нормализация значений (auto, Infinity, calc)
  3. Построение временной шкалы
  4. Преобразование в финальные интерполяторы

Конфликты разрешаются по приоритету:

  • transition-level параметры
  • from
  • keyframes
  • computed styles DOM

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

Оглавление