Замена изображений и ресурсов

В формате Lottie все внешние изображения описываются внутри JSON-файла анимации как отдельные сущности в массиве assets. Каждому изображению соответствует объект с идентификатором, путем к ресурсу и метаданными размера.

Типичная структура asset выглядит следующим образом:

  • id — уникальный идентификатор изображения
  • p — путь к файлу (или имя файла)
  • u — базовый путь (обычно URL или папка)
  • w, h — ширина и высота
  • e — флаг встроенного ресурса (base64)

Внутри экспортированных из After Effects через Bodymovin анимаций изображения никогда не «вшиваются» в слои напрямую, а всегда ссылаются через систему assets. Это ключевой механизм, который делает возможной подмену ресурсов без изменения структуры анимации.

Механика подмены ресурсов в runtime

Lottie Web при инициализации анимации создает внутреннее представление всех assets и привязывает их к DOM (SVG/HTML) или Canvas-рендереру.

Загрузка выполняется через:

  • lottie.loadAnimation
  • animationData (JSON)
  • path (серверный источник)

При этом изображения не загружаются напрямую через внешний код приложения — они создаются внутри движка через внутренний asset-преобразователь.

Ключевая особенность: все изображения можно подменять до или после инициализации, так как они хранятся в едином реестре.

Замена изображений через модификацию animationData

Самый прямой способ изменения ресурсов — редактирование JSON перед передачей в движок.

Пример логики замены:

  • поиск объекта в animationData.assets
  • изменение поля p или u
  • сохранение структуры идентификаторов

Преимущество подхода заключается в том, что идентификаторы слоёв и привязки остаются неизменными, а значит анимация не ломается.

Особое значение имеет поле u (base URL). При его изменении можно централизованно перенаправить все изображения:

  • локальные файлы → CDN
  • тестовые ресурсы → production storage
  • стандартные ассеты → тематические наборы

Использование assetsPath для глобальной переадресации

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

lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animation.json',
  assetsPath: 'https://cdn.example.com/images/'
});

Механизм работает следующим образом:

  • p из JSON остаётся неизменным
  • assetsPath подставляется как префикс
  • итоговый URL формируется динамически

Этот способ особенно эффективен при смене окружений без модификации JSON-файлов.

Динамическая замена изображений после инициализации

После создания экземпляра анимации доступ к ресурсам осуществляется через объект animationItem. Внутренний список assets доступен через:

  • animationItem.assets
  • animationItem.renderer.elements

Изменение ресурсов на лету возможно через перебор массива assets и замену путей.

Пример логики:

  • найти asset по id
  • заменить p на новый URL
  • принудительно перерисовать слой

В SVG-рендерере изменения часто подхватываются автоматически, так как изображения представлены DOM-элементами <image>.

Подмена изображений через DOM-рендерер

При использовании SVG renderer каждый asset становится отдельным DOM-узлом. Это позволяет менять href у <image> элементов без вмешательства в структуру анимации.

Особенности поведения:

  • изображения вставляются как <image href="...">
  • обновление href приводит к мгновенной замене ресурса
  • CSS и фильтры остаются применимыми

В Canvas renderer такой подход невозможен, так как изображения компонуются в bitmap-слой.

Замена через обновление asset-реестра

Внутренний механизм управления ресурсами основан на карте соответствий:

  • asset.id → image element / texture

При необходимости полной подмены используется стратегия:

  • сохранить оригинальный id
  • заменить объект asset целиком
  • вызвать перерисовку композиции

Этот подход применяется при смене тем оформления, когда набор изображений полностью заменяется, но структура анимации сохраняется.

Работа с встроенными base64-ресурсами

Некоторые Lottie-файлы содержат изображения в виде base64:

  • поле e: 1
  • поле p содержит data URI

Подмена таких ресурсов отличается:

  • невозможно изменить URL
  • требуется замена строки base64
  • часто используется декодирование → замена → повторное кодирование

Такие ассеты встречаются в экспортированных анимациях с «встроенными» ресурсами, когда отсутствует внешняя файловая структура.

Подмена ресурсов через кастомный загрузчик

Внутри Lottie Web предусмотрена возможность перехвата загрузки изображений через кастомные методы загрузки данных.

Подход реализуется через:

  • переопределение сетевого слоя
  • перехват URL ассетов
  • подмена response до передачи в renderer

Это позволяет реализовать:

  • lazy-loading изображений
  • A/B тестирование графики
  • мультитеминг на уровне инфраструктуры

Смена ресурсов в зависимости от состояния приложения

Изображения в Lottie часто зависят от:

  • темы интерфейса
  • языка локализации
  • пользовательского профиля
  • режима (light/dark)

Реализация обычно строится на пересборке asset map:

  • базовый JSON остаётся неизменным
  • слой ресурсов подменяется через слой абстракции
  • идентификаторы слоёв совпадают, меняется только p или u

Такой подход исключает необходимость пересоздания анимации.

Ограничения подмены изображений

Подмена ресурсов имеет ряд технических ограничений:

  • Canvas renderer не поддерживает DOM-level замену
  • изменение размеров изображений может ломать композицию
  • несоответствие aspect ratio приводит к искажению слоёв
  • кеширование браузера может сохранять старые ресурсы

Особенно критично соблюдение исходных размеров (w, h), так как Lottie использует их для вычисления трансформаций слоёв.

Оптимизация работы с внешними ассетами

При интенсивной замене изображений важную роль играет кеширование:

  • использование CDN с версионированием
  • добавление hash в имя файла
  • контроль ETag и Cache-Control

Lottie Web не управляет кешем изображений напрямую, поэтому корректная стратегия загрузки ресурсов полностью зависит от внешней инфраструктуры.

Подмена изображений в композициях с несколькими сценами

В сложных анимациях один asset может использоваться в нескольких слоях или композициях. Это приводит к эффекту глобальной замены:

  • изменение одного asset влияет на всю анимацию
  • возможны побочные эффекты при частичной замене
  • требуется контроль ссылочной целостности

В таких случаях применяется стратегия клонирования assets:

  • создание копий с новым id
  • переназначение ссылок в слоях
  • изоляция визуальных блоков

Управление текстурами в Canvas-режиме

При использовании Canvas renderer изображения преобразуются в текстуры. Подмена требует:

  • пересоздания texture cache
  • вызова внутренних методов обновления рендера
  • иногда полной перезагрузки композиции

Этот режим менее гибкий по сравнению с SVG, но более производительный при большом количестве слоёв.

Использование прокси-слоя для ресурсов

На практике часто вводится промежуточный слой:

  • JSON не содержит прямых URL
  • p указывает на логический ключ
  • реальный URL вычисляется в runtime

Пример логики:

  • asset.id = "icon_star"
  • маппинг → icon_star → /dark/star.svg

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

Оглавление