Миграция старых анимаций

Миграция начинается с анализа исходного JSON, сформированного более ранними версиями Bodymovin. Старые экспортированные файлы часто содержат несовместимые или частично устаревшие конструкции, которые по-разному интерпретируются различными версиями Lottie Web.

Ключевые зоны проверки:

  • Формат версии (v) — в старых файлах встречаются значения, не отражающие актуальную схему данных Lottie. Это влияет на интерпретацию ключевых кадров и слоёв.
  • Слои (layers) — возможны различия в типах слоёв, особенно при наличии precomposition, image layers и shape layers.
  • Геометрия и трансформации — параметры transform могли сериализоваться иначе, включая несовместимые поля anchor point и scale.
  • Assets — пути к изображениям и вложенным композициям часто теряют актуальность при переносе между проектами.

Особое внимание уделяется структурам, которые в новых версиях интерпретируются иначе или вовсе игнорируются, что приводит к визуальным артефактам.

Изменения в схеме Shape Layers

Одной из наиболее частых проблем миграции являются shape-слои, экспортированные из старых версий After Effects через Bodymovin.

Булевы операции и merge shapes

В ранних версиях поддержка операций объединения фигур (merge paths) была ограниченной. В новых версиях Lottie Web логика этих операций стала строже и ближе к поведению After Effects.

Проблемные зоны:

  • неправильный порядок операций boolean-логики
  • потеря вложенных групп shape group
  • несовместимость старых mm (merge mode) параметров

Stroke и Fill

В старых анимациях возможны некорректные параметры:

  • отсутствие lineCap и lineJoin
  • некорректные значения dash patterns
  • устаревшая сериализация градиентов

При миграции важна проверка соответствия всех визуальных атрибутов актуальной спецификации Lottie.

Пре-композиции и вложенность слоёв

Precomposition является наиболее чувствительной частью миграции.

Старые версии часто экспортировали precomp как:

  • плоские структуры без сохранения оригинальной иерархии
  • частично развернутые композиции
  • упрощённые контейнеры слоёв

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

  • сохраняется оригинальная иерархия слоёв
  • корректно интерпретируются маски внутри precomp
  • поддерживается независимая система трансформаций

Основная проблема миграции заключается в различиях интерпретации координатных систем: вложенные композиции могут менять поведение anchor point и scale относительно родительского слоя.

Маски и track mattes

Старые анимации часто содержат несовместимые реализации масок.

Маски

Ранее поддержка масок была ограниченной и часто приводила к:

  • игнорированию feather параметров
  • некорректному объединению нескольких масок
  • потере сложных форм маскирования

В современных версиях Lottie Web маски обрабатываются через унифицированный pipeline, однако старые структуры могут требовать нормализации.

Track mattes

Типичные проблемы:

  • перепутанные индексы слоёв
  • отсутствие поддержки некоторых режимов matte
  • различия в интерпретации alpha vs luma mattes

При миграции требуется проверка соответствия индексации слоёв и их визуального порядка.

Проблемы ключевых кадров

Ключевые кадры в старых JSON-файлах могут иметь структурные отличия.

Интерполяция

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

  • линейная интерполяция без easing-кривых
  • неполная поддержка bezier handles
  • некорректная сериализация spatial interpolation

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

Hold keyframes

В старых анимациях hold-кадры могли кодироваться неявно, что приводило к:

  • неожиданным скачкам анимации
  • смещению временной шкалы при рендеринге

Изменения в рендерерах Lottie Web

Lottie Web поддерживает несколько режимов рендеринга:

  • SVG
  • Canvas
  • HTML

Старые анимации часто были оптимизированы под SVG-рендерер, что создаёт проблемы при миграции на Canvas.

SVG-специфика

SVG-рендерер чувствителен к:

  • структуре DOM-дерева
  • количеству path-элементов
  • сложным градиентам

Старые JSON могут содержать конструкции, которые создают избыточные DOM-узлы в новых версиях.

Canvas-рендерер

Canvas-режим требует более строгой геометрической консистентности. Проблемы возникают при:

  • некорректных масках
  • нестабильных stroke-dash анимациях
  • сложных blend modes

Обновление изображений и ассетов

Старые проекты часто используют устаревшую систему ассетов.

Типичные проблемы:

  • относительные пути, не соответствующие новой структуре сборки
  • отсутствие fallback-логики для изображений
  • несовместимость форматов (PNG/JPEG/WebP)

В современных реализациях Lottie Web используется более строгая модель загрузки ресурсов, где каждый asset должен быть явно определён в JSON через assets массив и корректно разрешаться во время инициализации.

Проблемы шрифтов

Шрифты являются одной из наиболее нестабильных частей миграции.

Старые анимации часто:

  • используют локальные шрифты без декларации в JSON
  • не содержат fallback-стратегий
  • предполагают наличие системных шрифтов

В Lottie Web современные версии требуют явного описания font assets или замены текста на shape layers. При отсутствии корректной декларации возможны:

  • замена текста на пустые блоки
  • изменение метрик текста
  • сдвиг baseline и line-height

Совместимость версий Bodymovin

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

Характерные несовместимости:

  • изменение структуры JSON между major версиями
  • удаление или переименование параметров эффектов
  • изменение логики экспорта expressions

Особенно критичны изменения в:

  • expressions-driven properties
  • shape modifiers
  • repeater behavior

Оптимизация после миграции

После переноса анимаций в актуальный формат Lottie Web требуется дополнительная нормализация производительности.

Основные зоны оптимизации:

  • снижение количества path точек
  • упрощение gradient meshes
  • минимизация вложенных precomposition
  • устранение избыточных keyframes

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

Особенности поведения на разных устройствах

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

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

  • различие в anti-aliasing между SVG и Canvas
  • изменения таймингов на устройствах с высокой частотой обновления экрана
  • расхождения в обработке blur и shadow эффектов

Старые анимации, не учитывающие DPR (device pixel ratio), особенно подвержены визуальным расхождениям после перехода на новые версии Lottie Web.

Нестабильные конструкции старых анимаций

Наиболее проблемные элементы, встречающиеся в legacy JSON:

  • сложные выражения After Effects, не полностью поддерживаемые Lottie
  • nested trim paths с конфликтующими временными диапазонами
  • нестандартные easing curves
  • частично повреждённые shape groups

Такие конструкции требуют либо упрощения в исходном проекте, либо ручной правки JSON после экспорта.

Изменения поведения событий и API

Lottie Web API также претерпевал изменения, влияющие на миграцию интеграций:

  • различия в событиях DOMLoaded, complete, loopComplete
  • изменение поведения setSpeed и goToAndPlay
  • различия в обработке destroy и повторной инициализации

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

Стабилизация результата миграции

Финальный этап связан с приведением всех анимаций к единообразной модели исполнения. Основное внимание сосредоточено на согласовании:

  • временных шкал
  • координатных систем
  • слоевой структуры
  • рендерингового поведения

После нормализации структура JSON становится совместимой с актуальным Lottie Web без визуальных расхождений между платформами и режимами рендеринга.

Оглавление