В Adobe After Effects понятие сегмента в контексте подготовки анимации для Lottie Web связано с логическим и временным разбиением композиции на управляемые участки, которые затем интерпретируются экспортёром Bodymovin как отдельные анимационные блоки. Эти блоки становятся основой для воспроизведения сложных сцен в формате JSON без потери структуры анимации.
Базовый уровень сегментации задаётся через таймлайн композиции. Каждый проект в After Effects имеет строго определённый диапазон времени, в пределах которого строится анимация. Этот диапазон ограничивается параметрами Work Area, а также In/Out точками композиции.
Work Area определяет активный сегмент, который может быть экспортирован в Lottie. Всё, что выходит за его пределы, игнорируется при генерации JSON. Это ключевой механизм, позволяющий выделять конкретные части анимации для экспорта без необходимости разделения проекта на отдельные композиции.
In/Out точки слоёв формируют дополнительный уровень сегментации. Каждый слой может иметь собственный временной диапазон активности, который влияет на то, какие ключевые кадры попадут в итоговую структуру.
Маркерная система After Effects применяется для логического разбиения анимации на смысловые блоки. В контексте подготовки Lottie-анимаций маркеры композиции и слоёв выполняют роль указателей границ сегментов.
Маркер композиции задаёт глобальный сегмент внутри всей сцены. Он может использоваться для определения начала и конца отдельных анимационных сцен внутри одной композиции. При экспорте Bodymovin маркеры интерпретируются как дополнительные метаданные, которые помогают структурировать JSON-выход.
Маркер слоя, в отличие от композиционного, локализован. Он определяет сегмент конкретного элемента: например, появления, трансформации или исчезновения объекта. Такие маркеры часто используются для синхронизации анимации нескольких слоёв.
Precomposition является одним из наиболее мощных инструментов сегментации. Каждый прекомпоз фактически превращается в отдельный независимый контейнер анимации, который экспортируется как вложенная структура.
При использовании Lottie Web каждый precomp становится отдельным сегментом JSON, что позволяет изолировать сложные анимации и повторно использовать их в разных частях проекта.
Ключевые свойства сегментации через precomposition:
Shape Layer в After Effects предоставляет механизм Trim Paths, который фактически создаёт непрерывный сегмент пути с изменяемыми границами отображения.
Trim Paths управляет видимостью геометрии вдоль контура, задавая параметры Start, End и Offset. В Lottie Web эти параметры транслируются в числовую интерполяцию, формирующую динамический сегмент линии.
Этот механизм особенно важен для анимации:
Trim Paths создаёт не статический временной отрезок, а параметрический сегмент, изменяющийся во времени.
Time Remapping позволяет переопределить временную структуру слоя, создавая нестандартные сегменты воспроизведения. Вместо прямого соответствия времени композиции и слоя появляется промежуточная функция отображения времени.
В контексте Lottie это приводит к генерации нелинейных временных сегментов, где один участок анимации может повторяться, зацикливаться или воспроизводиться с изменённой скоростью.
Типичные сценарии применения:
Ключевые кадры формируют базовую структуру сегментов на уровне свойств. Любое анимируемое свойство в After Effects разбивается на интервалы между ключевыми кадрами, каждый из которых представляет собой сегмент интерполяции.
Lottie Web экспортирует эти сегменты как кривые Безье или линейные интерполяции, в зависимости от типа easing. Таким образом, каждый участок между ключами становится самостоятельной единицей анимации.
Сегментация по ключевым кадрам особенно важна для:
Маски в After Effects формируют пространственные сегменты, ограничивающие видимую область слоя. В Lottie Web поддержка масок ограничена, однако базовые операции интерпретируются как сегментация альфа-канала или пути обрезки.
Маска определяет:
При анимации масок создаются временно-пространственные сегменты, где изменяется не только форма, но и область существования визуального элемента.
Shape Layers содержат внутреннюю иерархию: группы, пути, заливки и обводки. Каждая группа фактически является сегментом в структуре векторной графики.
В Lottie Web эта иерархия сохраняется как JSON-дерево, где каждая группа представляет отдельный узел с собственными параметрами анимации.
Сегментация внутри Shape Layers включает:
Такое разбиение позволяет независимо анимировать части одного векторного объекта.
Expressions в After Effects создают вычисляемые зависимости, которые формируют условные сегменты анимации. Хотя Lottie не поддерживает expressions напрямую, многие из них могут быть преобразованы в статические или параметрические значения при экспорте.
Логическая сегментация через expressions проявляется в:
Вложенные композиции создают многоуровневую сегментацию проекта. Каждый уровень вложенности добавляет новую временную и структурную границу.
В Lottie Web такая структура превращается в дерево анимационных объектов, где каждая композиция становится независимым сегментом с собственной временной шкалой.
Иерархия обеспечивает:
Многослойные композиции требуют согласования временных сегментов между различными элементами. Синхронизация осуществляется через выравнивание ключевых кадров, маркеров и общих временных шкал.
При экспорте в Lottie Web несогласованные сегменты приводят к рассинхронизации анимации, поэтому структура таймингов должна быть строго выверена.
Синхронизация обеспечивает: