Stroke и Fill

В Lottie структура векторной графики строится вокруг слоёв и групп, экспортируемых из After Effects в формат JSON. Элементы Fill и Stroke являются базовыми примитивами, определяющими визуальное заполнение и контур формы. В Lottie Web они интерпретируются как набор операций Canvas или SVG-рендеринга, в зависимости от выбранного режима.

Каждая shape-группа может содержать несколько операторов рендеринга, где порядок элементов критически влияет на итоговый результат. Fill и Stroke всегда привязываются к конкретному пути (path), а не существуют отдельно.

Fill: заливка формы

Fill представляет собой сплошное заполнение замкнутого контура цветом. В Lottie JSON он описывается через объект fl (fill) внутри группы shape.

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

c (color) — цвет заливки в формате RGBA
o (opacity) — прозрачность слоя заливки
fillEnabled — активность заливки (в некоторых версиях экспорта)

Цвет хранится как массив из трёх или четырёх значений от 0 до 1:

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

Здесь используется нормализованная RGB-модель, где значение 1 соответствует 255 в стандартной 8-битной палитре.

Прозрачность задаётся отдельно:

"o": { "k": 80 }

Это значение интерпретируется как процент непрозрачности.

Особенности поведения Fill

Fill применяется только к замкнутым путям. Если контур не замкнут, Lottie Web автоматически не создаёт визуальную заливку, даже если параметр присутствует в JSON.

При наличии нескольких Fill в одной группе применяется правило наложения по порядку: каждый последующий Fill перекрывает предыдущий в рамках одной shape-группы.

Stroke: обводка контура

Stroke отвечает за отрисовку линии вдоль заданного пути. В JSON он представлен объектом st.

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

c (color) — цвет линии
o (opacity) — прозрачность
w (width) — толщина линии
lc (line cap) — тип окончания линии
lj (line join) — тип соединения сегментов
d (dash pattern) — пунктирная структура

Цвет и прозрачность Stroke

Цвет обводки задаётся аналогично Fill:

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

Прозрачность влияет на итоговую интенсивность линии и может анимироваться независимо от толщины.

Толщина линии и её интерпретация

Параметр w определяет ширину обводки в пикселях (или условных единицах композиции).

"w": { "k": 10 }

В Lottie Web толщина интерпретируется с учётом масштабирования слоя. При трансформациях scale визуальная толщина может изменяться, если не применяется компенсация transform flattening.

Типы соединений и окончаний

Line Cap (lc)

Определяет форму концов линии:

1 — butt (прямой срез)
2 — round (закругление)
3 — square (удлинённый квадрат)

Закруглённые окончания увеличивают визуальную длину сегмента за счёт радиуса.

Line Join (lj)

Определяет поведение в точках соединения сегментов:

1 — miter (острый угол)
2 — round (скругление)
3 — bevel (срезанный угол)

При использовании miter может применяться ограничение miter limit, предотвращающее чрезмерно длинные углы.

Пунктирные линии (Dash Pattern)

Stroke может содержать массив d, описывающий чередование штрихов и пробелов.

Структура:

"d": [
  { "n": "d", "v": { "k": 10 } },
  { "n": "g", "v": { "k": 5 } }
]

Где:

d — длина штриха
g — длина промежутка

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

Взаимодействие Fill и Stroke в одной группе

В одной shape-группе Fill и Stroke могут сосуществовать одновременно. Порядок их объявления определяет результат визуального наложения.

Типичный порядок:

Path
Stroke
Fill

Если Fill размещён выше Stroke, он может визуально перекрывать обводку, особенно при высокой opacity.

В Lottie Web рендеринг выполняется последовательно, поэтому каждый слой влияет на буфер отрисовки.

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

Практически все свойства Fill и Stroke поддерживают ключевую анимацию через k:

"o": {
  "k": [
    { "t": 0, "s": [100] },
    { "t": 20, "s": [0] }
  ]
}

Таким образом можно анимировать:

прозрачность заливки
цветовые переходы
толщину обводки
dash offset
даже RGB-компоненты цвета

Анимация цвета

Цвет хранится как массив, поэтому изменение происходит по каждому каналу:

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

Это позволяет реализовывать плавные переходы без дополнительных слоёв.

Особенности рендеринга в Lottie Web

При работе через Canvas renderer:

Stroke может терять субпиксельную точность при масштабировании
Anti-aliasing зависит от устройства и DPR
Толщина линии округляется до ближайших пикселей

При SVG renderer:

Stroke и Fill сохраняют векторную точность
Dash patterns интерпретируются нативно SVG
Цветовые переходы могут зависеть от поддержки браузера

Наследование и трансформации

Fill и Stroke не существуют в изоляции от трансформаций слоя:

Scale влияет на визуальную толщину Stroke
Rotation не влияет на Fill напрямую, но меняет геометрию пути
Opacity слоя может умножаться с opacity Fill/Stroke

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

Особенности композитинга

При пересечении нескольких shape-групп с Fill и Stroke используется альфа-композитинг:

Fill формирует сплошную заливку, участвующую в blending
Stroke часто накладывается поверх Fill, создавая визуальный контур
При overlap нескольких слоёв порядок определяет результат смешивания

Некоторые режимы смешивания (blending modes) могут радикально изменять поведение Fill и Stroke, особенно при использовании multiply или screen.

Ограничения реализации

В Lottie Web существуют ограничения по сравнению с After Effects:

Нет поддержки сложных градиентных stroke в полном объёме SVG AE
Некоторые эффекты stroke trimming могут вести себя иначе в Canvas
Dash animation может терять плавность при низком frame rate
Нестандартные line join комбинации могут рендериться упрощённо

Также важно учитывать, что экспорт из After Effects часто оптимизирует структуру shape-групп, объединяя Fill и Stroke в более простые конструкции, что влияет на читаемость JSON, но не на визуальный результат.