Описание ресурсов и ассетов

Анимации в Lottie Web представляют собой JSON-документы, экспортированные из Adobe After Effects через плагин Bodymovin. Внутри этих файлов содержится не только описание слоёв и анимационных ключей, но и ссылки на внешние и встроенные ресурсы — ассеты (assets).

Раздел assets является центральным хранилищем всех дополнительных данных, необходимых для корректного воспроизведения анимации. К таким данным относятся изображения, прекомпозиции и иногда шрифтовые или векторные элементы.

Пример структуры:

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

Типы ассетов

Растровые изображения

Наиболее распространённый тип ассетов — изображения (PNG, JPG, WebP). Они используются в случаях, когда в анимации присутствуют сложные графические элементы, не представленные вектором.

Основные поля:

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

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

  • При e = 0 изображение загружается по сети
  • При e = 1 содержимое хранится прямо в JSON (base64), что увеличивает размер файла, но убирает зависимость от внешних ресурсов

Встроенные изображения (Base64)

При встраивании изображения кодируется в строку:

{
  "id": "image_1",
  "w": 256,
  "h": 256,
  "u": "",
  "p": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
  "e": 1
}

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

  • Отсутствие дополнительных HTTP-запросов
  • Полная автономность анимации

Недостатки:

  • Существенное увеличение размера JSON
  • Замедление парсинга при больших объёмах данных

Прекомпозиции (Precomps)

Пре-композиции — это вложенные композиции из After Effects. Они позволяют структурировать сложные анимации и переиспользовать элементы.

Пример:

{
  "id": "comp_0",
  "layers": [
    {
      "ty": 4,
      "nm": "Shape Layer"
    }
  ]
}

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

  • Используются как отдельные слои внутри основной композиции
  • Позволяют создавать иерархию анимаций
  • Могут включать собственные ассеты

Шрифты и текстовые ресурсы

Текст в Lottie Web может использовать системные или кастомные шрифты. Информация о шрифтах хранится в отдельном разделе:

{
  "fonts": {
    "list": [
      {
        "fName": "Roboto-Regular",
        "fFamily": "Roboto",
        "fStyle": "Regular"
      }
    ]
  }
}

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

  • Шрифты не всегда встраиваются автоматически
  • Требуется загрузка через CSS или Web Font Loader
  • При отсутствии шрифта возможна некорректная отрисовка

Связь ассетов со слоями

Каждый ассет используется через ссылки в слоях (layers). Связь осуществляется через поле refId.

Пример слоя:

{
  "ty": 2,
  "refId": "image_0",
  "nm": "Image Layer"
}

Типы слоёв:

  • ty: 2 — слой изображения
  • ty: 0 — прекомпозиция
  • ty: 4 — shape-слой (вектор)

Таким образом, assets — это библиотека ресурсов, а layers — механизм их использования.

Управление путями к ресурсам

Lottie Web предоставляет гибкие возможности управления загрузкой ассетов.

Параметр assetsPath

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

lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json',
  assetsPath: '/static/assets/'
});

Использование:

  • Перенос ассетов в CDN
  • Разделение структуры проекта
  • Оптимизация загрузки

Параметр imageLoader

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

lottie.setLocationHref(window.location.href);

Или кастомная реализация:

lottie.loadAnimation({
  imageLoader: customLoader
});

Применение:

  • Авторизация при загрузке ресурсов
  • Кэширование
  • Подмена источников

Оптимизация ассетов

Минимизация количества изображений

Рекомендуется:

  • Использовать векторные shape-слои вместо растровых изображений
  • Объединять изображения в спрайты (при необходимости)

Сжатие изображений

Эффективные подходы:

  • Конвертация PNG → WebP
  • Использование инструментов оптимизации (TinyPNG, ImageOptim)
  • Уменьшение разрешения до необходимого уровня

Удаление неиспользуемых ассетов

Иногда в JSON остаются лишние ресурсы:

  • После удаления слоёв в After Effects
  • При некорректном экспорте

Ручная очистка:

  • Проверка refId
  • Удаление неиспользуемых записей из assets

Lazy-loading

Для тяжёлых анимаций возможно:

  • Разделение анимации на части
  • Динамическая подгрузка JSON
  • Использование событий загрузки

Работа с динамическими ассетами

Lottie Web поддерживает замену ресурсов во время выполнения.

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

animation.renderer.elements[0].updateDocumentData({
  p: 'new-image.png'
});

Или через модификацию JSON перед загрузкой:

animationData.assets[0].p = 'new-image.png';

Применение:

  • Темизация интерфейса
  • Персонализация контента
  • Локализация

Подмена данных перед инициализацией

fetch('animation.json')
  .then(res => res.json())
  .then(data => {
    data.assets.forEach(asset => {
      if (asset.id === 'image_0') {
        asset.p = 'custom.png';
      }
    });

    lottie.loadAnimation({
      container: el,
      animationData: data
    });
  });

Особенности рендеринга ассетов

SVG Renderer

  • Изображения вставляются как <image> внутри SVG
  • Поддержка трансформаций и масок
  • Более гибкая работа с DOM

Canvas Renderer

  • Рисование напрямую на canvas
  • Быстрее при большом количестве элементов
  • Ограниченная доступность для манипуляций

HTML Renderer

  • Используется реже
  • Подходит для простых анимаций

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

Lottie Web автоматически кэширует ассеты:

  • Повторно используемые изображения не загружаются повторно
  • Прекомпозиции могут переиспользоваться

Рекомендации:

  • Использовать CDN для статических ресурсов
  • Настраивать HTTP-кэширование
  • Минимизировать размер JSON

Ошибки и проблемы

Не загружаются изображения

Причины:

  • Неверный путь (u + p)
  • Отсутствие assetsPath
  • CORS-ограничения

Битые ассеты

Проявления:

  • Пустые слои
  • Ошибки в консоли

Решение:

  • Проверка структуры JSON
  • Валидация экспортированных данных

Некорректное отображение

Возможные причины:

  • Отсутствие шрифтов
  • Несовместимые эффекты After Effects
  • Ошибки при экспорте Bodymovin

Практические рекомендации

  • Предпочтение векторной графике
  • Ограничение количества ассетов
  • Использование встроенных изображений только при необходимости
  • Структурирование прекомпозиций
  • Контроль путей и загрузки ресурсов
  • Регулярная оптимизация JSON-файлов

Грамотная работа с ассетами напрямую влияет на производительность, размер бандла и стабильность анимации в браузере.

Оглавление