В Lottie Web маски являются частью системы композитинга, определяющей, как отдельные области слоя ограничивают видимость содержимого и как несколько масок взаимодействуют между собой. При экспорте из After Effects маски транслируются в JSON-структуру Lottie и интерпретируются движком рендеринга (canvas, svg или html) как последовательность операций над альфа-каналом слоя.
Каждая маска описывается набором параметров: путь (shape), режим наложения, инверсия, растушёвка и прозрачность. Именно режим наложения определяет базовую логику объединения нескольких масок на одном слое.
Маски в Lottie Web применяются последовательно к одному слою и формируют итоговую область видимости через поэтапное вычисление:
В JSON Lottie маска выглядит примерно так:
{
"masksProperties": [
{
"mode": "a",
"pt": { /* shape data */ },
"o": { "k": 100 },
"x": { "k": 0 }
}
]
}Где:
mode — режим наложенияpt — геометрия маскиo — opacity (в процентах)x — expansion (расширение/сжатие маски)Режим Add является базовым и наиболее часто используемым. Он добавляет область маски к итоговой видимости слоя.
Поведение:
Формально можно рассматривать как:
Result = A ∪ B ∪ C ...где A, B, C — области масок.
Особенности:
Режим Subtract вычитает область маски из текущего результата. Это ключевой инструмент для создания «вырезов» внутри слоя.
Поведение:
Математическая модель:
Result = Base - MaskПри нескольких масках:
Result = (((Base - A) - B) - C)Особенности:
Режим Intersect оставляет только пересечение текущего результата и области маски.
Поведение:
Формально:
Result = A ∩ B ∩ C ...Особенности:
Каждая маска в Lottie Web может быть инвертирована через параметр
x.
Поведение инверсии:
Если обозначить маску как M, то:
Inverted = ¬MВ сочетании с режимами наложения инверсия радикально меняет результат:
В Lottie Web маски обрабатываются строго последовательно сверху вниз
(в порядке массива masksProperties).
Алгоритм:
Пример комбинирования:
Комбинации дают сложные формы, близкие к булевым операциям в векторной графике.
Порядок масок в Lottie имеет критическое значение, так как отсутствует глобальная буферизация всех операций перед вычислением.
В отличие от булевых операций в CAD-системах, Lottie использует последовательную модель:
(((Layer ⊕ Mask1) ⊕ Mask2) ⊕ Mask3)где ⊕ зависит от режима каждой маски.
Изменение порядка масок может полностью изменить результат композиции даже при идентичных геометриях.
Помимо режима наложения, каждая маска содержит дополнительные параметры:
o)Определяет силу воздействия маски:
x)Расширяет или сжимает контур маски:
Создаёт мягкие края:
Рендеринг масок зависит от используемого движка:
<mask>Режимы масок можно интерпретировать как набор булевых операций:
| Режим | Логика |
|---|---|
| Add | Union |
| Subtract | Difference |
| Intersect | Intersection |
Такая модель позволяет воспринимать маски как последовательные булевы преобразования над областью видимости слоя.
В практике Lottie-анимаций часто встречаются устойчивые схемы:
Несмотря на гибкость, система имеет ряд технических ограничений:
Эти ограничения влияют на итоговую визуальную стабильность и требуют учитывать поведение конкретного рендерера при создании анимаций.