Базовые векторные формы

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

В основе лежит концепция shape layer, внутри которого содержится массив объектов shapes. Каждый элемент этого массива описывает либо геометрию, либо визуальные атрибуты:

  • геометрические примитивы (rect, ellipse, star, path)
  • операции над формами (merge, trim, offset path)
  • стили (fill, stroke, gradient fill)
  • трансформации (transform)

Каждая форма не существует изолированно — она всегда вложена в структуру группы ("ty": "gr"), что позволяет комбинировать несколько фигур в единый объект.

Координатная система и трансформации

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

Ключевые параметры трансформации:

  • p — позиция (Position)
  • a — точка якоря (Anchor Point)
  • s — масштаб (Scale)
  • r — вращение (Rotation)
  • o — непрозрачность (Opacity)

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

Прямоугольники

Прямоугольник описывается объектом:

{
  "ty": "rc",
  "p": { "a": 0, "k": [0, 0] },
  "s": { "a": 0, "k": [200, 100] },
  "r": { "a": 0, "k": 10 }
}

Ключевые параметры:

  • p — центр прямоугольника
  • s — ширина и высота
  • r — радиус скругления углов

Прямоугольник всегда создаётся относительно центра группы, а не верхнего левого угла, что упрощает анимацию масштабирования и вращения.

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

Эллипсы и окружности

Эллиптические формы задаются через тип el:

{
  "ty": "el",
  "p": { "a": 0, "k": [0, 0] },
  "s": { "a": 0, "k": [150, 150] }
}

Если значения ширины и высоты совпадают, формируется окружность.

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

Звёзды и многоугольники

Тип sr (star) используется для построения как звёзд, так и правильных многоугольников:

{
  "ty": "sr",
  "p": { "a": 0, "k": [0, 0] },
  "pt": { "a": 0, "k": 5 },
  "ir": { "a": 0, "k": 40 },
  "or": { "a": 0, "k": 80 },
  "r": { "a": 0, "k": 0 }
}

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

  • pt — количество вершин
  • ir — внутренний радиус
  • or — внешний радиус
  • r — поворот

При изменении внутреннего радиуса от нуля до значения внешнего радиуса звезда постепенно трансформируется в правильный многоугольник.

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

Произвольные пути

Тип sh (shape) представляет кривые Безье и используется для сложных контуров:

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

Структура пути:

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

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

Группы и композиция форм

Группы ("ty": "gr") объединяют несколько shape-элементов:

{
  "ty": "gr",
  "it": [
    { "ty": "rc", "...": "..." },
    { "ty": "fl", "c": { "k": [1, 0, 0, 1] } }
  ]
}

Внутри группы порядок элементов критически важен:

  1. геометрия (rect, ellipse, path)
  2. модификаторы (trim, round corners)
  3. стили (fill, stroke)

Все элементы внутри группы наследуют трансформации группы, но могут иметь собственные локальные изменения.

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

Заливка (Fill)

{
  "ty": "fl",
  "c": { "a": 0, "k": [0.2, 0.6, 1, 1] },
  "o": { "a": 0, "k": 100 }
}
  • c — цвет в RGBA
  • o — непрозрачность

Заливка применяется ко всей геометрии, находящейся выше в массиве группы.

Обводка (Stroke)

{
  "ty": "st",
  "c": { "a": 0, "k": [0, 0, 0, 1] },
  "w": { "a": 0, "k": 4 },
  "lc": 2,
  "lj": 2
}

Параметры:

  • w — толщина линии
  • lc — тип окончания линии (butt, round, square)
  • lj — тип соединения углов (miter, round, bevel)

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

Модификаторы форм

Lottie поддерживает операции, изменяющие геометрию без изменения исходных точек:

Trim Path

Позволяет «обрезать» контур:

{
  "ty": "tm",
  "s": { "a": 0, "k": 0 },
  "e": { "a": 0, "k": 50 }
}
  • s — начало сегмента
  • e — конец сегмента

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

Round Corners

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

Порядок отрисовки

Внутри группы элементы отрисовываются сверху вниз по массиву it. Это означает:

  • более ранние элементы перекрываются последующими
  • заливка может перекрывать обводку, если расположена ниже в списке
  • модификаторы влияют на все последующие элементы

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

Пример структуры shape-layer

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

В сочетании с группой:

{
  "ty": "gr",
  "it": [
    { "ty": "sh", "...": "..." },
    { "ty": "fl", "c": { "k": [0, 1, 0, 1] } },
    { "ty": "st", "w": { "k": 3 } }
  ]
}

Использование Lottie Web в JavaScript

Библиотека lottie-web подключается как runtime для воспроизведения JSON-анимаций:

import lottie from "lottie-web";

lottie.loadAnimation({
  container: document.getElementById("animation"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animation.json"
});

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

Альтернативные режимы:

  • svg — векторный рендеринг
  • canvas — растровый рендеринг через Canvas API
  • html — DOM-based рендеринг

Особенности интерполяции форм

При анимации векторных форм Lottie использует покадровую интерполяцию параметров:

  • точки пути интерполируются независимо
  • радиусы и размеры масштабируются линейно
  • цвета интерполируются в RGBA-пространстве
  • трансформации вычисляются матрично

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

Взаимодействие форм с рендерером

SVG-рендерер преобразует каждую shape-структуру в соответствующие SVG-элементы:

  • rect → <rect>
  • ellipse → <ellipse>
  • path → <path>
  • fill → fill
  • stroke → stroke

При этом анимации транслируются в атрибуты transform, d, opacity, что позволяет браузеру использовать нативный механизм отрисовки без промежуточных пересчётов растровых изображений.

Оглавление