Метаданные анимации

Файл анимации Lottie представляет собой JSON-документ, содержащий не только описание визуальных слоёв, но и обширный набор метаданных. Эти данные определяют поведение анимации, её параметры воспроизведения, совместимость и контекст использования.

Ключевые метаданные располагаются на верхнем уровне JSON-объекта и служат основой для корректной интерпретации анимации библиотекой Lottie Web.

Основные поля метаданных

v (version)

Указывает версию формата Lottie/Bodymovin, в которой была экспортирована анимация.

"v": "5.7.4"

Значение критично для обратной совместимости: разные версии могут по-разному интерпретировать свойства, эффекты и слои.

fr (frame rate)

Частота кадров анимации.

"fr": 30

Определяет, сколько кадров воспроизводится за секунду. От этого зависит плавность и точность таймингов.

ip (in point) и op (out point)

Начальный и конечный кадры анимации.

"ip": 0,
"op": 180
  • ip — первый кадр
  • op — последний кадр (не включительно)

Общая длительность вычисляется как:

(op - ip) / fr

w и h (width и height)

Размеры области анимации в пикселях.

"w": 512,
"h": 512

Используются для масштабирования и корректного отображения в контейнере.

nm (name)

Имя анимации.

"nm": "Loading Animation"

Не влияет на выполнение, но полезно для отладки и управления набором анимаций.

ddd (3D flag)

Флаг использования 3D-слоёв.

"ddd": 0
  • 0 — только 2D
  • 1 — присутствуют 3D-слои

Lottie Web ограниченно поддерживает 3D, поэтому значение влияет на интерпретацию слоёв.

Дополнительные метаданные

assets

Список ресурсов, используемых в анимации.

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

Может включать:

  • изображения
  • вложенные композиции
  • видео (в ограниченных случаях)

layers

Хотя это не чисто метаданные, список слоёв содержит структурную информацию:

"layers": [ ... ]

Каждый слой имеет собственные метаданные:

  • ty — тип слоя
  • nm — имя
  • ind — индекс
  • parent — связь с родительским слоем

markers

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

"markers": [
  {
    "tm": 60,
    "cm": "halfway",
    "dr": 0
  }
]

Поля:

  • tm — время (в кадрах)
  • cm — комментарий (имя маркера)
  • dr — длительность

Маркеры позволяют:

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

Метаданные композиции

meta

Дополнительная информация об экспорте:

"meta": {
  "g": "LottieFiles AE 1.0.0",
  "a": "",
  "k": "",
  "d": "",
  "tc": ""
}

Содержит:

  • инструмент экспорта (g)
  • дополнительные комментарии

Не влияет на воспроизведение, но полезна для анализа источника.

Цветовое пространство и профили

Хотя Lottie не содержит явного поля для цветового профиля, важно учитывать:

  • цвета задаются в формате RGBA (0–1)
  • интерпретация зависит от среды (браузера)

Пример:

"c": {
  "k": [1, 0, 0, 1]
}

Это соответствует красному цвету.

Тайминг и синхронизация

Метаданные тесно связаны с временной шкалой:

  • fr задаёт дискретность
  • ip и op ограничивают диапазон
  • ключевые кадры (k) внутри слоёв используют эти значения

Ошибки в метаданных могут привести к:

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

Интерпретация в Lottie Web

При загрузке анимации:

lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: data
});

Lottie Web:

  1. Читает метаданные верхнего уровня
  2. Инициализирует таймлайн
  3. Настраивает рендерер (SVG/Canvas)
  4. Загружает ресурсы из assets
  5. Строит сцену на основе layers

Влияние метаданных на производительность

Некоторые поля напрямую влияют на эффективность:

  • fr (frame rate) Высокие значения увеличивают нагрузку

  • w/h (размер) Большие размеры требуют больше ресурсов

  • assets (изображения) Большие файлы замедляют загрузку

  • markers Позволяют оптимизировать воспроизведение, избегая лишних вычислений

Проверка и валидация метаданных

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

  • несовпадение версии (v)
  • некорректные диапазоны (ip > op)
  • отсутствующие ресурсы в assets
  • неправильные пути (u, p)

Практика включает:

  • валидацию JSON
  • тестирование в Lottie Web
  • использование инструментов вроде Bodymovin preview

Расширение метаданных

Допускается добавление пользовательских полей:

"custom": {
  "author": "John Doe",
  "category": "UI"
}

Lottie Web игнорирует неизвестные поля, что позволяет:

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

Связь метаданных с управлением анимацией

Метаданные используются при программном управлении:

animation.goToAndStop(60, true);

Здесь:

  • 60 — кадр, связанный с fr, ip, op
  • маркеры могут использоваться вместо чисел:
animation.playSegments([start, end], true);

Особенности при экспорте из After Effects

Bodymovin формирует метаданные автоматически:

  • версия плагина записывается в meta.g
  • FPS берётся из композиции
  • размеры — из настроек проекта

Ошибки на этапе экспорта приводят к:

  • неправильным значениям fr
  • лишним кадрам (op)
  • некорректным маркерам

Итоговая структура верхнего уровня

Типичный JSON:

{
  "v": "5.7.4",
  "fr": 30,
  "ip": 0,
  "op": 180,
  "w": 512,
  "h": 512,
  "nm": "Example",
  "ddd": 0,
  "assets": [],
  "layers": [],
  "markers": [],
  "meta": {}
}

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

Оглавление