Параметры и типы

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

Ключевая особенность архитектуры — единый подход к параметрам во всех модулях: tween, spring, physics, keyframes, value, styler. Несмотря на различие моделей движения, структура входных данных остаётся предсказуемой и типизированной.

Типы значений в системе анимации

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

Числовые значения

Наиболее простой тип данных:

animate({
  from: 0,
  to: 300
});

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

Строковые значения с единицами измерения

Поддерживаются CSS-значения:

animate({
  from: "0px",
  to: "100px"
});

Интерполяция происходит по числовой части с сохранением единиц.

Цветовые значения

Цвета интерполируются по каналам:

animate({
  from: "rgba(255, 0, 0, 1)",
  to: "rgba(0, 0, 255, 1)"
});

Поддерживаются форматы rgb, rgba, hsl, hex.

Комплексные структуры

Объекты и массивы интерполируются рекурсивно:

animate({
  from: { x: 0, y: 0 },
  to: { x: 100, y: 200 }
});

Каждое поле обрабатывается отдельно с собственной интерполяцией.

Типизация параметров tween-анимации

tween — параметрическая временная анимация, основанная на интерполяции между двумя точками.

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

  • from — начальное значение
  • to — конечное значение
  • duration — длительность в миллисекундах
  • ease — функция сглаживания
  • flip — инверсия направления
  • loop — зацикливание
  • yoyo — возврат в обратном направлении
tween({
  from: 0,
  to: 1,
  duration: 1000,
  ease: easing.easeInOut
});

Типизация в логике исполнения

from и to должны быть совместимыми типами. Несовместимость приводит к невозможности построения интерполятора.

Допустимые пары:

  • number → number
  • string(px) → string(px)
  • color → color
  • object → object (с одинаковой структурой)

Параметры физической модели spring

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

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

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

Влияние типов параметров

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

Параметры physics-анимации

Physics-модель оперирует силами и скоростями, а не конечными точками.

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

  • from — начальное значение
  • velocity — скорость
  • acceleration — ускорение
  • friction — трение
  • restSpeed — остановка при минимальной скорости
physics({
  from: 0,
  velocity: 50,
  friction: 0.8
});

Типы данных

Все параметры строго числовые. В отличие от tween, отсутствует понятие конечной точки to.

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

Keyframes описывают дискретные состояния анимации.

Основная структура

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

Типизация массива значений

Все элементы массива должны быть одного типа:

  • только числа
  • только строки с одинаковыми единицами
  • только цвета одного формата
  • только объекты с одинаковой структурой

Унификация типов через value API

value — базовый контейнер состояния, который принимает любые поддерживаемые типы.

Структура параметров

  • initial — начальное значение
  • onUpdate — обработчик изменений
  • transform — функция преобразования
  • format — формат вывода
const x = value(0, {
  onUpdate: v => console.log(v)
});

Типы состояния

Контейнер автоматически определяет тип при инициализации:

  • number → числовой поток
  • string → строковый интерполятор
  • object → структурный наблюдатель
  • array → индексированный набор значений

Типы easing-функций

Сглаживание определяет характер изменения параметра во времени.

Категории easing

  • линейные
  • квадратичные
  • кубические
  • экспоненциальные
  • циклические
ease: easing.easeInOut

Типизация easing

Easing-функции имеют сигнатуру:

(progress: number) => number

Ограничения:

  • вход всегда в диапазоне 0–1
  • выход нормализуется к 0–1
  • допускается математическая трансформация кривой

Интерполяционные типы transform

Модуль transform объединяет функции преобразования значений.

Основные типы трансформаций

  • interpolate
  • clamp
  • blend
  • pipe
const convert = transform.interpolate([0, 100], ["0px", "100px"]);

Типовая совместимость

Интерполяция требует согласованности доменов:

  • domain: числовой массив
  • range: любой поддерживаемый тип

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

Строгая типизация в TypeScript

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

Базовые типы

type TweenProps = {
  from: number | string | object;
  to: number | string | object;
  duration?: number;
  ease?: (v: number) => number;
};

Физические типы

type SpringProps = {
  from: number;
  to: number;
  stiffness?: number;
  damping?: number;
  mass?: number;
};

Универсальный тип значения

type Animatable =
  | number
  | string
  | Color
  | { [key: string]: Animatable };

Типы ошибок конфигурации

Система параметров предполагает строгую согласованность входных данных.

Несовместимость типов

  • число + строка без единиц
  • объект с разной структурой
  • массивы разной длины в keyframes

Логические ошибки параметров

  • отрицательная длительность
  • нулевая масса в spring
  • отсутствующий from или to

Типы временных моделей

Popmotion использует несколько моделей времени:

Линейное время

Используется в tween:

progress = elapsed / duration

Физическое время

Используется в spring и physics:

  • зависит от состояния системы
  • не фиксировано заранее

Дискретное время

Используется в keyframes:

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

Совместимость типов между модулями

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

  • tween: конечная интерполяция
  • spring: приближение к цели
  • physics: свободная динамика без цели
  • keyframes: дискретная траектория

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

Оглавление