Кастомизация рендереров

В Lottie Web слой рендеринга отделён от описания анимации, что позволяет использовать разные стратегии отрисовки одного и того же JSON-описания. Основная модель строится вокруг выбора рендерера при инициализации анимации:

  • SVG
  • Canvas
  • HTML

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

SVG-рендерер: декларативная отрисовка через DOM

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

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

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

Настройки SVG renderer

Конфигурация SVG-рендерера передаётся через rendererSettings:

lottie.loadAnimation({
  container: document.getElementById('app'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json',
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid meet',
    progressiveLoad: true,
    hideOnTransparent: true
  }
});

preserveAspectRatio

Определяет поведение масштабирования SVG внутри контейнера. Значение влияет на:

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

progressiveLoad

Позволяет поэтапно загружать элементы SVG вместо полной отрисовки сразу. Это снижает пик нагрузки на DOM при сложных композициях.

hideOnTransparent

Управляет скрытием элементов с полной прозрачностью, снижая количество активных DOM-узлов.

Canvas-рендерер: растровая оптимизация

Canvas-рендерер формирует изображение через CanvasRenderingContext2D. В отличие от SVG, здесь отсутствует DOM-дерево анимации, что уменьшает нагрузку на браузер при большом количестве слоёв.

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

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

Canvas renderer settings

lottie.loadAnimation({
  container: document.getElementById('app'),
  renderer: 'canvas',
  loop: true,
  autoplay: true,
  path: 'animation.json',
  rendererSettings: {
    clearCanvas: true,
    context: null,
    scaleMode: 'noScale'
  }
});

clearCanvas

Определяет очистку холста перед отрисовкой каждого нового кадра. Включённый режим гарантирует отсутствие артефактов предыдущих кадров, но увеличивает нагрузку на GPU/CPU.

context

Позволяет передать внешний CanvasRenderingContext2D. Это используется в интеграциях с существующими графическими системами, где canvas управляется централизованно.

scaleMode

Определяет стратегию масштабирования:

  • noScale — фиксированное разрешение
  • fit — подгонка под контейнер
  • кастомные стратегии через обёртки canvas

HTML-рендерер: гибрид DOM и абстракции

HTML-рендерер использует DOM-элементы, но отличается от SVG тем, что строит структуру через HTML-теги и CSS-трансформации.

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

  • более гибкое управление стилями через CSS
  • лучшая интеграция с UI-слоями
  • меньшая точность по сравнению с SVG

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

Внутренняя модель rendererSettings

rendererSettings выступает точкой расширения поведения рендереров. Несмотря на различия SVG и Canvas, часть параметров унифицирована.

Общие принципы кастомизации

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

Контроль качества рендеринга

Lottie Web поддерживает динамическое управление качеством через API:

lottie.setQuality('high');

Возможные режимы:

  • high — максимальная детализация
  • medium — баланс производительности
  • low — упрощённая отрисовка

Режим качества влияет на:

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

Переопределение поведения рендеринга

Глубокая кастомизация достигается через модификацию жизненного цикла анимации. Рендеринг в Lottie Web привязан к циклу requestAnimationFrame, что позволяет вмешиваться в процесс отрисовки.

Управление кадровым циклом

const anim = lottie.loadAnimation({
  container: document.getElementById('app'),
  renderer: 'canvas',
  autoplay: false,
  loop: true,
  path: 'animation.json'
});

anim.setSpeed(1.2);
anim.play();

Изменение скорости влияет на временную шкалу, но не затрагивает сам рендерер, что сохраняет согласованность визуальной модели.

Расширение SVG через постобработку DOM

SVG-рендерер допускает модификацию DOM после построения сцены. Это используется для:

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

Пример модификации элементов:

anim.addEventListener('DOMLoaded', () => {
  const svg = document.querySelector('svg');
  svg.setAttribute('filter', 'url(#customFilter)');
});

Такой подход сохраняет совместимость с внутренней логикой Lottie, но позволяет расширять визуальную часть без изменения JSON.

Кастомные стратегии масштабирования

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

SVG масштабирование

  • основано на viewBox
  • управляется через preserveAspectRatio
  • сохраняет чёткость на любых DPI

Canvas масштабирование

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

Пример компенсации DPI:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const dpr = window.devicePixelRatio || 1;
canvas.width = 800 * dpr;
canvas.height = 600 * dpr;
ctx.scale(dpr, dpr);

Интеграция кастомных контейнеров

Lottie Web не ограничивает тип контейнера, что позволяет внедрять рендереры в сложные UI-архитектуры.

Применяются сценарии:

  • использование внутри Web Components
  • интеграция в React/Vue обёртки
  • рендеринг в offscreen canvas

В таких случаях renderer становится частью внешнего управляющего слоя, а не самостоятельным объектом.

Ограничения кастомизации рендереров

Несмотря на гибкость архитектуры, рендереры Lottie Web имеют ряд жёстких ограничений:

  • отсутствие полноценного plugin API для создания новых рендереров с нуля
  • ограниченная возможность вмешательства в внутренний граф сцены
  • зависимость от структуры JSON, экспортированного из After Effects

Расширение поведения обычно реализуется через обёртки, постобработку и перехват событий, а не через замену ядра рендеринга.

Поведение при смешанных режимах

При изменении рендерера между SVG, Canvas и HTML происходит полная пересборка сцены. Это означает:

  • уничтожение текущего дерева элементов
  • повторную инициализацию композиции
  • потерю состояния DOM-элементов

Поэтому переключение рендерера требует повторной загрузки анимации, а не динамической замены.

Управление производительностью через рендерер

Выбор рендерера напрямую влияет на стратегию оптимизации:

  • SVG подходит для небольших анимаций с высокой точностью
  • Canvas предпочтителен для сложных сцен и массовых эффектов
  • HTML эффективен при интеграции с интерфейсными компонентами

Оптимизация часто строится не только на выборе рендерера, но и на сочетании:

  • упрощения JSON
  • снижения количества слоёв
  • отключения лишних эффектов
  • контроля качества через API
Оглавление