Слои и их типы

Lottie Web работает с анимациями как с иерархией слоёв, где каждый слой представляет отдельный визуальный или логический объект композиции. Структура слоёв напрямую наследуется из After Effects и сохраняется в JSON-описании, которое интерпретируется движком во время рендеринга. Понимание типов слоёв критично для анализа производительности, корректного экспорта и предсказуемого поведения анимации в браузере.

Каждый слой в Lottie описывается объектом с набором стандартных полей:

ty — тип слоя
ks — трансформации (position, scale, rotation, opacity)
shapes — содержимое (для shape layers)
t — текстовые данные (для text layers)
refId — ссылка на прекомпозицию или изображение
parent — иерархическая связь
masksProperties — маски
blendMode — режим наложения
ip, op — диапазон видимости слоя по кадрам

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

Shape Layer (векторный слой)

Shape Layer (ty: 4) является основой большинства современных Lottie-анимаций.

Структура

Shape layer состоит из массива фигур:

rc — прямоугольник
el — эллипс
sh — путь (Path)
st — обводка (Stroke)
fl — заливка (Fill)
tr — трансформация группы

Каждая форма может содержать анимируемые свойства через keyframes.

Особенности

Полностью векторный формат
Поддерживает boolean-операции (merge, trim paths)
Высокая производительность при рендеринге
Основной тип для UI-анимаций

Trim Paths

Один из ключевых операторов shape layers:

анимирует «рисование» линий
работает поверх path
применяется к stroke

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

Text Layer (текстовый слой)

Text Layer (ty: 5) содержит данные типографики.

Основные компоненты

t.d.k — структура текста
s — стиль (font, size, color, tracking)
t.a — выравнивание
анимационные пресеты текста

Особенности реализации

Текст в Lottie не является DOM-элементом, а рендерится как векторная или canvas-структура:

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

Анимация текста

Типовые эффекты:

opacity per character
position jitter
tracking animation
path-follow text (ограниченно)

Image Layer (растровый слой)

Image Layer (ty: 2) представляет внешние изображения.

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

ссылки на ассеты через refId
изображения не хранятся внутри JSON
загрузка происходит отдельно через assets

Ограничения

отсутствие масштабируемости без потери качества
зависимость от загрузки ресурсов
ограниченная анимация внутри слоя

Использование

Чаще применяется для:

иконок
иллюстраций
сложных текстур, невозможных в векторе

Solid Layer (заливка цветом)

Solid Layer (ty: 1) — базовый прямоугольный слой с цветом.

Свойства

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

Роль в композиции

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

Solid часто комбинируется с масками и blend modes для создания сложных визуальных эффектов.

Precomposition Layer (прекомпозиция)

Precomposition (ty: 0) — слой, ссылающийся на другую композицию.

Механика

содержит refId, указывающий на вложенную композицию
работает как вложенный таймлайн
сохраняет собственную структуру слоёв

Применение

модульность анимаций
повторное использование элементов
организация сложных сцен

Особенность

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

Null Layer (нулевой слой)

Null Layer (ty: 3) не имеет визуального представления.

Назначение

управление группой слоёв
родительские трансформации
централизованное управление анимацией

Свойства

не рендерится
содержит только transform (ks)
используется как контроллер

Null layer является ключевым инструментом построения сложных rigging-систем.

Adjustment Layer (корректирующий слой)

Adjustment Layer (ty: 11) применяется к слоям ниже по иерархии.

Поведение

влияет на все нижележащие слои
используется для эффектов постобработки

Типичные эффекты

blur
color correction
glow

Поддержка в Lottie ограничена и зависит от рендера.

Guide Layer (направляющий слой)

Guide Layer (ty: 10) используется как вспомогательный.

Особенности

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

В Lottie может игнорироваться или полностью удаляться при экспорте.

Маски слоёв

Каждый слой может содержать masksProperties.

Типы масок

Add
Subtract
Intersect
Lighten / Darken (в зависимости от реализации)

Параметры маски

path (анимируемый путь)
opacity
feather
expansion

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

Порядок наложения и иерархия

Слои рендерятся в порядке массива:

нижние элементы — фон
верхние элементы — передний план

Иерархия parent создаёт зависимость трансформаций:

дочерний слой наследует transform родителя
возможна цепочка зависимостей

Blend Modes

Поддерживаются режимы наложения:

multiply
screen
overlay
add
darken / lighten

Реализация зависит от canvas или SVG рендера в Lottie Web.

Анимация свойств слоёв

Каждый слой может содержать keyframes:

position (p)
scale (s)
rotation (r)
opacity (o)

Keyframes могут быть:

линейными
bezier-интерполированными
hold (ступенчатыми)

Анимация применяется ко всей структуре слоя независимо от его типа.

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

Разные типы слоёв имеют разную стоимость рендеринга:

Shape layers — оптимальны
Text layers — средняя нагрузка
Image layers — зависят от размера ассетов
Precompositions — увеличивают вложенность
Masks — повышают стоимость отрисовки

Глубокая иерархия parent-child и большое количество shape операций напрямую влияет на FPS в браузере.

Комбинирование типов слоёв

Реальные Lottie-анимации почти всегда используют комбинации:

shape + null (для управления)
text + mask (для reveal эффектов)
precomp + image (для сложных сцен)
shape + trim paths (для динамических линий)

Такой подход позволяет строить сложные интерфейсные анимации без растровой графики и тяжёлых GPU-шейдеров.