Библиотека Lottie Web воспроизводит анимации, экспортированные из
After Effects через плагин Bodymovin. Однако не все эффекты, доступные в
After Effects, могут быть корректно интерпретированы в формате JSON и
воспроизведены в браузере. Поддержка ограничена возможностями SVG,
Canvas и HTML-рендеринга, а также самим форматом Lottie.
Поддерживаемые эффекты можно условно разделить на несколько
категорий:
- базовые трансформации
- эффекты слоя (Layer Styles)
- эффекты деформации
- маски и треки матирования
- эффекты прозрачности и смешивания
- частичная поддержка некоторых визуальных эффектов
Трансформации слоя
Базовые трансформации полностью поддерживаются и являются фундаментом
любой Lottie-анимации:
- Position (Позиция)
- Scale (Масштаб)
- Rotation (Поворот)
- Opacity (Непрозрачность)
- Anchor Point (Точка привязки)
Поддерживаются как статические значения, так и ключевые кадры с
интерполяцией. Также корректно работают easing-функции (Bezier curves),
что позволяет точно воспроизводить кривые анимации.
Shape Layer и его
возможности
Shape Layer — один из наиболее полно поддерживаемых типов слоев.
Поддерживаются:
Особенности:
- Градиенты поддерживаются (Linear и Radial), но с ограничениями по
количеству точек.
- Сложные операции объединения контуров могут вести себя
нестабильно.
Маски (Masks)
Маски поддерживаются достаточно хорошо:
- Add (Добавление)
- Subtract (Вычитание)
- Intersect (Пересечение)
Поддерживается:
- анимация формы маски
- feather (размытие края) — частично
- opacity маски
Ограничения:
- большое количество масок может сильно снижать
производительность
- сложные комбинации масок могут работать нестабильно в
Canvas-режиме
Track Matte (Треки
матирования)
Поддерживаются основные типы:
- Alpha Matte
- Alpha Inverted Matte
Используются для создания эффектов появления/скрытия через другой
слой.
Ограничения:
- Luma Matte не поддерживается
- сложные цепочки матирования могут приводить к некорректному
отображению
Layer Styles (Стили слоя)
Поддержка Layer Styles ограничена и зависит от конкретного
эффекта.
Частично поддерживаются:
- Drop Shadow (Тень)
- Inner Shadow
- Outer Glow
- Inner Glow
Особенности:
- визуальный результат может отличаться от оригинала в After
Effects
- некоторые параметры игнорируются
- производительность может снижаться при использовании нескольких
эффектов
Эффекты прозрачности и
смешивания
Поддерживаются:
- Opacity (прозрачность слоя)
- Blend Modes (режимы наложения) — частично
Доступные режимы:
- Normal
- Multiply
- Screen
- Overlay (ограниченно)
Ограничения:
- не все режимы After Effects доступны
- в Canvas-режиме поддержка хуже, чем в SVG
Деформации и
трансформационные эффекты
Поддержка деформаций ограничена.
Работают:
- Transform Effect (дополнительная
трансформация)
- простые анимации путей
Не поддерживаются:
- Warp (все виды)
- Puppet Tool
- Liquify
Любые сложные деформации должны быть запечены в ключевые кадры формы
(Path Animation).
Эффекты размытия
Поддержка ограничена:
- Gaussian Blur — частично (в SVG через фильтры)
- Fast Blur — может работать нестабильно
Особенности:
- сильное размытие снижает производительность
- визуальный результат отличается от After Effects
- в Canvas-режиме часто не поддерживается
Цветовые эффекты
Поддержка минимальна:
- Fill Effect — работает (замена цвета)
- Tint — частично
Не поддерживаются:
- Curves
- Levels
- Color Balance
- Lumetri Color
Рекомендуется:
- анимировать цвет напрямую в Shape Layer
- избегать пост-обработки цвета
Градиенты
Поддерживаются:
- Linear Gradient
- Radial Gradient
Возможности:
- анимация цветов
- анимация позиций точек
Ограничения:
- ограниченное количество цветовых точек
- возможны артефакты при сложных анимациях
Изображения и
Pre-composition
Поддерживаются:
- Image Layers
- Pre-compositions (прекомпозиции)
Особенности:
- изображения встраиваются или загружаются отдельно
- вложенные композиции работают корректно
Ограничения:
- большое количество изображений увеличивает размер JSON
- сложная иерархия композиций влияет на производительность
Текстовые слои
Поддержка текста:
- статический текст
- базовая анимация
- изменение позиции, масштаба, прозрачности
Ограничения:
Не поддерживаемые эффекты
Полностью отсутствует поддержка:
- 3D-слоев
- камер (Camera Layer)
- света (Light Layer)
- выражений (Expressions) — кроме базовых случаев
- плагинов (Trapcode, Particular и др.)
- симуляций (частицы, физика)
- видео-слоев
Производительность и
ограничения
Даже поддерживаемые эффекты могут влиять на производительность:
- большое количество слоев
- сложные маски
- градиенты и blur
- высокая частота кадров
- длинные анимации
Рекомендации:
- минимизировать количество слоев
- избегать тяжелых эффектов
- использовать Shape Layer вместо изображений, где возможно
- оптимизировать анимацию (удалять лишние ключевые кадры)
Особенности разных
рендереров
Lottie Web поддерживает три режима:
- SVG (по умолчанию)
- Canvas
- HTML
Различия:
- SVG — лучшая поддержка эффектов
- Canvas — лучше производительность, хуже эффекты
- HTML — используется редко
Выбор рендерера влияет на:
- корректность отображения
- поддержку эффектов
- скорость работы
Практический подход к
совместимости
Для гарантированной работы анимации:
- использовать только базовые возможности Shape Layer
- избегать сложных эффектов After Effects
- тестировать в браузере после экспорта
- при необходимости заменять эффекты ручной анимацией
Такой подход позволяет создавать предсказуемые и кросс-браузерные
анимации, полностью совместимые с Lottie Web.