Отладка проблем с рендерингом

Архитектура рендеринга и источники проблем

Lottie Web опирается на JSON-анимации, экспортированные из After Effects через Bodymovin, и поддерживает три основных рендерера: svg, canvas и html. Любая проблема рендеринга почти всегда связана с несоответствием между тем, как анимация была создана, и тем, как она интерпретируется конкретным рендерером.

Ключевой момент: Lottie Web не «рисует» анимацию заново, а интерпретирует структуру JSON как набор инструкций для DOM, Canvas API или SVG. Ошибка на любом уровне пайплайна — экспорт, JSON, загрузка, рендеринг — приводит к визуальным артефактам.

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

SVG vs Canvas vs HTML

Разные рендереры интерпретируют одни и те же данные по-разному:

  • SVG renderer

    • Точный, векторный вывод
    • Проблемы с масками и сложными эффектами
    • Чувствителен к DOM-структуре

  • Canvas renderer

    • Более стабильный для сложных сцен
    • Возможны расхождения в антиалиасинге
    • Потери точности при трансформациях

  • HTML renderer

    • Использует DOM-элементы
    • Подходит для простых анимаций
    • Часто ломается при сложных масках и эффектах

Типичная проблема: анимация корректно выглядит в LottieFiles preview, но ломается в production — причина часто в другом рендерере по умолчанию.

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

Проблемы с масштабированием и координатами

Несоответствие viewBox и контейнера

Одной из самых частых причин «съехавшей» анимации является неправильное масштабирование:

  • фиксированный width/height контейнера
  • отсутствие preserveAspectRatio
  • несоответствие viewBox внутри SVG

Lottie динамически вычисляет размеры, но CSS может ломать расчет.

Типичный симптом:

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

Device Pixel Ratio

На Retina-экранах Canvas-рендерер может выглядеть размытым:

  • причина: отсутствие учета devicePixelRatio
  • решение: увеличение scale внутри рендерера

Ошибки экспорта из After Effects

Bodymovin как источник нестабильности

Большая часть проблем возникает на этапе экспорта:

  • неподдерживаемые эффекты
  • выражения (expressions), не конвертированные в keyframes
  • сложные blend modes
  • 3D-слои

Симптомы:

  • элементы исчезают
  • анимация «замирает»
  • неожиданные прыжки keyframes

Особенно проблемны:

  • Gaussian Blur
  • Drop Shadow
  • Advanced easing curves

Маски и track mattes

Самая хрупкая часть Lottie

Маски часто рендерятся некорректно:

  • различия между SVG clipPath и Canvas masking
  • неправильная иерархия слоев
  • потеря альфа-канала

Типичные ошибки:

  • маска работает в preview, но исчезает в браузере
  • инвертированная маска
  • частичное отображение слоя

Причина часто кроется в:

  • unsupported matte modes
  • неправильной группировке слоев в AE

Шрифты и текстовые слои

Отсутствие шрифтов на клиенте

Если шрифт не встроен в JSON:

  • используется fallback font
  • ломается верстка текста
  • изменяются размеры блоков

Glyph vs font rendering

Lottie может экспортировать:

  • glyph shapes (векторные буквы)
  • текстовые слои

Glyph более стабильны, но увеличивают размер JSON.

Проблемы:

  • переносы строк ломают layout
  • неверные anchor points
  • различие между системами рендеринга

Асинхронная загрузка и race conditions

Частая ошибка инициализации

Если контейнер не готов:

  • animation создаётся с нулевыми размерами
  • происходит неверный расчет bounding box
window.addEventListener('load', () => {
  lottie.loadAnimation({...});
});

Или при React/Vue:

  • useEffect до реального mount DOM

Ошибки JSON и структура данных

Повреждённый или неполный JSON

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

  • обрезанный файл при загрузке
  • неверный MIME type
  • CORS блокировка

Симптомы:

  • silent fail (ничего не рендерится)
  • console errors без stack trace

CORS и загрузка ассетов

Проблема внешних ресурсов

Если animation использует изображения:

  • браузер блокирует загрузку
  • canvas становится «пустым»
  • SVG отображается частично

Ошибка проявляется особенно часто при:

  • CDN без CORS headers
  • относительных путях в production

Конфликты CSS и DOM

SVG renderer и CSS inheritance

SVG-элементы наследуют стили страницы:

  • line-height
  • font-size
  • transform
  • filter

Это приводит к:

  • неожиданным смещениям
  • размытию
  • конфликтам z-index

Особенно опасно:

svg {
  all: unset;
}

или глобальные reset стили.

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

requestAnimationFrame и throttling

На слабых устройствах:

  • Lottie пропускает frames
  • нарушается timing keyframes
  • появляются «рывки»

Причины:

  • перегруженный main thread
  • heavy DOM tree
  • слишком сложные path morphing операции

Проблемы с opacity и blending modes

Blend modes не везде поддерживаются

Особенно в Canvas:

  • multiply
  • screen
  • overlay

Симптомы:

  • слои становятся непрозрачными
  • исчезают тени
  • визуальные расхождения с After Effects

Ошибки при ресайзе контейнера

Несинхронизированный resize

Если контейнер меняет размер:

  • Lottie не всегда пересчитывает bounds автоматически
  • SVG может «залипнуть» в старом размере

Результат:

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

Проблемы с loop и state reset

Некорректное зацикливание

При loop: true возможны:

  • накопление transform state
  • дрейф анимации
  • несовпадение первого и последнего кадра

Особенно заметно в:

  • morphing shapes
  • path animations

Логирование и инструменты отладки

Встроенные механизмы Lottie

Полезные методы:

animation.addEventListener('error', (e) => {
  console.log('Lottie error', e);
});
animation.setSpeed(1);
animation.goToAndStop(0, true);

Проверка JSON

  • LottieFiles validator
  • ручной просмотр структуры layers, assets, framerate

Различия между версиями Lottie Web

Breaking changes

Разные версии библиотеки:

  • по-разному интерпретируют expressions
  • меняют behavior mask rendering
  • отличаются в handling shapes

Типичная проблема:

  • одинаковый JSON, разный результат в v5 и v6

Ошибки интеграции в SPA

React/Vue lifecycle issues

Проблемы:

  • повторная инициализация animation
  • утечки памяти
  • дублирование canvas/svg узлов

Симптом:

  • ускорение анимации при переходах
  • multiple RAF loops

Некорректные anchor points и transform origin

Смещение центра композиции

Если After Effects экспортировал неправильный anchor:

  • rotation идет «по орбите»
  • scale деформирует композицию
  • позиционирование выглядит сломанным

Debug стратегия

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

  1. Проверка JSON отдельно (LottieFiles)
  2. Проверка рендерера (svg/canvas switch)
  3. Упрощение контейнера (без CSS)
  4. Отключение loop/autoplay
  5. Проверка на чистом HTML документе
  6. Сравнение версий Lottie Web

Частые визуальные артефакты

  • дрожание контуров (subpixel rendering)
  • разрыв линий в SVG
  • исчезновение мелких деталей в Canvas
  • несинхронные keyframes
  • «плавающие» маски
  • скачки opacity при loop
Оглавление