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

В основе позиционирования анимаций в mo.js лежит взаимодействие нескольких уровней координат: глобального окна (viewport), контейнера анимации и локальной системы координат конкретного объекта. Любой визуальный эффект в библиотеке привязывается к определённой точке пространства, которая вычисляется через набор параметров x, y, left, top, а также через связь с родительским DOM-элементом.

Глобальная система координат в mo.js ориентируется на верхний левый угол документа. Значения увеличиваются вправо по оси X и вниз по оси Y. Однако поведение этих координат может изменяться при наличии родительского элемента, внутри которого происходит рендеринг анимации.

Абсолютное и относительное позиционирование

Параметры left и top задают абсолютное положение объекта относительно страницы или ближайшего позиционированного контейнера. Они работают аналогично CSS-позиционированию и чаще всего используются при привязке анимации к конкретной области интерфейса.

const circle = new mojs.Shape({
  shape: 'circle',
  left: '50%',
  top: '50%',
  radius: 30,
  fill: 'red'
});

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

Параметры x и y используются для смещения объекта относительно уже установленной базовой позиции. В отличие от left и top, они не определяют начальное положение, а модифицируют его.

const burst = new mojs.Burst({
  left: '50%',
  top: '50%',
  children: {
    shape: 'circle',
    radius: { 0: 20 },
    x: { 0: 100 },
    y: { 0: -50 }
  }
});

Здесь x и y задают траекторию смещения частиц относительно центра взрыва.

Связь с родительским элементом

Параметр parent определяет DOM-узел, в пределах которого происходит расчёт координат. Это ключевой механизм локализации анимаций внутри интерфейса.

const box = document.querySelector('.box');

const anim = new mojs.Shape({
  parent: box,
  left: '0%',
  top: '0%',
  shape: 'rect',
  fill: 'blue'
});

При задании parent все координаты left, top, x, y начинают вычисляться относительно границ этого элемента. Это позволяет создавать изолированные анимационные зоны без влияния на глобальный документ.

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

Точка трансформации и origin

Параметр origin управляет точкой, относительно которой происходит масштабирование, вращение и смещение объекта. Он влияет не только на позицию, но и на поведение трансформаций.

const shape = new mojs.Shape({
  left: '50%',
  top: '50%',
  shape: 'circle',
  radius: 40,
  origin: '50% 50%',
  rotate: { 0: 180 }
});

Значение origin задаётся в виде пары координат или ключевых слов (0% 0%, 50% 50%, 100% 100%). Центральная точка (50% 50%) означает, что все трансформации происходят относительно центра фигуры.

Изменение origin приводит к визуальному сдвигу поведения анимации даже при неизменных координатах left и top, поскольку меняется точка отсчёта преобразований.

Комбинация x, y с left и top

Одновременное использование left/top и x/y создаёт двухуровневую систему позиционирования. Базовая позиция задаётся через left/top, а динамическое смещение через x/y.

const item = new mojs.Shape({
  left: '30%',
  top: '30%',
  shape: 'circle',
  radius: 20,
  x: { 0: 150 },
  y: { 0: 80 }
});

В этом случае объект сначала размещается на координате (30%, 30%), после чего к нему применяется анимационное смещение.

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

Наследование координат в сложных анимациях

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

const burst = new mojs.Burst({
  left: '50%',
  top: '50%',
  radius: { 0: 100 },
  children: {
    shape: 'circle',
    x: { 0: 80 },
    y: { 0: 80 }
  }
});

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

Процентные и числовые значения

Параметры позиционирования в mo.js поддерживают два основных типа значений: абсолютные (пиксели) и относительные (проценты). Процентные значения вычисляются относительно размеров контейнера или viewport, тогда как пиксели фиксируют положение независимо от изменений макета.

{
  left: '100%',
  top: '0%',
  x: -50,
  y: 20
}

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

Смещение и математическая интерпретация координат

Внутренне mo.js рассматривает позиционирование как сумму векторов. Базовая позиция формируется через left/top, после чего к ней добавляются векторные смещения x/y. Такая модель упрощает построение траекторий движения и позволяет легко комбинировать анимации.

Пусть базовая точка задаётся как P₀(x₀, y₀), а смещение как V(x, y). Тогда итоговая позиция вычисляется как:

P = P₀ + V

Эта модель используется при интерполяции значений в анимациях, где x и y могут изменяться во времени.

Особенности работы в Burst-анимациях

В Burst позиционирование дочерних элементов дополнительно зависит от угла распределения. Координаты x и y интерпретируются как радиальные смещения, которые могут комбинироваться с угловыми параметрами генерации частиц.

const burst = new mojs.Burst({
  radius: { 0: 120 },
  count: 10,
  children: {
    x: { 0: 60 },
    y: { 0: 60 }
  }
});

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

Влияние transform и CSS-окружения

Поскольку mo.js интегрируется с DOM, на позиционирование могут влиять CSS-свойства родительских элементов: transform, scale, translate, overflow. Особенно значительное влияние оказывает transform, так как он изменяет локальную систему координат контейнера.

В результате один и тот же набор параметров left/top/x/y может давать разные визуальные результаты в зависимости от CSS-окружения.

Согласование координат при анимации

При анимации позиционируемых параметров mo.js интерполирует значения между начальной и конечной точками. Если заданы ключевые кадры:

x: { 0: 100 },
y: { 0: -50 }

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

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