Multiply, Screen, Overlay

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

В Lottie такие режимы описываются на уровне структуры композиции и интерпретируются рендерером (Canvas или SVG). В JSON-структуре анимации слой может содержать параметр смешивания, который определяет способ композитинга. При рендере этот параметр преобразуется в соответствующую графическую операцию браузера.

В Lottie Web существует два основных пути отрисовки:

  • Canvas renderer
  • SVG renderer

Каждый из них реализует режимы наложения по-своему.

В Canvas используется стандартное свойство:

ctx.globalCompositeOperation

Это низкоуровневый API HTML5 Canvas, определяющий способ объединения текущего слоя с уже нарисованным содержимым.

В SVG подход иной: используются фильтры:

<feBlend mode="multiply"/>
<feBlend mode="screen"/>

или комбинации filter primitives.

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

Режим умножения (Multiply)

Режим умножения относится к категории затемняющих режимов смешивания. Его математическая модель основана на поканальном умножении значений цветов.

В упрощённом виде:

Result = Base × Blend

Каждый цветовой канал (R, G, B) нормализуется в диапазон от 0 до 1, после чего перемножается.

Поведение в визуальном контексте

  • Белый цвет не изменяет базовый слой
  • Чёрный полностью затемняет результат
  • Цвета взаимодействуют, создавая более тёмные и насыщенные оттенки

Применение в Lottie

В анимациях Multiply часто используется для:

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

Canvas-реализация

ctx.globalCompositeOperation = "multiply";

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

При использовании Canvas важно учитывать, что порядок слоёв критичен: Multiply применяется к уже отрисованному буферу. В сложных композициях это может приводить к различиям между SVG и Canvas версиями.

Режим экрана (Screen)

Режим Screen является противоположностью Multiply и относится к группе осветляющих режимов.

Математическая модель:

Result = 1 - (1 - Base) × (1 - Blend)

Визуальное поведение

  • Чёрный не влияет на изображение
  • Белый полностью осветляет результат
  • Цвета создают яркие, светящиеся переходы

Типичные сценарии использования

В Lottie Screen применяется для:

  • эффектов свечения
  • бликов и отражений
  • имитации света (lens flare)
  • усиления яркости градиентов

Canvas-реализация

ctx.globalCompositeOperation = "screen";

Особенности восприятия цвета

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

Режим перекрытия (Overlay)

Overlay представляет собой комбинированный режим, который объединяет поведение Multiply и Screen в зависимости от яркости базового слоя.

Математическая логика

Если базовый пиксель темнее 50% серого:

Result = 2 × Base × Blend

Если светлее:

Result = 1 - 2 × (1 - Base) × (1 - Blend)

Визуальное поведение

  • Тёмные области становятся ещё темнее
  • Светлые области становятся ярче
  • Средние тона усиливаются по контрасту

Overlay сохраняет текстурную структуру изображения, одновременно повышая контрастность.

Использование в Lottie-анимациях

Overlay часто применяется для:

  • усиления контраста анимации без изменения исходных цветов
  • наложения деталей (noise, grain)
  • стилизации UI-анимаций
  • комбинирования градиентов с базовыми формами

Canvas-реализация

ctx.globalCompositeOperation = "overlay";

Представление режимов в структуре Lottie JSON

В Lottie-анимации режим наложения слоя задаётся числовым или перечислимым значением внутри описания слоя. Обычно используется поле, связанное с blending mode.

Пример упрощённой структуры:

{
  "layers": [
    {
      "ty": 4,
      "nm": "Shape Layer",
      "bm": 1
    }
  ]
}

Где:

  • bm — blending mode
  • числовое значение соответствует конкретному режиму

В разных версиях интерпретация может варьироваться, но логика сводится к маппингу:

  • 0 — normal
  • 1 — multiply
  • 2 — screen
  • 3 — overlay

Рендерер Lottie Web интерпретирует это значение и устанавливает соответствующий режим композитинга.

Внутренняя реализация в Lottie Web

При отрисовке слоя движок проходит несколько этапов:

  1. Подготовка offscreen canvas (буфера слоя)
  2. Рендеринг содержимого слоя
  3. Применение transform (позиция, масштаб, вращение)
  4. Применение alpha и blending mode
  5. Композитинг с родительским контекстом

При Canvas-рендере ключевая операция выглядит так:

ctx.save();
ctx.globalAlpha = layer.opacity;
ctx.globalCompositeOperation = layer.blendMode;
drawLayer(layer);
ctx.restore();

SVG-рендерер вместо этого создаёт фильтровую цепочку, что позволяет сохранять векторную природу элементов.

Отличия поведения Canvas и SVG

Canvas

  • Быстрее при большом количестве слоёв
  • Использует растровую модель
  • Зависит от порядка отрисовки
  • Ограничен поддерживаемыми режимами globalCompositeOperation

SVG

  • Сохраняет векторность
  • Использует фильтры
  • Может быть медленнее при сложных сценах
  • Позволяет более точную композицию в некоторых случаях

Различия особенно заметны в Overlay, где цветовые переходы могут интерпретироваться по-разному из-за различий в цветовых пространствах и алгоритмах фильтрации.

Производительность и оптимизация

Режимы Multiply, Screen и Overlay относятся к дорогим операциям композитинга, особенно при большом количестве слоёв.

Основные факторы влияния:

  • количество пересечений слоёв
  • размер canvas буфера
  • частота перерисовки
  • использование прозрачности

Типичные оптимизации

  • минимизация количества overlapping layers
  • группировка слоёв в precomposition
  • отключение blending там, где эффект не критичен
  • использование статических слоёв вместо динамических

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

Цветовое пространство и точность смешивания

Lottie Web в большинстве браузеров работает в sRGB пространстве. Это означает, что все вычисления blending modes происходят в нелинейном цветовом пространстве, что влияет на визуальный результат.

Multiply:

  • усиливает воспринимаемую насыщенность теней
  • может «грязнить» цвета при многослойности

Screen:

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

Overlay:

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

Взаимодействие с прозрачностью

Alpha-канал влияет на итоговый результат независимо от режима наложения. В Lottie Web порядок применения обычно следующий:

  1. вычисление цвета пикселя слоя
  2. применение alpha слоя
  3. применение blending mode

Это означает, что даже при сильных режимах типа Screen прозрачность может существенно ослаблять эффект.

Поведение при вложенных композициях

Lottie поддерживает precomposition (вложенные композиции), где blending modes могут применяться на уровне группы слоёв.

В таких случаях:

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

Это может приводить к различиям между «ожидаемым» визуальным результатом и фактическим, особенно при сложных цепочках Overlay внутри precomp.

Практические особенности интерпретации

При переносе анимаций из After Effects в Lottie:

  • не все blending modes могут поддерживаться одинаково
  • некоторые режимы эмулируются приближённо
  • SVG и Canvas могут давать различную визуализацию одного и того же JSON

Multiply и Screen обычно совпадают наиболее стабильно, Overlay чаще всего требует визуальной проверки из-за сложной логики смешивания.

Влияние порядка слоёв

Blending modes в Lottie являются некоммутативными операциями. Порядок слоёв напрямую влияет на результат.

Изменение последовательности:

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

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

Оглавление