Merge Paths

Merge Paths — это механизм объединения нескольких векторных контуров в один результирующий путь с применением логических операций. В основе лежит функциональность из Adobe After Effects, которая экспортируется через Bodymovin и интерпретируется библиотекой Lottie Web при рендеринге анимации.

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

Принцип работы

Каждый Shape Layer в Lottie представляет собой набор примитивов (paths, ellipses, rectangles и др.). Merge Paths берёт последовательность этих примитивов и объединяет их согласно выбранному режиму.

Важно:

  • Merge Paths применяется только к формам внутри одного Shape Layer
  • Порядок фигур имеет значение
  • Операция применяется сверху вниз по списку

Режимы Merge Paths

1. Add (Объединение)

Объединяет все контуры в один, создавая суммарную форму.

Особенности:

  • Перекрывающиеся области складываются
  • Аналог операции Union в векторных редакторах

Применение:

  • Создание сложных иконок из базовых фигур
  • Упрощение геометрии

2. Subtract (Вычитание)

Вычитает верхние формы из нижних.

Особенности:

  • Верхний путь становится «резаком»
  • Позволяет создавать отверстия

Применение:

  • Маски
  • Вырезы (например, дырки в фигурах)

3. Intersect (Пересечение)

Оставляет только области, где фигуры пересекаются.

Особенности:

  • Всё вне пересечения удаляется
  • Используется редко, но мощно

4. Exclude Intersections (Исключение пересечений)

Удаляет пересекающиеся области, оставляя остальное.

Особенности:

  • Инверсия режима Intersect
  • Полезно для создания сложных контуров

5. Merge (Простое объединение путей)

Объединяет пути без выполнения логических операций.

Особенности:

  • Просто соединяет пути в один список
  • Не изменяет геометрию

Экспорт из After Effects

Merge Paths доступны в After Effects через:

Shape Layer → Add → Merge Paths

При экспорте через Bodymovin:

  • Параметры Merge Paths сохраняются в JSON
  • Lottie Web интерпретирует их при рендеринге

Фрагмент JSON:

{
  "ty": "mm",
  "mm": 1
}

Где:

  • "ty": "mm" — тип (Merge Paths)

  • "mm" — режим:

    • 1 — Add
    • 2 — Subtract
    • 3 — Intersect
    • 4 — Exclude
    • 5 — Merge

Поддержка в браузерах

Merge Paths работают через SVG-рендерер Lottie Web. Однако есть ограничения:

  • Полная поддержка:

    • Chrome
    • Firefox
    • Edge

  • Ограниченная или нестабильная:

    • Safari (особенно старые версии)
    • iOS WebView

Причина — различия в реализации SVG path operations.

Ограничения и подводные камни

1. SVG-only

Merge Paths работают только при renderer: “svg”.

lottie.loadAnimation({
  container: element,
  renderer: "svg",
  loop: true,
  autoplay: true,
  animationData: data
});

Canvas-рендерер не поддерживает Merge Paths.

2. Производительность

Операции над путями:

  • требуют перерасчёта геометрии
  • нагружают CPU при сложных формах

Особенно критично:

  • большое количество точек
  • анимация самих путей

3. Порядок фигур

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

Пример:

Shape 1
Shape 2
Merge Paths (Subtract)

Меняя местами Shape 1 и Shape 2, результат станет другим.

4. Анимация путей

Если анимируются сами контуры (Path Animation):

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

Практические сценарии

Создание вырезов

Использование Subtract для создания отверстий:

  • Круг + прямоугольник
  • Прямоугольник вычитается → получается «окно»

Иконки и UI

Merge Paths позволяет:

  • уменьшить количество слоёв
  • создавать адаптивные формы
  • оптимизировать экспорт

Морфинг форм

В сочетании с Path Animation:

  • плавное изменение формы
  • создание сложных переходов

Оптимизация

Уменьшение сложности путей

  • Удаление лишних точек
  • Упрощение кривых

Избегание глубокой вложенности

  • Не использовать Merge Paths внутри групп с большим числом элементов

Предварительное объединение

Если возможно:

  • объединять формы в After Effects или Illustrator
  • экспортировать уже готовый path

Альтернативы

Если Merge Paths вызывает проблемы:

1. Маски (Masks)

  • Более стабильны
  • Лучше поддерживаются

2. Предварительно отрисованные формы

  • Минимум вычислений
  • Максимальная совместимость

3. SVG-файлы

  • Иногда проще использовать готовый SVG

Отладка

Признаки проблем:

  • форма отображается некорректно
  • отсутствуют вырезы
  • появляются артефакты

Проверка:

  • используется ли SVG renderer
  • корректен ли порядок слоёв
  • поддерживается ли режим браузером

Внутренняя реализация в Lottie Web

Lottie преобразует Merge Paths в SVG-операции:

  • использует <path>
  • применяет fill-rule (nonzero / evenodd)
  • рассчитывает объединённый d-атрибут

При сложных операциях:

  • создаётся новый path
  • старые не рендерятся отдельно

Совместимость с fill-rule

Иногда результат Merge Paths зависит от:

  • nonzero
  • evenodd

Это влияет на:

  • отображение отверстий
  • внутренние области

Использование в JSON-анимации

Пример структуры:

{
  "ty": "gr",
  "it": [
    { "ty": "sh", "ks": {...} },
    { "ty": "sh", "ks": {...} },
    { "ty": "mm", "mm": 2 }
  ]
}

Порядок элементов в "it" определяет логику объединения.

Особенности при работе с Bodymovin

  • Не все эффекты After Effects корректно экспортируются
  • Merge Paths должен находиться внутри Shape Layer
  • Не поддерживается в старых версиях плагина

Типичные ошибки

Ошибка: Merge Paths не работает Причина: renderer = canvas

Ошибка: неправильная геометрия Причина: порядок фигур

Ошибка: исчезновение формы Причина: Intersect без пересечения

Рекомендации по использованию

  • Использовать только при необходимости
  • Проверять в разных браузерах
  • Минимизировать сложность форм
  • Тестировать на мобильных устройствах
  • Избегать анимации сложных path + Merge Paths одновременно

Сравнение с векторными редакторами

Операция Illustrator / Figma Merge Paths
Unite Да Add
Minus Front Да Subtract
Intersect Да Intersect
Exclude Да Exclude

Влияние на размер JSON

Merge Paths:

  • не сильно увеличивает JSON
  • но может косвенно усложнять структуру

Основной вес:

  • координаты точек
  • ключевые кадры

Поведение при экспорте в разные форматы

Renderer Поддержка
SVG Полная
Canvas Нет
HTML Нет

Закономерности использования

  • Простые анимации → избегать Merge Paths
  • Сложная геометрия → оправдано
  • Маски → часто лучше альтернатива

Глубокая оптимизация

При сложных сценах:

  • разбивать на несколько анимаций
  • использовать lazy loading
  • отключать autoplay при невидимости

Итоговая роль Merge Paths

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

Оглавление