Общая архитектура файла

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

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

{
  "v": "5.7.4",
  "fr": 30,
  "ip": 0,
  "op": 180,
  "w": 500,
  "h": 500,
  "nm": "Animation",
  "ddd": 0,
  "assets": [],
  "layers": []
}

Ключевые поля:

  • v — версия формата
  • fr — частота кадров (frames per second)
  • ip (in point) — начальный кадр
  • op (out point) — конечный кадр
  • w, h — размеры композиции
  • nm — имя
  • ddd — признак 3D-композиции
  • assets — внешние ресурсы
  • layers — основной массив слоёв

Слои (Layers)

Слои — центральный элемент архитектуры. Каждый слой соответствует элементу композиции в After Effects.

Пример слоя:

{
  "ddd": 0,
  "ind": 1,
  "ty": 4,
  "nm": "Shape Layer 1",
  "ks": {},
  "ip": 0,
  "op": 180,
  "st": 0
}

Основные свойства:

  • ind — уникальный индекс слоя
  • ty — тип слоя
  • nm — имя
  • ks — трансформации (ключевая структура)
  • ip, op — временные границы слоя
  • st — стартовый кадр

Типы слоёв

Поле ty определяет тип слоя:

  • 0 — pre-comp (вложенная композиция)
  • 1 — solid (заливка)
  • 2 — image (изображение)
  • 3 — null (служебный слой)
  • 4 — shape (векторная графика)
  • 5 — text (текст)

Каждый тип слоя имеет собственную структуру данных.

Трансформации (Transform / ks)

Объект ks (keyframes) описывает трансформации слоя:

"ks": {
  "o": { "k": 100 },
  "r": { "k": 0 },
  "p": { "k": [250, 250, 0] },
  "a": { "k": [0, 0, 0] },
  "s": { "k": [100, 100, 100] }
}

Параметры:

  • o — opacity (прозрачность)
  • r — rotation (вращение)
  • p — position (позиция)
  • a — anchor point (опорная точка)
  • s — scale (масштаб)

Каждое значение может быть:

  • статическим (k: 100)
  • анимированным (массив ключевых кадров)

Ключевые кадры (Keyframes)

Анимация задаётся через массив объектов:

"k": [
  {
    "t": 0,
    "s": [0],
    "e": [100],
    "i": { "x": 0.42, "y": 0 },
    "o": { "x": 0.58, "y": 1 }
  }
]

Структура ключевого кадра:

  • t — время (frame)
  • s — стартовое значение
  • e — конечное значение
  • i / o — кривые Безье (интерполяция)

Такая модель позволяет точно воспроизводить easing-анимации.

Shape-слои и их содержимое

Shape-слои (ty: 4) содержат массив shapes, описывающий геометрию:

"shapes": [
  {
    "ty": "gr",
    "it": []
  }
]

Типы элементов (ty) внутри shapes:

  • gr — группа
  • sh — путь (shape path)
  • rc — прямоугольник
  • el — эллипс
  • fl — заливка
  • st — обводка
  • tr — трансформация

Группы (gr) позволяют создавать вложенные структуры, аналогичные DOM-дереву.

Векторные пути (Shape Paths)

Пример описания пути:

{
  "ty": "sh",
  "ks": {
    "k": {
      "i": [],
      "o": [],
      "v": [],
      "c": true
    }
  }
}

Поля:

  • i — входящие касательные
  • o — исходящие касательные
  • v — вершины
  • c — замкнутый путь

Это соответствует кривым Безье, используемым в SVG.

Заливка и обводка

Заливка (fl):

{
  "ty": "fl",
  "c": { "k": [1, 0, 0, 1] },
  "o": { "k": 100 }
}

Обводка (st):

{
  "ty": "st",
  "c": { "k": [0, 0, 0, 1] },
  "w": { "k": 2 }
}

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

  • Цвет задаётся в RGBA (0–1)
  • Толщина линии (w) может анимироваться

Assets (ресурсы)

Массив assets содержит внешние ресурсы:

{
  "id": "image_0",
  "w": 512,
  "h": 512,
  "u": "images/",
  "p": "img_0.png"
}

Поля:

  • id — идентификатор
  • u — путь к папке
  • p — имя файла
  • w, h — размеры

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

Вложенные композиции (Pre-compositions)

Слой типа ty: 0 ссылается на элемент в assets:

{
  "ty": 0,
  "refId": "comp_1"
}

В assets:

{
  "id": "comp_1",
  "layers": []
}

Такая структура реализует переиспользование и модульность.

Маски (Masks)

Слои могут содержать маски:

"masksProperties": [
  {
    "mode": "a",
    "pt": { "k": {} },
    "o": { "k": 100 }
  }
]

Режимы:

  • a — add
  • s — subtract
  • i — intersect

Маски также используют кривые Безье.

Текстовые слои

Текст (ty: 5) содержит объект t:

"t": {
  "d": {
    "k": [
      {
        "s": {
          "t": "Hello",
          "f": "Arial",
          "s": 24
        }
      }
    ]
  }
}

Параметры:

  • t — текст
  • f — шрифт
  • s — размер

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

Общая иерархия

Итоговая структура файла:

Animation
 ├── metadata
 ├── assets
 │    ├── images
 │    └── precomps
 └── layers
      ├── transforms
      ├── shapes
      │    ├── groups
      │    ├── paths
      │    ├── fills/strokes
      │    └── transforms
      └── masks

Особенности архитектуры

Декларативный подход Анимация полностью описывается данными без исполняемого кода.

Иерархичность Каждый уровень вложенности влияет на итоговое преобразование.

Повторное использование Assets позволяют использовать одни и те же элементы многократно.

Анимация как данные Ключевые кадры описываются JSON-структурами, а не функциями.

Совместимость с SVG и Canvas Структура близка к SVG, что упрощает рендеринг в браузере.

Связь с Lottie Web

Библиотека Lottie Web интерпретирует JSON:

  • читает layers
  • строит дерево элементов
  • применяет трансформации
  • интерполирует ключевые кадры
  • рендерит через SVG / Canvas / HTML

Архитектура файла напрямую влияет на производительность:

  • большое количество слоёв увеличивает нагрузку
  • сложные paths замедляют рендеринг
  • частые keyframes увеличивают вычисления

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

Оглавление