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

Библиотека mo.js строит анимации вокруг набора унифицированных параметров, которые описывают поведение объектов во времени. Каждый эффект — это конфигурационный объект, в котором задаются геометрия, временные характеристики, трансформации и принципы повторного воспроизведения.

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

Временные параметры: duration, delay, repeat

duration

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

const anim = new mojs.Shape({
  duration: 1000
});

Чем больше значение, тем более растянутым становится переход между начальным и конечным состоянием. В контексте интерфейсных эффектов малые значения (200–400 мс) применяются для микровзаимодействий, тогда как более длинные (800–2000 мс) используются для выразительных сценических эффектов.

delay

delay задаёт задержку перед стартом анимации.

const anim = new mojs.Shape({
  delay: 300
});

Задержка применяется для построения последовательных сценариев, где элементы появляются с временным сдвигом. В сложных композициях delay становится инструментом управления иерархией движения.

repeat

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

const anim = new mojs.Shape({
  repeat: 2
});

Значение -1 используется для бесконечного повторения. Повторы применяются в циклических интерфейсных индикаторах и декоративных эффектах.

Поведение повторения: yoyo

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

const anim = new mojs.Shape({
  duration: 800,
  repeat: 3,
  yoyo: true
});

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

Пространственные параметры: x, y, angle

x и y

Параметры x и y управляют смещением объекта относительно исходной позиции.

const anim = new mojs.Shape({
  x: 100,
  y: -50
});

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

angle

angle задаёт поворот объекта в градусах.

const anim = new mojs.Shape({
  angle: 180
});

В анимационном контексте вращение часто комбинируется с масштабированием и изменением прозрачности, создавая эффект динамической трансформации формы.

Геометрические параметры: radius, scale

radius

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

const anim = new mojs.Shape({
  radius: 50
});

При анимации радиуса создаются эффекты расширения, импульса или взрыва.

scale

scale изменяет масштаб объекта относительно его базового состояния.

const anim = new mojs.Shape({
  scale: { 0: 1 }
});

Использование объектной записи позволяет задать интерполяцию от начального к конечному значению. Масштабирование часто применяется для появления и исчезновения элементов.

Прозрачность: opacity

Параметр opacity контролирует степень видимости объекта.

const anim = new mojs.Shape({
  opacity: { 0: 1 }
});

Плавное изменение прозрачности является базовым механизмом построения эффектов fade-in и fade-out. В сочетании с scale создаётся эффект «появления из точки».

Цветовые и визуальные параметры

fill и stroke

fill задаёт внутренний цвет фигуры, а stroke — цвет контура.

const anim = new mojs.Shape({
  fill: "cyan",
  stroke: "blue",
  strokeWidth: 3
});

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

Интерполяция значений и ключевые кадры

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

const anim = new mojs.Shape({
  x: { 0: 200 },
  opacity: { 0: 1 },
  scale: { 0.5: 1.2 }
});

Такая запись интерпретируется как переход от начального значения к конечному. В более сложных случаях допускается многоступенчатая интерполяция:

const anim = new mojs.Shape({
  x: { 0: 100, 200: -50, 400: 0 }
});

Каждая пара ключ-значение формирует промежуточную точку кривой движения.

Easing: управление характером движения

Параметр easing определяет математическую функцию ускорения и замедления.

const anim = new mojs.Shape({
  duration: 1000,
  easing: "ease.out"
});

Наиболее часто применяются:

  • linear — равномерное движение
  • ease.in — ускорение в начале
  • ease.out — замедление в конце
  • ease.in.out — комбинированная кривая

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

Stagger-анимации и распределение параметров

В групповых анимациях применяется принцип смещения параметров между элементами. Хотя сам stagger чаще относится к композиции, его эффект проявляется в распределении значений delay, duration и x/y.

const timeline = new mojs.Timeline();

const shape1 = new mojs.Shape({ delay: 0 });
const shape2 = new mojs.Shape({ delay: 100 });
const shape3 = new mojs.Shape({ delay: 200 });

timeline.add(shape1, shape2, shape3);

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

Синхронизация параметров в композиции

Комбинация нескольких параметров в одном объекте формирует сложные анимационные состояния. Например, одновременное изменение scale, opacity и angle создаёт эффект трансформации:

const anim = new mojs.Shape({
  duration: 1200,
  x: { 0: 150 },
  scale: { 0: 1 },
  angle: { 0: 360 },
  opacity: { 0: 1 },
  easing: "cubic.out"
});

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

Нормализация значений и единицы измерения

mo.js использует условные единицы, где:

  • координаты x/y интерпретируются в пикселях
  • угол angle задаётся в градусах
  • scale является безразмерным коэффициентом
  • opacity изменяется в диапазоне 0–1

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

Динамическая генерация параметров

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

const anim = new mojs.Shape({
  x: () => Math.random() * 300,
  duration: () => 500 + Math.random() * 1000
});

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

Связь параметров с внутренней моделью времени

Каждый параметр в mo.js привязан к внутреннему таймеру анимации. Изменения вычисляются на основе нормализованного времени t ∈ [0,1], которое затем преобразуется через easing-функцию. После этого итоговое значение интерполируется между заданными ключевыми точками.

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

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

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

  • увеличение scale визуально усиливает эффект изменения opacity
  • вращение angle влияет на восприятие траектории x/y
  • задержка delay формирует иерархию движения

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

Оглавление