Tint и Color Correction

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

Эффект Tint: принцип работы

Tint — это эффект, позволяющий заменить цвета изображения или анимации на основе градаций яркости. Он работает по принципу сопоставления:

  • тёмные участки → один цвет (Map Black To)
  • светлые участки → другой цвет (Map White To)

В результате создаётся градиентное преобразование всей анимации.

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

В экспортированном JSON эффект Tint представлен в блоке ef (effects) слоя:

  • Map Black To — цвет для тёмных пикселей
  • Map White To — цвет для светлых пикселей
  • Amount — интенсивность применения эффекта (0–100%)

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

"ef": [
  {
    "ty": 20,
    "nm": "Tint",
    "ef": [
      {
        "ty": 2,
        "nm": "Map Black To",
        "v": { "k": [1, 0, 0, 1] }
      },
      {
        "ty": 2,
        "nm": "Map White To",
        "v": { "k": [0, 1, 0, 1] }
      },
      {
        "ty": 0,
        "nm": "Amount",
        "v": { "k": 100 }
      }
    ]
  }
]

Поддержка Tint в Lottie Web

Lottie Web поддерживает эффект Tint частично:

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

При использовании необходимо учитывать:

  • Эффект применяется на уровне слоя
  • Не все типы слоёв корректно реагируют на Tint (например, pre-comp с растровыми элементами)

Динамическое изменение Tint через JavaScript

Lottie Web не предоставляет прямого API для изменения эффектов, но есть обходные пути:

1. Изменение JSON перед инициализацией

Наиболее надёжный способ — модификация JSON:

animationData.layers[0].ef[0].ef[0].v.k = [0, 0, 1, 1]; // Map Black To
animationData.layers[0].ef[0].ef[1].v.k = [1, 1, 0, 1]; // Map White To

После этого анимация загружается:

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

2. Использование expressions (ограниченно)

Expressions в After Effects экспортируются в Lottie, но:

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

Поэтому для Tint этот способ нестабилен.

Color Correction: базовые подходы

В Lottie Web отсутствует полноценная система цветокоррекции, как в After Effects. Однако есть несколько способов добиться похожего результата.

1. Манипуляция цветами shape-слоёв

Цвета фигур задаются через свойства fill (fl) и stroke (st):

"c": {
  "k": [0.2, 0.6, 0.8, 1]
}

Изменение цвета:

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

Преимущество:

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

Недостаток:

  • необходимо знать структуру JSON

2. Использование CSS-фильтров (для SVG)

При использовании SVG-рендерера возможно применение CSS:

#anim svg {
  filter: hue-rotate(90deg) brightness(1.2) contrast(1.1);
}

Доступные фильтры:

  • hue-rotate()
  • brightness()
  • contrast()
  • saturate()
  • grayscale()

Плюсы:

  • простота
  • динамическое изменение

Минусы:

  • применяется ко всей анимации
  • ограниченный контроль

3. SVG-фильтры (advanced)

Можно внедрить SVG-фильтр вручную:

<filter id="colorShift">
  <feColorMatrix type="matrix" values="
    1 0 0 0 0
    0 0 1 0 0
    0 1 0 0 0
    0 0 0 1 0"/>
</filter>

И применить:

document.querySelector('#anim svg').style.filter = 'url(#colorShift)';

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

  • менять каналы RGB
  • создавать сложные эффекты

Сравнение подходов

Метод Гибкость Производительность Управляемость
Tint (JSON) Средняя Высокая Средняя
Изменение fill/stroke Высокая Высокая Высокая
CSS-фильтры Низкая Очень высокая Низкая
SVG-фильтры Очень высокая Средняя Высокая

Ограничения и особенности

1. Canvas renderer

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

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

  • массовые изменения JSON могут замедлить загрузку
  • CSS-фильтры быстрее, но менее точны

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

  • разные версии Bodymovin по-разному экспортируют эффекты
  • Tint может отсутствовать при экспорте

Практические сценарии

Темизация интерфейса

Изменение цветов под светлую/тёмную тему:

if (darkMode) {
  animationData.layers.forEach(layer => {
    // изменение fill цветов
  });
}

Интерактивные состояния

Изменение цвета при hover:

element.addEventListener('mouseenter', () => {
  svg.style.filter = 'brightness(1.2)';
});

Брендирование

Подмена цветовой схемы под бренд:

  • замена основных цветов в JSON
  • использование Tint для быстрых прототипов

Рекомендации по работе

  • избегать сложных эффектов After Effects, не поддерживаемых Lottie
  • использовать shape-слои вместо растровых изображений
  • заранее проектировать анимацию с учётом возможной смены цветов
  • хранить несколько версий JSON при критичной цветовой логике

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

Типичная структура слоя:

layers → shapes → it → fill/stroke → color

Поиск нужного элемента:

function findFill(layer) {
  return layer.shapes.find(s => s.ty === 'fl');
}

Итоговая модель работы с цветом в Lottie

  1. Базовый цвет задаётся в After Effects

  2. Экспортируется в JSON

  3. Модифицируется:

    • напрямую (JSON)
    • через DOM (SVG)
    • через CSS

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

Оглавление