Морфинг фигур

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

В mo.js морфинг фигур строится вокруг концепции ShapeSwirl и Shape, где ключевым элементом выступает параметр пути. Любая фигура рассматривается как набор координат, описанных кривыми Безье или SVG-path строкой.

Ключевая идея:

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

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

SVG как основа морфинга

mo.js активно использует SVG-пути как универсальное представление фигур. Морфинг работает только тогда, когда обе формы могут быть представлены в виде совместимых path-структур.

Пример базового подхода:

• круг → путь окружности
• квадрат → набор линий с углами 90°
• звезда → замкнутый path с радиальными вершинами

SVG-путь разбивается на команды:

• M — move to
• L — line to
• C — cubic Bézier curve
• Z — замыкание контура

Именно координаты этих команд интерполируются при анимации.

Простейший морфинг через Shape

В mo.js морфинг чаще всего реализуется через объект Shape:

const shape = new mojs.Shape({
  parent: document.body,
  shape: 'circle',
  scale: { 0: 1 },
  duration: 800
});

Для морфинга между формами используется параметр shape как анимируемое значение:

const morph = new mojs.Shape({
  parent: document.body,
  shape: { circle: 'rect' },
  scale: { 0: 1 },
  duration: 1000,
  easing: 'cubic.out'
});

Здесь происходит интерполяция между двумя базовыми preset-фигурами.

Морфинг через custom SVG paths

Более гибкий подход — использование пользовательских SVG-путей.

const morph = new mojs.Shape({
  parent: document.body,
  shape: {
    path: 'M10 10 H 90 V 90 H 10 Z',
    curve: 'M50 15 C 80 20, 80 80, 50 85 C 20 80, 20 20, 50 15 Z'
  },
  duration: 1200
});

В этом случае библиотека интерполирует координаты контрольных точек Безье-кривых.

Нормализация путей

Одной из ключевых задач при морфинге является приведение разных форм к единой структуре.

Процесс включает:

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

Если направления обхода различаются (clockwise vs counterclockwise), возникает эффект «перекручивания» фигуры.

Интерполяция координат

После нормализации выполняется линейная интерполяция:

x(t) = x₁ + (x₂ - x₁) * t
y(t) = y₁ + (y₂ - y₁) * t

где t изменяется от 0 до 1.

В mo.js поверх этого слоя добавляются easing-функции, влияющие на скорость изменения параметра t.

Использование easing в морфинге

Easing определяет характер перехода формы:

• линейный морфинг создаёт механическое ощущение
• ease-out делает переход более «живым»
• elastic или bounce создают эффект упругой деформации

Пример:

const morph = new mojs.Shape({
  parent: document.body,
  shape: { circle: 'polygon' },
  duration: 1500,
  easing: 'elastic.out'
});

В этом случае изменение геометрии усиливается эффектом «переразгона» координат.

Сложные морфинговые цепочки

mo.js поддерживает последовательные трансформации нескольких форм:

• круг → квадрат → звезда → треугольник

Каждый переход интерполируется отдельно, но с сохранением общего таймлайна.

const morph = new mojs.Shape({
  parent: document.body,
  shape: {
    circle: 'rect',
    rect: 'polygon',
    polygon: 'circle'
  },
  duration: 2000
});

Такие цепочки требуют строгой совместимости SVG-структур, иначе возникают артефакты.

Морфинг с трансформацией масштаба и вращения

Форма редко изменяется изолированно. Обычно морфинг сопровождается:

• масштабированием
• вращением
• изменением opacity
• смещением по оси

const morph = new mojs.Shape({
  parent: document.body,
  shape: { circle: 'rect' },
  scale: { 0: 2 },
  rotate: { 0: 180 },
  opacity: { 1: 0 },
  duration: 1200
});

Комбинация трансформаций усиливает визуальную плавность перехода.

Работа с path-анимацией вручную

В более сложных сценариях используется прямое управление path-строками.

const morph = new mojs.Shape({
  parent: document.body,
  shape: {
    path: 'M20,20 L80,20 L80,80 L20,80 Z',
    path2: 'M50,10 L90,90 L10,90 Z'
  },
  duration: 1400
});

Каждый path преобразуется в набор сегментов, после чего выполняется покоординатная интерполяция.

Проблемы совместимости фигур

Основные проблемы морфинга:

• различное количество узлов в path
• несовпадающие направления обхода
• резкие углы против плавных кривых
• несоответствие начальных точек

Эти проблемы решаются через preprocessing:

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

Производительность морфинга

Морфинг в mo.js может быть вычислительно затратным при большом количестве точек.

Основные факторы нагрузки:

• количество SVG-узлов
• сложность кривых Безье
• количество одновременных анимаций
• частота обновления (requestAnimationFrame)

Оптимизация достигается через:

• упрощение path
• уменьшение количества сегментов
• кэширование интерполированных форм

Комбинация морфинга с burst-анимациями

mo.js часто используется не изолированно, а в связке с burst-эффектами.

Пример логики:

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

Это создаёт эффект «разрыва формы».

Морфинг как система визуальных состояний

В более сложных интерфейсах морфинг используется как способ перехода между состояниями UI:

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

Каждое состояние описывается отдельной SVG-формой, а mo.js обеспечивает плавный переход.

Геометрическая интерпретация морфинга

С математической точки зрения морфинг представляет собой:

• отображение множества точек A → B
• непрерывную деформацию пространства
• сохранение топологической связности формы

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

Расширенные техники управления morph-path

В продвинутых реализациях используется:

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

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

Визуальные артефакты и их контроль

Типичные артефакты:

• «переворачивание» формы
• дрожание контуров
• резкие скачки сегментов
• асимметричная деформация

Контроль достигается через:

• фиксацию стартовой точки path
• унификацию направления обхода
• предварительное сглаживание кривых
• ограничение скорости интерполяции

Использование морфинга в анимационных сценах

Морфинг часто применяется как центральный элемент сцены:

• логотипы, трансформирующиеся в интерфейсные элементы
• декоративные фоновые эффекты
• переходы между экранами
• интерактивные кнопки

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