Конфигурационные объекты

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

Конфигурации используются во всех основных примитивах библиотеки: animate, tween, spring, decay, keyframes, а также в более низкоуровневых функциях. Несмотря на различия в моделях движения, структура объектов сохраняет общие принципы композиции.

Базовые параметры конфигурации

Большинство конфигураций Popmotion строится вокруг набора универсальных полей, которые определяют старт, конец и управление процессом анимации.

Начальные и конечные значения

  • from — начальное значение анимации
  • to — конечное значение или набор конечных значений
animate({
  from: 0,
  to: 100
});

Поле to может принимать различные формы:

  • число
  • массив чисел
  • объект значений
animate({
  from: { x: 0, y: 0 },
  to: { x: 300, y: 150 }
});

При работе с объектами происходит поосевая интерполяция, где каждое свойство анимируется независимо.

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

Длительность анимации

Параметр duration задаёт общее время выполнения анимации в миллисекундах.

tween({
  from: 0,
  to: 1,
  duration: 800
});

Длительность влияет на характер движения в параметрических анимациях, но в физических моделях (например, spring) может игнорироваться или использоваться косвенно.

Задержка старта

delay определяет паузу перед началом анимации.

animate({
  from: 0,
  to: 100,
  duration: 500,
  delay: 200
});

Задержка часто применяется при построении последовательностей и каскадных эффектов.

Функции изменения скорости

easing

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

import { easeInOut } from '@popmotion/easing';

animate({
  from: 0,
  to: 100,
  duration: 1000,
  ease: easeInOut
});

Типичные категории easing-функций:

  • линейные
  • ускоряющиеся
  • замедляющиеся
  • S-образные кривые
  • пользовательские функции

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

Физические параметры

В конфигурациях, основанных на физике, поведение задаётся через начальные условия и параметры среды.

Spring-конфигурация

Spring-модель описывает движение через упругость и демпфирование.

Ключевые параметры:

  • stiffness — жёсткость пружины
  • damping — коэффициент затухания
  • mass — масса объекта
  • velocity — начальная скорость
  • restDelta — порог остановки по смещению
  • restSpeed — порог остановки по скорости
spring({
  from: 0,
  to: 300,
  stiffness: 120,
  damping: 20,
  mass: 1
});

Высокая жёсткость увеличивает скорость приближения к цели, а высокий damping снижает колебания.

Decay-конфигурация

Decay описывает инерционное движение с постепенным затуханием.

  • velocity — начальная скорость
  • deceleration — коэффициент замедления
decay({
  from: 0,
  velocity: 500,
  deceleration: 0.95
});

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

Ключевые кадры

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

Основные параметры:

  • values — массив ключевых значений
  • times — временные точки (нормализованные от 0 до 1)
  • duration — общая длительность
  • ease — easing для каждого сегмента или глобально
keyframes({
  values: [0, 100, 50, 200],
  times: [0, 0.3, 0.6, 1],
  duration: 1200
});

При отсутствии times значения распределяются равномерно.

Конфигурации объектов и структур данных

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

Объектная интерполяция

animate({
  from: {
    x: 0,
    y: 0,
    opacity: 0
  },
  to: {
    x: 400,
    y: 200,
    opacity: 1
  }
});

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

Массивы значений

animate({
  from: [0, 50],
  to: [300, 200]
});

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

Управление жизненным циклом

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

Основные хуки

  • onUpdate — вызывается при каждом обновлении значения
  • onComplete — вызывается при завершении
  • onPlay — при запуске
  • onStop — при остановке
animate({
  from: 0,
  to: 100,
  onUpdate: (v) => console.log(v),
  onComplete: () => console.log('done')
});

Колбэки позволяют интегрировать анимацию с DOM, Canvas или state-менеджерами.

Переиспользуемые конфигурации

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

const fadeConfig = {
  from: 0,
  to: 1,
  duration: 300,
  ease: linear
};

animate(fadeConfig);

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

Композиция конфигураций

Конфигурации могут комбинироваться через расширение объектов или функции-посредники.

const base = {
  duration: 500,
  ease: easeInOut
};

animate({
  ...base,
  from: 0,
  to: 100
});

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

Динамические конфигурации

Некоторые параметры могут вычисляться во время выполнения через функции.

animate({
  from: 0,
  to: (latest) => latest + 100,
  duration: 600
});

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

Контроль завершения и прерывания

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

  • автоматическое завершение при достижении цели
  • принудительная остановка через внешние сигналы
  • адаптивное завершение при достижении порогов (restSpeed, restDelta)

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

Обработка ошибок конфигурации

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

  • отсутствие from приводит к использованию текущего значения
  • некорректные типы to игнорируются или приводят к NaN-поведению
  • несоответствие структур from и to вызывает частичную интерполяцию

Система стремится к деградации поведения без полного прерывания выполнения.

Расширяемость конфигураций

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

animate({
  from: 0,
  to: 100,
  customFlag: true,
  metadata: {
    layer: 'ui'
  }
});

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

Оглавление