Типы масок в Lottie

Маски в Lottie Web основаны на данных, экспортируемых из After Effects, и представляют собой слой-ограничение видимости, применяемое к содержимому слоя через векторные или альфа-данные. В отличие от классических canvas- или DOM-масок, Lottie работает с декларативным описанием масок в JSON и интерпретирует их в рантайме через движок рендера.

Структура масок в Lottie JSON

Маски хранятся внутри слоя в поле masksProperties. Каждый элемент массива описывает отдельную маску:

  • pt — путь маски (анимируемая форма)
  • o — непрозрачность маски
  • exp — расширение/сжатие границ маски (feather/expansion)
  • mode — режим смешивания маски
  • inv — инверсия маски

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

"masksProperties": [
  {
    "mode": "a",
    "pt": { ... },
    "o": { "a": 0, "k": 100 },
    "exp": { "a": 0, "k": 0 },
    "inv": false
  }
]

Каждая маска действует в рамках конкретного слоя и не выходит за его границы.

Основные типы масок в Lottie Web

Векторные маски (Path Masks)

Наиболее распространённый тип масок. Основан на векторных контурах, аналогичных shape layers в After Effects.

Характеристики:

  • Используют pt (path data)
  • Поддерживают ключевую анимацию
  • Могут изменять форму во времени
  • Работают быстрее, чем растровые аналоги

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

Ключевая особенность — полная синхронизация с анимацией shape layers, включая морфинг.

Альфа-маски (Alpha Masks)

Альфа-маска определяет видимость слоя на основе прозрачности другого слоя или его масочного пути.

В Lottie Web альфа-поведение достигается через комбинацию:

  • прозрачности маски (o)
  • режима наложения (mode)
  • геометрии пути

Фактически Lottie не использует отдельный “alpha channel mask” как bitmap-системы, а симулирует его через векторное перекрытие.

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

  • чёткое разделение видимой/невидимой области
  • высокая точность при сложных формах
  • зависимость от порядка масок

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

Инверсия маски задаётся через поле:

"inv": true

Поведение:

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

Инверсия особенно полезна для создания “вырезов” и отрицательных пространств.

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

  • обычная маска: показывается всё внутри формы
  • инвертированная: скрывается всё внутри формы

Множественные маски на одном слое

Lottie позволяет применять несколько масок одновременно. Они обрабатываются последовательно в порядке массива masksProperties.

Каждая следующая маска модифицирует результат предыдущей.

Типичные сценарии:

  • комбинирование форм
  • сложные области видимости
  • пересечение нескольких объектов

Важно учитывать:

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

Режимы масок (Mask Modes)

Поле mode определяет поведение маски относительно слоя.

Наиболее распространённые режимы:

Add (a)

Базовый режим.

  • добавляет область маски к видимой области
  • используется по умолчанию

Логика:

  • показывать пиксели внутри маски

Subtract (s)

Вычитание области маски.

  • исключает область внутри контура
  • используется для “дыр” и вырезов

Логика:

  • скрыть всё внутри маски

Intersect (i)

Пересечение областей.

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

Логика:

  • показать только совпадающие области нескольких масок

Дополнительные режимы (зависит от рендера)

Некоторые версии After Effects и экспортёры могут добавлять:

  • lighten
  • darken
  • difference

Однако в Lottie Web поддержка этих режимов ограничена и зависит от версии lottie-web и рендерера (SVG / Canvas).

Маски и Track Matte

Отдельный механизм, часто путаемый с масками — Track Matte (маттинг слоёв).

В Lottie это реализуется через поле слоя:

"tt": 1

Типы matte:

  • Alpha Matte
  • Alpha Inverted Matte
  • Luma Matte (в некоторых реализациях)

Отличие от масок

Маски Track Matte
применяются внутри слоя используют другой слой
описываются в masksProperties задаются через tt
могут быть множественными обычно один матт-слой
вычисляются локально зависят от соседнего слоя

Track Matte фактически использует визуальный контент другого слоя как маску.

Инверсия и режимы в сочетании

Комбинация mode и inv создаёт большое количество вариантов поведения:

  • Add + inverted → внешняя область контура
  • Subtract + inverted → внутренний вырез с обратной логикой
  • Intersect + multiple masks → сложные логические пересечения

При комбинировании важно учитывать порядок обработки:

  1. первая маска формирует базовую область
  2. последующие изменяют результат
  3. инверсия применяется на уровне конкретной маски до объединения

Маски и рендеринг в Lottie Web

SVG renderer

  • маски превращаются в SVG <clipPath> или <mask>
  • высокая точность
  • хорошая поддержка сложных форм

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

  • производительность зависит от DOM
  • сложные анимации могут замедлять layout

Canvas renderer

  • маски вычисляются через контексты globalCompositeOperation
  • используется растеризация путей
  • быстрее при большом количестве объектов

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

  • меньше точность на сложных кривых
  • возможны артефакты при масштабировании

HTML renderer (редко используется)

  • маски ограничены
  • чаще применяется для простых анимаций

Анимация масок

Маска в Lottie может быть анимирована через ключевые кадры:

  • изменение формы (pt)
  • изменение непрозрачности (o)
  • расширение/сжатие (exp)

Это позволяет создавать:

  • “раскрывающиеся” области
  • эффект появления через протирку
  • динамические окна просмотра

Особенность: анимация пути маски требует постоянного пересчёта геометрии на каждом кадре.

Производственные ограничения и оптимизация

Маски являются одним из наиболее дорогих по вычислениям элементов в Lottie.

Основные ограничения:

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

Практические аспекты:

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

Применение масок в реальных сценариях

Прогресс-индикаторы

Используются subtract-маски для “заполнения” или “среза” формы.

Reveal-анимации

Add-маска с анимируемым path создаёт эффект раскрытия интерфейса.

Текстовые эффекты

Маски применяются для поэтапного появления текста через геометрические окна.

UI-композиции

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

Особенности поведения в lottie-web

Библиотека lottie-web интерпретирует маски следующим образом:

  • преобразует JSON в внутреннее дерево слоёв
  • вычисляет геометрию масок на каждом frame tick
  • применяет композицию до отрисовки кадра
  • кеширует path data при возможности

Важный момент: разные версии lottie-web могут по-разному обрабатывать сложные комбинации matte + masks, особенно при смешении SVG и Canvas рендереров.

Оглавление