Precomposition (прекомпозиции) в контексте After Effects представляет собой вложенную композицию, которая содержит собственный набор слоёв, анимаций и таймлайнов. При экспорте через Bodymovin структура сохраняется в виде вложенных сущностей внутри JSON, используемого библиотекой Lottie Web.
Внутренняя модель Lottie опирается на иерархию, где сцена может включать ссылки на другие композиции, что формирует древовидную структуру анимации. Это ключевой механизм переиспользования и логического разделения сложных сцен.
При экспорте композиции Bodymovin формирует два основных уровня:
layers)assets)Precomp обычно попадает в assets как объект с уникальным
идентификатором и собственным массивом слоёв.
{
"id": "comp_precomp_1",
"layers": [
{
"ty": 4,
"nm": "Shape Layer inside Precomp"
}
]
}В основной композиции такой precomp подключается через слой с типом композиции:
{
"ty": 0,
"refId": "comp_precomp_1",
"nm": "Precomp Layer"
}Ключевые поля:
ty: 0 — слой-композицияrefId — ссылка на объект внутри
assetsid — идентификатор precomp в списке ассетовlayers — внутренние слои композицииLottie Web обрабатывает precomps как отдельные мини-композиции, которые рендерятся в рамках родительского контекста.
При построении сцены происходит:
refIdassetsИерархия трансформаций сохраняется, включая:
Таким образом, precomp ведёт себя как единый слой, но фактически является контейнером сложной структуры.
Precomps позволяют строить многоуровневые структуры:
Main Composition
├── Shape Layer
├── Precomp A
│ ├── Shape Layer A1
│ ├── Precomp B
│ │ ├── Shape Layer B1
├── Image LayerLottie Web рекурсивно проходит по этой структуре, создавая независимые графы анимации для каждого уровня.
Особенность заключается в том, что каждый уровень сохраняет собственное локальное пространство координат, которое затем преобразуется в глобальное.
Precomps выполняют роль логических модулей, позволяя разделять сложную анимацию на изолированные блоки.
Основные сценарии применения:
При работе с Lottie Web это влияет на:
Каждый precomp увеличивает глубину рекурсивного рендеринга. Lottie Web при отрисовке:
Проблемные аспекты:
Оптимизация достигается через:
Каждый precomp имеет собственную временную шкалу, но синхронизированную с родительской композицией.
Внутренний time mapping включает:
При этом Lottie Web не всегда полностью поддерживает сложные time-remap конструкции, что может приводить к упрощению поведения анимации внутри precomp.
Precomp-слой ведёт себя как единый объект, но его внутренняя структура сохраняет независимые координаты.
Порядок трансформаций:
Особое внимание:
В Lottie Web поддержка expressions ограничена, однако при экспорте некоторые результаты выражений «запекаются» в ключевые кадры внутри precomp.
Это приводит к следующим особенностям:
Эффекты, применённые к precomp в After Effects, могут:
Lottie Web предоставляет доступ к управлению анимацией, включая доступ к структуре слоёв, но precomps остаются частью внутреннего дерева.
Пример загрузки композиции:
const animation = lottie.loadAnimation({
container: document.getElementById('anim'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'animation.json'
});Доступ к структуре:
animation.renderer.elementsКаждый элемент может содержать ссылку на вложенные элементы, соответствующие precomp-структурам.
Precomps особенно эффективны в следующих архитектурных паттернах анимации:
При переносе из After Effects часто возникают ограничения:
Lottie Web интерпретирует результат как статическую структуру слоёв с ограниченной семантикой композиции.
Precomps выступают как модульная система внутри единого JSON-графа.
С точки зрения Lottie:
refIdТакая модель позволяет строить масштабируемые анимационные сцены без необходимости плоской структуры слоёв.