Изображения и их встраивание

В Lottie-анимациях изображения представляют собой отдельные ресурсы, которые не кодируются как геометрия или векторные формы, а подключаются как внешние или встроенные ассеты. При экспорте из After Effects через Bodymovin изображения выделяются в отдельный блок данных и связываются с элементами композиции через идентификаторы.

В JSON-файле Lottie изображения хранятся в секции:

  • assets — массив ресурсов
  • каждый элемент содержит метаданные изображения
  • фактические данные могут быть ссылкой на файл или base64-строкой

Типичная структура:

"assets": [
  {
    "id": "image_0",
    "w": 512,
    "h": 512,
    "u": "images/",
    "p": "img_0.png",
    "e": 0
  }
]

Здесь:

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

Связь изображения с анимацией происходит через слой, содержащий ссылку на refId, который совпадает с id в assets.

Подключение изображений в Lottie Web

В Lottie Web изображения не «встраиваются» напрямую в DOM вручную. Вместо этого движок интерпретирует JSON и самостоятельно создаёт соответствующие элементы в зависимости от выбранного рендерера.

Инициализация анимации:

lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/data.json'
});

При использовании параметра path Lottie ожидает, что:

  • JSON содержит корректные ссылки на изображения
  • папка images/ доступна по HTTP
  • структура директорий сохранена

Режимы рендеринга изображений

SVG renderer

При использовании SVG-рендерера изображения вставляются как SVG-элементы <image>.

Особенности:

  • изображения сохраняют масштабирование через viewBox
  • используются атрибуты xlink:href или href
  • применяется preserveAspectRatio

Пример внутренней структуры:

<image href="images/img_0.png" width="512" height="512" />

Преимущества:

  • высокая чёткость на любом масштабе
  • интеграция с векторной сценой

Ограничения:

  • большое количество растровых изображений увеличивает DOM
  • возможны проблемы с CORS при внешних URL

Canvas renderer

При canvas-рендере изображения загружаются как HTMLImageElement и отрисовываются через drawImage.

Механика:

  • Lottie создаёт объект Image
  • ожидает загрузку ассета
  • кэширует изображения внутри внутреннего пула
  • при каждом кадре вызывает перерисовку на canvas

Фрагмент логики:

ctx.drawImage(img, x, y, width, height);

Особенности:

  • высокая производительность при большом количестве слоёв
  • отсутствие DOM-узлов
  • возможна потеря качества при масштабировании

HTML renderer

HTML-рендерер использует DOM-элементы <img>.

Поведение:

  • изображения становятся реальными DOM-узлами
  • применяются CSS-трансформации
  • управление происходит через абсолютное позиционирование

Плюсы:

  • простота интеграции с UI
  • возможность CSS-стилизации

Минусы:

  • высокая нагрузка на DOM при сложных сценах
  • менее точная синхронизация с анимацией

Встраивание изображений через base64

Lottie поддерживает хранение изображений внутри JSON в формате base64. В этом случае поле p содержит Data URI:

"p": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."

Преимущества:

  • отсутствие внешних запросов
  • гарантированная доступность ассетов
  • удобство при встраивании в единый файл

Недостатки:

  • увеличение размера JSON до 30–40%
  • более длительная загрузка и парсинг
  • рост потребления памяти

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

Папка images и относительные пути

При классическом экспорте Bodymovin создаёт структуру:

/animation
  data.json
  /images
    img_0.png
    img_1.png

В JSON указывается:

"u": "images/",
"p": "img_0.png"

Lottie Web формирует полный путь:

/animation/images/img_0.png

Критично, чтобы:

  • JSON и папка images находились на одном домене
  • структура директорий не изменялась
  • сервер отдавал корректные MIME-типы

Предзагрузка изображений

Lottie Web автоматически загружает изображения до старта анимации, если это возможно. Процесс включает:

  • парсинг JSON
  • извлечение всех assets
  • создание очереди загрузки
  • кэширование в памяти

В canvas-режиме изображения хранятся в Map-структуре, где ключом является id.

Кэширование и повторное использование ассетов

Если один и тот же ассет используется в нескольких слоях:

  • изображение загружается один раз
  • затем переиспользуется по ссылке
  • повторного HTTP-запроса не происходит

Это снижает нагрузку на сеть при сложных анимациях.

Масштабирование и качество изображений

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

  • SVG: масштабирование без потерь
  • Canvas: интерполяция браузера
  • HTML: CSS transform scaling

При увеличении масштаба выше оригинального размера:

  • bitmap-изображения теряют чёткость
  • SVG-обёртка сохраняет резкость композиции

Прозрачность и альфа-канал

Изображения в Lottie полностью поддерживают прозрачность:

  • PNG с альфа-каналом корректно отображаются
  • SVG-рендерер учитывает прозрачные области
  • canvas использует стандартный alpha blending

Особенности наложения:

  • порядок слоёв определяется JSON
  • blend modes из After Effects могут эмулироваться частично
  • некоторые режимы смешивания упрощаются в canvas-режиме

CORS и внешние изображения

При использовании внешних URL:

"p": "https://cdn.example.com/img_0.png"

возникают ограничения:

  • сервер должен отдавать Access-Control-Allow-Origin
  • canvas может быть «tainted» при нарушении политики
  • SVG может блокировать загрузку изображения

Рекомендуемая практика — размещение ассетов на том же домене или CDN с корректными заголовками.

Оптимизация изображений для Lottie-анимаций

При работе с большим количеством ассетов критичны следующие аспекты:

  • уменьшение разрешения до фактического размера отображения
  • использование WebP вместо PNG при поддержке рендерера
  • объединение мелких изображений в спрайты (если возможно логически)
  • минимизация количества уникальных ассетов

Canvas-рендер особенно чувствителен к количеству больших bitmap-изображений.

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

Lottie Web позволяет менять изображения во время выполнения через API:

animation.addEventListener('DOMLoaded', () => {
  animation.renderer.elements.forEach(el => {
    if (el.data && el.data.refId === 'image_0') {
      el.imageElement.src = 'new_image.png';
    }
  });
});

Используется для:

  • кастомизации интерфейсов
  • локализации графики
  • тематических вариаций одной анимации

При этом важно учитывать:

  • обновление не всегда пересчитывает размеры автоматически
  • требуется перерисовка кадра
  • возможны артефакты при смене в canvas

Ограничения изображений в Lottie

Несмотря на универсальность, механизм изображений имеет ограничения:

  • нет полноценной поддержки 9-slice scaling
  • отсутствует продвинутая работа с текстурами как в WebGL
  • ограниченная поддержка сложных blend modes
  • зависимость от структуры JSON

При чрезмерном количестве ассетов производительность резко падает, особенно в canvas-режиме.

Поведение при ошибках загрузки

Если изображение недоступно:

  • SVG может отобразить пустой элемент
  • canvas пропустит отрисовку слоя
  • HTML покажет broken image

Lottie не выполняет автоматический fallback на уровне движка, поэтому отсутствие ассета приводит к визуальному разрыву композиции.

Связь изображений с таймлайном анимации

Изображения могут:

  • появляться и исчезать по ключевым кадрам
  • трансформироваться (scale, rotation, opacity)
  • маскироваться другими слоями

Каждое изображение становится полноценным слоем композиции, участвующим в расчёте кадра наравне с векторными объектами.

Оглавление