Проверка корректности экспортированного JSON

Экспорт из After Effects через Bodymovin формирует JSON-файл, который описывает всю анимацию: композицию, слои, ключевые кадры, эффекты и ресурсы. Проверка корректности начинается с анализа структуры:

  • v — версия формата Lottie
  • fr — частота кадров
  • ip / op — начальный и конечный кадры
  • w / h — размеры композиции
  • layers — массив слоев
  • assets — подключаемые ресурсы (изображения, вложенные композиции)

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

Минимальная проверка может выполняться через стандартный парсинг:

try {
  const data = JSON.parse(jsonString);
} catch (e) {
  console.error('Некорректный JSON:', e);
}

Однако синтаксическая корректность не гарантирует логическую валидность.

Проверка версии и совместимости

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

Критические моменты:

  • Несовместимость с новыми функциями After Effects
  • Использование неподдерживаемых эффектов
  • Различия в интерпретации ключевых кадров

Рекомендуется:

  • Сверять версию JSON с поддерживаемой версией Lottie Web
  • Использовать стабильные версии плагина Bodymovin

Анализ слоев (layers)

Массив layers — ключевой элемент. Ошибки чаще всего возникают именно здесь.

Основные типы слоев:

  • Shape Layer (ty: 4)
  • Image Layer (ty: 2)
  • Pre-comp (ty: 0)
  • Text (ty: 5)

Проблемы:

  • Отсутствие обязательных свойств (ks, nm, ind)
  • Неправильные ссылки на assets
  • Нарушение иерархии вложенности

Пример проверки:

data.layers.forEach(layer => {
  if (!layer.ty) {
    console.warn('Слой без типа:', layer);
  }
});

Проверка ключевых кадров (keyframes)

Анимация строится на ключевых кадрах (k). Ошибки в них могут проявляться как:

  • Рывки анимации
  • Неправильная интерполяция
  • Полное отсутствие движения

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

  • Неправильный формат массива k
  • Отсутствие временных меток (t)
  • Некорректные easing-функции (i, o)

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

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

Проверка:

function validateKeyframes(kf) {
  return Array.isArray(kf) && kf.every(f => 't' in f);
}

Работа с assets

Поле assets содержит:

  • Изображения
  • Вложенные композиции

Ошибки:

  • Неверные пути (p)
  • Отсутствующие файлы
  • Несовпадение id

Проверка связей:

const assetIds = data.assets.map(a => a.id);

data.layers.forEach(layer => {
  if (layer.refId && !assetIds.includes(layer.refId)) {
    console.error('Неверная ссылка на asset:', layer.refId);
  }
});

Проверка изображений

Для изображений важно:

  • Корректный путь (p)
  • Наличие префикса (u)
  • Соответствие размеров

Типичная ошибка:

{
  "p": "image.png",
  "u": "images/"
}

Если путь неверен — изображение не загрузится.

Проверка текста

Текстовые слои (ty: 5) могут содержать:

  • Неподдерживаемые шрифты
  • Отсутствующие glyphs
  • Ошибки кодировки

Важно:

  • Проверять наличие шрифтов в fonts
  • Избегать динамических шрифтов без встраивания

Ошибки эффектов и выражений

Lottie Web не поддерживает:

  • Expressions (выражения After Effects)
  • Некоторые эффекты (blur, 3D и др.)

Признаки:

  • Отсутствие анимации
  • Игнорирование свойств

Решение:

  • Удаление выражений перед экспортом
  • Использование только поддерживаемых эффектов

Проверка размеров и пропорций

Поля w и h задают размеры. Ошибки приводят к:

  • Искажению
  • Неправильному масштабированию

Рекомендуется:

  • Проверять соответствие контейнеру
  • Учитывать devicePixelRatio

Использование режима отладки в Lottie Web

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

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

Ошибки можно отслеживать через консоль браузера:

  • Missing property
  • Invalid path
  • Render errors

Визуальная проверка

Даже корректный JSON может содержать визуальные дефекты:

  • Смещения
  • Неправильные цвета
  • Потеря прозрачности

Методы:

  • Сравнение с оригиналом в After Effects
  • Проверка на разных устройствах
  • Использование разных рендереров (svg, canvas, html)

Автоматическая валидация

Для комплексной проверки используются:

  • JSON Schema
  • Кастомные валидаторы
  • Скрипты анализа структуры

Пример:

function validateLottie(data) {
  return data.v && data.layers && Array.isArray(data.layers);
}

Типичные ошибки экспорта

Наиболее распространённые проблемы:

  • Использование unsupported features
  • Сложные маски и blend modes
  • Excessive keyframes (слишком много ключевых кадров)
  • Неправильная вложенность композиций

Оптимизация как часть проверки

Корректность включает не только работоспособность, но и эффективность:

  • Удаление лишних слоев
  • Упрощение path-анимаций
  • Сжатие JSON

Инструменты:

  • LottieFiles optimizer
  • Ручная чистка структуры

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

Некорректный JSON может работать, но вызывать:

  • Lag
  • Высокую нагрузку CPU
  • Падение FPS

Факторы:

  • Сложные shape paths
  • Большое количество слоев
  • Частые keyframes

Практический чек-лист

Структура:

  • JSON валиден
  • Есть все обязательные поля

Слои:

  • Все layers корректны
  • Нет битых ссылок

Assets:

  • Пути корректны
  • Файлы существуют

Анимация:

  • Keyframes валидны
  • Нет выражений

Визуал:

  • Соответствие оригиналу
  • Нет артефактов

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

  • Приемлемый размер JSON
  • Плавная анимация

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

Оглавление