Структура файлов библиотеки

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

Базовая структура JSON строится вокруг корневого объекта, содержащего параметры композиции и набор слоёв:

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

Основные поля композиции

v — версия формата Lottie Определяет версию экспортера Bodymovin, использованную для генерации файла. Влияет на совместимость с интерпретатором.

fr — frame rate Количество кадров в секунду. Определяет временную дискретизацию анимации.

ip / op — in point и out point

  • ip (initial point) — начальный кадр композиции
  • op (out point) — конечный кадр композиции

Разница между op и ip определяет длительность анимации.

w / h — ширина и высота композиции Определяют базовое разрешение сцены. Эти значения не масштабируют анимацию автоматически, а задают систему координат.

nm — имя композиции Используется только для идентификации внутри проекта.

ddd — режим 3D

  • 0 — 2D композиция
  • 1 — включены 3D-слои

Структура слоя (layers)

Массив layers — центральная часть Lottie-файла. Каждый слой описывает отдельный элемент сцены: форму, изображение, текст или прекомпозицию.

Пример базового слоя:

{
  "ddd": 0,
  "ind": 1,
  "ty": 4,
  "nm": "Shape Layer",
  "ks": {},
  "shapes": [],
  "ip": 0,
  "op": 120,
  "st": 0,
  "bm": 0
}

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

ty — тип слоя:

  • 0 — precomp (вложенная композиция)
  • 1 — solid
  • 2 — image
  • 3 — null
  • 4 — shape layer
  • 5 — text

ind — индекс слоя Определяет порядок в стекe слоёв.

nm — имя слоя Используется для идентификации при разработке.

ip / op / st — временные параметры

  • ip — момент появления слоя
  • op — момент исчезновения
  • st — смещение времени

bm — режим наложения Определяет blending mode (аналог Photoshop режимов).

Параметры трансформации (ks)

Объект ks (keyframe system) описывает трансформации слоя: позицию, масштаб, вращение и прозрачность.

"ks": {
  "o": {},
  "r": {},
  "p": {},
  "a": {},
  "s": {}
}

Основные трансформации

p — position (позиция) Массив координат [x, y] или [x, y, z] при 3D.

a — anchor point Точка привязки трансформаций.

s — scale (масштаб) Проценты масштабирования по осям.

r — rotation (вращение) Угол поворота в градусах.

o — opacity (прозрачность) Диапазон от 0 до 100.

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

Любое анимируемое значение в Lottie может содержать ключевые кадры. Они описывают изменение параметра во времени.

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

Структура keyframe

t — time (кадр) Определяет момент времени.

s — start value Начальное значение параметра.

e — end value Конечное значение.

i / o — easing

  • i — incoming tangent
  • o — outgoing tangent

Эти параметры задают кривые Безье для плавности анимации.

Структура shape layers

Shape layer (ty: 4) содержит массив shapes, который описывает векторную графику.

"shapes": [
  {
    "ty": "rc",
    "p": {},
    "s": {},
    "r": {}
  }
]

Типы shapes

rc — rectangle (прямоугольник) el — ellipse (эллипс) sh — path (произвольный путь) fl — fill (заливка) st — stroke (обводка) tr — transform группы

Структура path-данных

Path (sh) описывается набором вершин и кривых:

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

Элементы пути

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

Эта структура соответствует Bezier-кривым, используемым в векторной графике.

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

Текстовый слой (ty: 5) содержит объект t, в котором описывается текстовая строка и стилизация.

"t": {
  "d": {
    "k": [
      {
        "s": {
          "t": "Text",
          "f": "Arial",
          "s": 50
        }
      }
    ]
  }
}

Основные параметры текста

t — строка текста f — шрифт s — размер шрифта lh — межстрочный интервал ls — межбуквенный интервал j — выравнивание

Текст может анимироваться так же, как и другие свойства, через keyframes.

Assets: внешние ресурсы

Массив assets содержит внешние ресурсы: изображения, прекомпозиции, шрифты.

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

Поля assets

id — идентификатор ресурса w / h — размеры изображения u — путь к папке p — имя файла e — external flag (внешний ресурс)

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

Precomp — это вложенная композиция, подключаемая как отдельный слой.

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

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

Глобальные метаданные

Дополнительные поля на уровне корня:

markers — маркеры анимации Используются для синхронизации событий.

"markers": [
  {
    "cm": "start",
    "tm": 0,
    "dr": 10
  }
]

nm — имя композиции ddd — 3D режим op / ip — временные границы всей сцены

Логика вложенности структуры

Структура Lottie-файла формирует иерархию:

  • Композиция (root)

    • assets (внешние ресурсы)

    • layers (слои сцены)

      • transform (ks)

      • shapes / text / image

        • keyframes

          • easing curves

Каждый уровень может содержать анимацию, что делает формат полностью декларативным.

Особенности интерпретации Lottie Web

Lottie Web не выполняет код в привычном смысле. JSON-файл интерпретируется как набор инструкций для рендера:

  • SVG renderer — для векторной графики
  • Canvas renderer — для растеризации
  • HTML renderer — для DOM-анимаций

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

Внутренняя модель данных

При загрузке JSON Lottie Web строит внутреннее дерево объектов:

  • CompInstance
  • LayerElement
  • ShapeElement
  • TextElement
  • ImageElement

Каждый объект содержит методы:

  • обновления состояния по времени
  • интерполяции keyframes
  • пересчёта матриц трансформации

Эта модель позволяет эффективно синхронизировать анимацию с requestAnimationFrame без потери кадров.

Иерархия преобразований

Трансформации применяются в строгом порядке:

  1. Anchor point
  2. Scale
  3. Rotation
  4. Position

Матрицы преобразований комбинируются, формируя итоговое положение объекта на сцене.

Структурная зависимость данных

Каждый элемент Lottie-файла связан с другими:

  • shapes зависят от transform (tr)
  • layers зависят от композиции
  • assets связываются через id
  • text зависит от font assets
  • keyframes управляют любыми значениями

Эта связность делает JSON не просто описанием, а полноценной декларативной сценой анимации.

Оглавление