Lottie Web интерпретирует анимации, экспортированные из Adobe After Effects через плагин Bodymovin, преобразуя их в JSON-формат. Основой любой анимации являются слои (layers), каждый из которых описывает визуальный элемент, его трансформации, эффекты и поведение во времени.
Каждый слой имеет базовый набор свойств:
ty — тип слояks — трансформации (позиция, масштаб, вращение,
прозрачность)ip, op — начальный и конечный кадрыst — сдвиг времениnm — имя слояind — индекс слояТип слоя определяет способ его рендеринга и доступные свойства.
Тип: ty: 4
Наиболее универсальный и часто используемый тип слоя. Содержит векторную графику, представленную набором примитивов и операций.
Поддерживаемые элементы внутри слоя:
rc)el)sh)fl)st)gf, gs)tr)Особенности:
gr)Пример структуры:
{
"ty": 4,
"shapes": [
{
"ty": "gr",
"it": [
{ "ty": "rc", "s": {...}, "p": {...} },
{ "ty": "fl", "c": {...} }
]
}
]
}Тип: ty: 1
Представляет собой прямоугольник с однотонной заливкой.
Свойства:
sw, sh — ширина и высотаsc — цветОсобенности:
Тип: ty: 2
Используется для отображения растровых изображений.
Свойства:
refId — ссылка на ресурс изображенияassetsОсобенности:
Тип: ty: 3
Невидимый слой, используемый для управления другими слоями.
Особенности:
parent)Тип: ty: 5
Отображает текст, включая стили и анимации.
Свойства:
t.d — данные текстаt.a — анимации текстаПоддержка:
fonts)Ограничения:
Тип: ty: 0
Слой, содержащий вложенную композицию.
Свойства:
refId — ссылка на другую композицию в
assetsОсобенности:
Маски применяются к слоям для ограничения области видимости.
Свойства:
masksProperties
Типы:
a — add (добавление)s — subtract (вычитание)i — intersect (пересечение)Особенности:
Каждый слой содержит объект ks (transform),
включающий:
p — позицияs — масштабr — вращениеo — прозрачностьa — anchor pointВсе параметры могут быть:
Lottie Web поддерживает ограниченный набор эффектов, так как не все возможности After Effects могут быть воспроизведены в браузере.
Позволяет изменять цвет слоя.
Поддержка:
Добавляет контур к фигурам.
Параметры:
Позволяет анимировать прорисовку линий.
Параметры:
Особенности:
Создает повторяющиеся копии фигур.
Параметры:
Поддержка линейных и радиальных градиентов.
Особенности:
Некоторые эффекты работают с ограничениями:
Следующие эффекты не поддерживаются или игнорируются:
Lottie Web поддерживает несколько режимов рендеринга:
Ключевые ограничения:
Слои могут взаимодействовать через:
parent)ip, op)Поддержка реализована частично.
Типы:
Особенности:
Все поддерживаемые свойства могут быть анимированы:
Анимация задается через keyframes:
{
"a": 1,
"k": [
{ "t": 0, "s": [0] },
{ "t": 30, "s": [100] }
]
}Не все функции After Effects корректно экспортируются:
Производительность напрямую зависит от:
Оптимизированная структура слоев обеспечивает: