Повторители и модификаторы

Повторитель — это мощный механизм в Lottie Web, позволяющий создавать множественные копии одного объекта с заданными трансформациями. Он применяется для генерации узоров, радиальных или линейных структур, анимаций с повторяющимися элементами без дублирования исходной графики.

Принцип работы

Повторитель берет исходный слой (или группу слоев) и создает его копии, применяя к каждой копии набор параметров трансформации:

  • Количество копий (Copies)
  • Смещение (Offset)
  • Трансформация (Transform per copy)

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

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

Copies (Количество копий)

Определяет, сколько экземпляров будет создано. Значение может быть дробным, что влияет на плавность анимации при изменении параметра.

animationData.layers[0].shapes[0].it[1].c.k = 10;

Offset (Смещение)

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

animationData.layers[0].shapes[0].it[1].o.k = 2;

Transform (Трансформация копий)

Каждая копия может отличаться от предыдущей по следующим параметрам:

  • Position (Позиция)
  • Scale (Масштаб)
  • Rotation (Вращение)
  • Opacity (Прозрачность)

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

{
  "tr": {
    "p": { "k": [20, 0] },
    "s": { "k": [95, 95] },
    "r": { "k": 10 },
    "o": { "k": 100 }
  }
}

Это означает:

  • каждая следующая копия смещается на 20px по X,
  • уменьшается на 5%,
  • поворачивается на 10 градусов.

Особенности использования

  • Повторитель применяется внутри shape-слоев
  • Порядок элементов важен: repeat применяется к объектам выше в списке
  • Можно комбинировать с другими модификаторами

Практический пример: линейная цепочка

Создание ряда кругов:

lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData
});

Внутри animationData:

  • один круг
  • repeat с 20 копиями
  • смещение по X

Результат: равномерный ряд объектов.

Радиальные повторители

При использовании вращения вместо линейного смещения можно получить круговые структуры:

"r": { "k": 18 }

При 20 копиях:

  • 360° / 20 = 18°
  • создается идеальный круг

Модификаторы (Modifiers)

Модификаторы — это дополнительные эффекты, которые изменяют геометрию или визуальные свойства shape-объектов.

В Lottie Web поддерживаются основные типы:

  • Trim Paths
  • Twist
  • Zig Zag
  • Offset Paths
  • Pucker & Bloat

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

Trim Paths

Позволяет анимировать отрисовку линий.

Параметры:

  • Start — начало отображаемого сегмента (%)
  • End — конец
  • Offset — смещение

Пример:

{
  "ty": "tm",
  "s": { "k": 0 },
  "e": { "k": 100 },
  "o": { "k": 0 }
}

Анимация линии создается изменением Start и End.

Zig Zag

Добавляет зигзагообразное искажение к форме.

Параметры:

  • Size — амплитуда
  • Points — количество сегментов
  • Type — угол или плавный

Пример:

{
  "ty": "zz",
  "s": { "k": 10 },
  "r": { "k": 5 }
}

Twist

Искажает объект вокруг центра, создавая эффект закручивания.

Параметры:

  • Angle — угол закрутки
  • Center — центр эффекта
{
  "ty": "tw",
  "a": { "k": 45 }
}

Pucker & Bloat

Сжимает или раздувает форму.

  • отрицательные значения — сжатие
  • положительные — расширение
{
  "ty": "pb",
  "a": { "k": 20 }
}

Offset Paths

Смещает контур внутрь или наружу.

Параметры:

  • Amount — величина смещения
  • Line Join — тип соединения
{
  "ty": "op",
  "a": { "k": 5 }
}

Комбинирование повторителей и модификаторов

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

Пример цепочки:

  1. Shape (круг)
  2. Zig Zag (искажение)
  3. Repeat (копирование)
  4. Transform

Порядок критичен:

  • если сначала repeat → затем zigzag — искажение применяется ко всем копиям
  • если наоборот — копируется уже искаженная форма

Иерархия обработки

Внутри shape-слоя элементы обрабатываются сверху вниз:

Shape
→ Modifier
→ Repeater
→ Transform

Это определяет итоговый результат.

Анимация параметров

Все параметры repeat и модификаторов могут анимироваться:

"c": {
  "k": [
    { "t": 0, "s": [1] },
    { "t": 60, "s": [20] }
  ]
}

Позволяет:

  • увеличивать количество копий
  • вращать структуру
  • изменять плотность узоров

Производительность

Использование repeat значительно экономит ресурсы:

  • нет необходимости дублировать объекты
  • уменьшается размер JSON
  • ускоряется рендеринг

Однако:

  • большое количество копий (>100) может снижать FPS
  • сложные модификаторы увеличивают нагрузку

Ограничения

  • repeat работает только внутри shape layers
  • не поддерживает растровые изображения напрямую
  • сложные комбинации могут вести к неожиданным визуальным эффектам

Практические паттерны

Волновые линии

  • линия
  • zigzag
  • trim paths
  • repeat

Спирали

  • repeat с rotation
  • постепенное уменьшение scale

Частицы

  • маленький shape
  • repeat
  • случайные смещения (через keyframes)

Работа с кодом

Хотя repeat и модификаторы чаще настраиваются в After Effects, их можно изменять динамически:

let anim = lottie.loadAnimation({...});

anim.addEventListener('DOMLoaded', () => {
  let layer = anim.renderer.elements[0];
  // доступ к параметрам через внутреннюю структуру
});

Важно учитывать:

  • структура JSON сложная
  • изменения требуют понимания внутреннего формата Lottie

Глубокая настройка через JSON

Пример repeat-блока:

{
  "ty": "rp",
  "c": { "k": 10 },
  "o": { "k": 0 },
  "tr": {
    "p": { "k": [30, 0] },
    "s": { "k": [90, 90] },
    "r": { "k": 5 },
    "o": { "k": 100 }
  }
}

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

  • ty: “rp” — repeat
  • c — copies
  • o — offset
  • tr — transform

Влияние на дизайн

Повторители позволяют:

  • создавать сложные паттерны из простых форм
  • уменьшать количество слоев
  • ускорять прототипирование анимаций

Модификаторы добавляют:

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

Совместное использование этих инструментов формирует основу процедурной анимации в Lottie Web.

Оглавление