Исходная точка трансформации

В анимационной системе mo.js каждая трансформация опирается на точку отсчёта, от которой начинается изменение геометрии объекта. Эта точка определяет поведение масштаба, вращения, смещения и визуального расширения эффектов. Внутри движка она связывается с понятием локальной системы координат и параметрами позиционирования сущности, будь то shape, burst или tween-анимация.

Любой объект в mo.js существует одновременно в двух пространствах: глобальном и локальном. Глобальное пространство задаёт положение на странице, локальное — определяет центр трансформации.

При создании примитивов через Shape или Burst используется система координат, где:

  • x и y задают позицию центра объекта
  • parent определяет контейнер, внутри которого вычисляется позиция
  • radius часто выступает как визуальная граница, но косвенно влияет на восприятие центра трансформации

Локальный центр трансформации по умолчанию совпадает с геометрическим центром фигуры. Именно вокруг него происходят масштабирование и вращение.

const circle = new mojs.Shape({
  shape: 'circle',
  left: '50%',
  top: '50%',
  scale: { 0: 1 },
  duration: 800
});

В этом случае точка трансформации совпадает с центром круга, так как позиционирование задано через left и top относительно центра контейнера.

Центр как источник распространения анимации

При работе с эффектами типа burst точка трансформации становится источником «взрыва» частиц. Все элементы композиции рассчитывают траектории относительно начального центра.

const burst = new mojs.Burst({
  left: '50%',
  top: '50%',
  radius: { 0: 100 },
  count: 10,
  children: {
    shape: 'circle',
    radius: 5,
    scale: { 1: 0 },
    duration: 700
  }
});

Здесь начальная точка трансформации задаёт не только позицию burst, но и центр радиального распределения дочерних элементов. Расширение radius интерпретируется как увеличение расстояния от этой точки, что формирует эффект исходящего движения.

Масштабирование относительно origin

В CSS-анимациях существует свойство transform-origin, и mo.js наследует эту концепцию, хотя скрывает её внутри абстракций. При масштабировании объектов важно, относительно какой точки происходит изменение размера.

Если трансформация привязана к центру, увеличение масштаба сохраняет симметрию. Если точка смещена, возникает эффект «смещения при росте».

const square = new mojs.Shape({
  shape: 'rect',
  left: '50%',
  top: '50%',
  scale: { 0: 2 },
  duration: 600
});

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

Смещение точки трансформации через позиционирование

В mo.js прямого параметра transform-origin нет, но его поведение моделируется изменением координатной базы. Смещение центра достигается комбинацией left, top, а также вложенными контейнерами.

const offsetShape = new mojs.Shape({
  shape: 'circle',
  left: '70%',
  top: '30%',
  scale: { 0: 1 },
  duration: 900
});

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

Влияние radius на центр трансформации burst-эффектов

В композициях типа Burst параметр radius определяет не только размер, но и распределение дочерних элементов относительно центра.

const burst = new mojs.Burst({
  left: '50%',
  top: '50%',
  radius: { 20: 80 },
  children: {
    shape: 'polygon',
    points: 5,
    scale: { 1: 0 },
    duration: 1000
  }
});

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

Вложенные трансформации и локальные центры

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

const parent = new mojs.Shape({
  shape: 'circle',
  left: '50%',
  top: '50%',
  scale: { 1: 1.5 }
});

const child = new mojs.Shape({
  shape: 'rect',
  parent: parent.el,
  scale: { 0: 1 },
  duration: 800
});

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

Смещение центра через origin-подобные техники

Хотя mo.js не предоставляет явного API для управления transform-origin, аналогичное поведение достигается через комбинацию смещения и анимации координат.

const shifted = new mojs.Shape({
  shape: 'circle',
  left: { '50%': '60%' },
  top: { '50%': '40%' },
  scale: { 0: 1 },
  duration: 700
});

Здесь центр трансформации фактически «плавает» между двумя состояниями, создавая эффект движения, совмещённого с масштабированием.

Геометрический смысл начальной точки

Любая трансформация в mo.js опирается на начальное состояние объекта. Это состояние фиксирует:

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

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

const anim = new mojs.Tween({
  duration: 1000,
  onUpdate: (progress) => {
    const scale = 1 + progress * 2;
  }
});

Хотя здесь не используется shape напрямую, логика остаётся той же: прогресс анимации всегда вычисляется относительно начальной точки состояния.

Вращение вокруг центра трансформации

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

const rotating = new mojs.Shape({
  shape: 'rect',
  left: '50%',
  top: '50%',
  angle: { 0: 360 },
  duration: 1200
});

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

Комбинированные трансформации и устойчивость центра

При одновременном применении scale, rotate и translate система mo.js стремится сохранять устойчивость точки трансформации. Это позволяет избегать визуальных артефактов и «дрожания» объектов при интерполяции.

const complex = new mojs.Shape({
  shape: 'circle',
  left: '50%',
  top: '50%',
  scale: { 0: 1.5 },
  angle: { 0: 180 },
  duration: 1000
});

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

Оглавление