Параметры конфигурации

В Popmotion поведение анимации полностью определяется конфигурационным объектом, передаваемым в фабрики анимаций (animate, tween, spring, decay, keyframes). Конфигурация задаёт начальные и конечные значения, модель движения, ограничения, временные параметры и обработчики жизненного цикла.

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

  • числовые и временные характеристики движения
  • физические параметры (для spring/decay моделей)
  • функции интерполяции и кривые изменения
  • параметры управления жизненным циклом
  • модификаторы значений и постобработка
  • события обновления состояния

Базовые параметры анимации

from / to

from задаёт начальное состояние анимации. to определяет целевое состояние или набор ключевых состояний.

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

  • from: 0
  • to: 100

Также поддерживаются структуры:

  • объекты { x: 0, y: 0 } → { x: 100, y: 200 }
  • массивы значений для последовательных интерполяций
  • цвета (в зависимости от конфигурации интерполятора)

duration

Определяет длительность анимации в миллисекундах.

Характеристики:

  • применяется в tween и keyframes
  • игнорируется в spring и decay
  • влияет на скорость интерполяции независимо от расстояния между значениями

ease / easing

Параметр ease управляет распределением прогресса анимации во времени.

Поддерживаются функции:

  • линейные
  • ускоряющие и замедляющие кривые
  • кубические и экспоненциальные функции
  • кастомные функции (progress: number) => number

Функция easing преобразует линейный прогресс t ∈ [0, 1] в нелинейный:

[ p = f(t)]

где p — фактическое значение интерполяции.

Управляющие параметры цикла

loop

Параметр loop задаёт повторение анимации.

Поведение:

  • true — бесконечный цикл
  • число — фиксированное количество повторений
  • объект — расширенная конфигурация (например, направление повторов)

repeat / repeatDelay

Некоторые реализации используют:

  • repeat — количество повторений
  • repeatDelay — задержка между циклами

Эти параметры применяются в tween/keyframes и не влияют на физические модели.

autoplay

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

  • true — запуск немедленно
  • false — управление запускается вручную через controls

Обработчики жизненного цикла

onUpdate

Функция вызывается на каждом шаге анимации.

Передаёт текущее значение интерполяции:

  • числовое значение
  • объект состояния
  • массив значений

Используется для синхронизации UI или состояния DOM.

onComplete

Срабатывает при достижении конечного состояния.

Поведение зависит от типа анимации:

  • tween — при завершении прогресса 1
  • spring — при достижении состояния покоя
  • keyframes — после последнего кадра

onStart

Вызывается при старте анимации или перезапуске цикла.

onRepeat

Срабатывает при каждом повторе, если включён loop или repeat.

onStop

Активируется при принудительной остановке управления.

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

tween представляет линейную или easing-анимацию между значениями.

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

  • from — начальное значение
  • to — конечное значение
  • duration — длительность
  • ease — функция изменения скорости
  • flip — инверсия направления при повторе

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

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

Spring-конфигурация (физическая модель)

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

genui{“math_block_widget_always_prefetch_v2”:{“content”:“F = -kx”}}

Где поведение определяется балансом силы возврата и сопротивления.

stiffness

Жёсткость пружины.

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

damping

Коэффициент демпфирования.

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

mass

Масса объекта.

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

velocity

Начальная скорость движения.

Используется для продолжения инерционного состояния при запуске spring-анимации.

restDelta

Порог остановки по изменению значения.

Анимация считается завершённой при малых изменениях между кадрами.

restSpeed

Порог скорости, ниже которого система считается остановившейся.

clamp

Ограничивает выход за пределы целевого значения.

Используется для предотвращения перерегулирования.

precision

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

Decay-конфигурация (инерционное затухание)

Модель decay описывает движение, постепенно теряющее скорость.

velocity

Начальная скорость инерции.

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

power

Коэффициент сопротивления.

  • высокое значение ускоряет затухание
  • низкое создаёт длительное движение

timeConstant

Постоянная времени затухания.

Контролирует экспоненциальное уменьшение скорости.

modifyTarget

Функция изменения целевого значения на основе текущего состояния.

Позволяет моделировать ограничения или границы движения.

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

Модель keyframes задаёт последовательность промежуточных состояний.

values

Массив ключевых значений:

  • числа
  • объекты
  • сложные структуры

times

Массив временных меток для каждого кадра.

Определяет распределение прогресса.

duration

Общая длительность всей последовательности.

ease

Может быть:

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

Модификация значений

modifyTarget

Функция постобработки целевого значения.

Применяется для:

  • ограничения диапазона
  • приведения к сетке значений
  • адаптации под контекст UI

transformTemplate (в некоторых реализациях)

Позволяет преобразовывать итоговое значение перед применением:

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

Контроль выполнения анимации

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

Типовые операции:

  • старт выполнения
  • остановка
  • повторный запуск
  • мгновенное завершение до конечного состояния

Состояние контроллера синхронизируется с конфигурацией:

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

Особенности комбинирования параметров

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

  • duration игнорируется в физически моделируемых анимациях
  • stiffness, damping, mass не применяются в tween
  • ease не влияет на spring и decay
  • velocity используется только при наличии инерционной модели

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

Постобработка и интерполяция

Внутренний механизм Popmotion использует интерполяторы для разных типов значений.

Характер обработки зависит от входных данных:

  • числа интерполируются линейно или через easing
  • цвета преобразуются в RGB/HSLA пространство
  • объекты разбиваются на свойства и интерполируются поэлементно
  • массивы обрабатываются как последовательности значений

Каждый интерполятор получает нормализованный прогресс t ∈ [0,1] и возвращает промежуточное значение состояния.

Поведение конфигурации при повторных запусках

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

  • from может переопределяться текущим состоянием
  • velocity сохраняется только в физических моделях
  • ease и duration пересчитываются заново
  • callbacks переинициализируются

Такое поведение обеспечивает детерминированность каждой новой анимационной сессии при неизменной конфигурации.

Оглавление