Градиенты

Градиенты в анимациях Lottie представляют собой интерполяцию цветов между заданными точками. Они экспортируются из графических редакторов (например, Adobe After Effects через плагин Bodymovin) и преобразуются в JSON-структуру, которую интерпретирует библиотека Lottie Web.

В основе лежит массив значений, описывающий:

  • позиции цветовых точек (offsets)
  • значения RGB для каждой точки
  • дополнительные параметры прозрачности

Градиенты поддерживаются в двух вариантах:

  • линейные (Linear Gradient)
  • радиальные (Radial Gradient)

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

Структура градиента в JSON

Градиент в Lottie описывается объектом со следующими ключевыми полями:

  • t — тип градиента (1 — линейный, 2 — радиальный)
  • g — данные градиента (цвета и позиции)
  • s — начальная точка
  • e — конечная точка
  • o — непрозрачность

Пример:

{
  "t": 1,
  "g": {
    "p": 2,
    "k": [0, 1, 0, 0, 1, 0, 0, 1]
  },
  "s": [0, 0],
  "e": [100, 100],
  "o": { "k": 100 }
}

Разбор массива k:

  • каждая точка описывается 4 значениями: position, R, G, B
  • значения цвета находятся в диапазоне от 0 до 1
  • p — количество цветовых точек

Линейные градиенты

Линейный градиент определяется направлением от точки s к точке e. Цвет изменяется вдоль этой линии.

Ключевые особенности:

  • направление задаётся в координатах слоя
  • градиент не привязан к экрану — он трансформируется вместе с объектом
  • поддерживается анимация начальной и конечной точки

Пример визуальной логики:

s (start) ---------> e (end)
цвет A              цвет B

Анимация возможна по следующим параметрам:

  • перемещение s и e
  • изменение цветов (g.k)
  • изменение прозрачности

Радиальные градиенты

Радиальный градиент строится от центра к периферии. Центр задаётся точкой s, а радиус определяется расстоянием до e.

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

  • форма — круг или эллипс (при трансформациях)
  • градиент распространяется равномерно от центра
  • можно создавать эффекты свечения и глубины

Пример:

центр (s)
   ↓
распространение к (e)

Интерполяция цветов

Lottie использует линейную интерполяцию между цветовыми точками. Это означает, что:

  • между двумя точками цвета плавно смешиваются
  • каждая компонента RGB интерполируется отдельно

Если задано несколько точек:

[0.0, R1, G1, B1,
 0.5, R2, G2, B2,
 1.0, R3, G3, B3]

то результатом будет плавный переход:

  • от цвета 1 к цвету 2
  • затем от цвета 2 к цвету 3

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

Градиенты в Lottie могут анимироваться по нескольким направлениям:

1. Анимация цветов

Изменяется массив g.k:

"g": {
  "k": [
    { "t": 0, "s": [...] },
    { "t": 30, "s": [...] }
  ]
}

Это позволяет:

  • создавать переливы
  • имитировать свет
  • реализовывать динамические фоны

2. Анимация положения

Анимируются s и e:

"s": {
  "k": [
    { "t": 0, "s": [0, 0] },
    { "t": 60, "s": [200, 200] }
  ]
}

Используется для:

  • движения света
  • создания иллюзии объёма
  • динамических переходов

3. Анимация прозрачности

Поле o может изменяться во времени:

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

Производительность и ограничения

Градиенты — одна из наиболее ресурсоёмких частей Lottie-анимаций, особенно в браузерах.

Основные ограничения:

  • большое количество цветовых точек увеличивает нагрузку
  • анимация градиентов требует перерасчёта на каждом кадре
  • SVG-рендеринг может тормозить при сложных сценах

Рекомендации:

  • минимизировать количество точек (p)
  • избегать частой анимации цветов
  • использовать Canvas-рендерер для сложных сцен

Отличия SVG и Canvas рендеринга

В Lottie Web доступны разные рендереры, и градиенты работают в них по-разному.

SVG:

  • использует <linearGradient> и <radialGradient>
  • лучше подходит для статичных градиентов
  • возможны проблемы с производительностью

Canvas:

  • градиенты пересчитываются вручную
  • выше производительность при анимации
  • меньше ограничений

Практические паттерны использования

Псевдо-освещение

Радиальный градиент с анимацией центра создаёт эффект движущегося источника света.

Градиентные маски

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

Фоны

Анимированные линейные градиенты создают:

  • переливы
  • имитацию неба
  • абстрактные движения

Имитация глубины

Комбинация:

  • радиального градиента
  • прозрачности
  • масштабирования

даёт эффект трёхмерности.

Типичные проблемы

Полосатость (banding)

Причина:

  • недостаточное количество цветовых точек
  • ограничение цветового пространства

Решения:

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

Некорректное отображение

Иногда градиенты выглядят иначе, чем в Adobe After Effects:

Причины:

  • различия в цветовых профилях
  • особенности рендеринга браузера

Проблемы с анимацией

  • резкие переходы вместо плавных
  • некорректная интерполяция

Часто связано с:

  • неправильной интерполяцией ключевых кадров
  • ошибками экспорта через Bodymovin

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

Прямое управление градиентами через JavaScript ограничено, но возможно через модификацию JSON:

animation.renderer.elements[0].shapes[0].it[1].g.k = newGradient;

Однако:

  • структура может отличаться
  • изменения не всегда реактивны
  • требуется перерендеринг

Более надёжный подход — подготовка анимации на этапе дизайна.

Совместимость

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

  • всеми современными браузерами
  • мобильными WebView
  • большинством платформ, где используется Lottie Web

Ограничения возможны в:

  • старых версиях браузеров
  • нестандартных SVG-движках

Внутренняя логика обработки

Во время рендеринга:

  1. Читается массив g.k
  2. Формируется градиентная карта
  3. Интерполируются цвета
  4. Применяется к фигуре
  5. Обновляется каждый кадр (если есть анимация)

Этот процесс выполняется:

  • через DOM (SVG)
  • или через API Canvas

Расширенные техники

Комбинирование градиентов

Несколько градиентов можно накладывать:

  • через разные shape-слои
  • с использованием blend modes

Градиенты + трансформации

Интересные эффекты достигаются при сочетании:

  • вращения слоя
  • масштабирования
  • смещения градиента

Использование прозрачности в градиенте

Дополнительные значения в массиве позволяют задавать альфа-канал:

[position, R, G, B, alpha]

Это даёт:

  • мягкие переходы
  • эффекты тумана
  • затухание

Влияние на размер JSON

Градиенты существенно увеличивают размер файла:

  • каждая точка добавляет 4–5 чисел
  • анимация добавляет ключевые кадры

Оптимизация:

  • уменьшение количества точек
  • сокращение ключевых кадров
  • упрощение анимации

Связь с другими элементами Lottie

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

  • shape layers
  • масками
  • эффектами прозрачности
  • трансформациями

Это делает их важным инструментом для создания сложной визуальной динамики внутри Lottie Web.

Оглавление