Учебник Lottie Web

Введение
- Что такое Lottie и для чего она нужна
- История создания и развитие библиотеки
- Преимущества использования Lottie перед другими решениями
- Ограничения и особенности работы с Lottie
- Поддержка браузеров и платформ
Подготовка к работе
- Установка через npm и yarn
- Подключение через CDN
- Скачивание и локальное подключение
- Структура файлов библиотеки
- Проверка корректности установки
Работа с анимациями в Adobe After Effects
- Базовые требования к проекту в After Effects
- Поддерживаемые типы слоев и эффектов
- Неподдерживаемые возможности After Effects
- Экспорт анимации через Bodymovin
- Настройки экспорта и оптимизация
- Проверка корректности экспортированного JSON
Структура JSON-файла анимации
- Общая архитектура файла
- Метаданные анимации
- Описание ресурсов и ассетов
- Слои и их типы
- Временная шкала и keyframes
- Выражения и их представление
- Шрифты и текстовые данные
- Изображения и их встраивание
Базовая инициализация и воспроизведение
- Загрузка анимации методом loadAnimation
- Параметры конфигурации
- Выбор рендерера: svg, canvas, html
- Установка контейнера для анимации
- Режимы циклического воспроизведения
- Автоматический запуск анимации
- Обработка путей к ресурсам
Управление воспроизведением
- Методы play и pause
- Остановка анимации методом stop
- Перемотка к определенному кадру
- Перемотка к определенному времени
- Установка скорости воспроизведения
- Воспроизведение в обратном направлении
- Воспроизведение сегментов анимации
- Методы goToAndStop и goToAndPlay
События и обработчики
- Событие complete
- Событие loopComplete
- Событие enterFrame
- Событие segmentStart
- Событие config_ready
- Событие data_ready
- Событие DOMLoaded
- Событие destroy
- Удаление обработчиков событий
- Контекст выполнения callback-функций
Работа с несколькими анимациями
- Создание и управление множественными экземплярами
- Синхронизация анимаций
- Последовательное воспроизведение
- Управление через общий контроллер
- Оптимизация производительности при множественных анимациях
Динамическое изменение анимации
- Доступ к свойствам слоев
- Изменение цветов элементов
- Модификация позиций и трансформаций
- Работа с opacity и visibility
- Изменение текстового контента
- Замена изображений и ресурсов
- Ограничения динамических изменений
Рендереры и их особенности
- SVG-рендерер: возможности и ограничения
- Canvas-рендерер: производительность и применение
- HTML-рендерер: специфика использования
- Сравнение производительности рендереров
- Выбор рендерера под конкретные задачи
- Переключение между рендерерами
Оптимизация производительности
- Упрощение структуры слоев
- Использование precomps
- Оптимизация размера JSON-файла
- Ленивая загрузка анимаций
- Управление качеством рендеринга
- Использование requestAnimationFrame
- Освобождение ресурсов методом destroy
- Профилирование и выявление узких мест
Интерактивность и пользовательский ввод
- Воспроизведение по hover
- Управление через клики
- Привязка к скроллу страницы
- Синхронизация с движением курсора
- Прогресс-бары и индикаторы загрузки
- Переключение состояний анимации
- Создание анимированных кнопок и элементов интерфейса
Работа с сегментами и маркерами
- Определение сегментов в After Effects
- Воспроизведение определенных участков
- Использование именованных маркеров
- Программная навигация по сегментам
- Создание последовательностей из сегментов
Адаптивность и респонсивность
- Масштабирование анимации под контейнер
- Сохранение пропорций
- Работа с разными разрешениями экрана
- Адаптация под мобильные устройства
- Изменение размеров в runtime
Загрузка и управление ресурсами
- Загрузка из URL
- Загрузка из локального файла
- Загрузка из JSON-объекта
- Предзагрузка анимаций
- Обработка ошибок загрузки
- Управление путями к внешним ресурсам
- Встраивание изображений в base64
Экспрессии и их использование
- Поддерживаемые экспрессии After Effects
- Ограничения в работе с экспрессиями
- Альтернативы неподдерживаемым экспрессиям
- Отладка проблем с экспрессиями
Работа с текстом
- Текстовые слои и их свойства
- Динамическое изменение текста
- Работа со шрифтами
- Подключение внешних шрифтов
- Стилизация текстовых элементов
- Многострочный текст и форматирование
Маски и матирование
- Типы масок в Lottie
- Режимы наложения масок
- Alpha Matte и Inverted Matte
- Ограничения в работе с масками
- Оптимизация сложных масок
Формы и векторная графика
- Базовые векторные формы
- Stroke и Fill
- Градиенты
- Trim Paths
- Merge Paths
- Повторители и модификаторы
Эффекты и их поддержка
- Поддерживаемые эффекты After Effects
- Tint и Color Correction
- Drop Shadow и Glow
- Blur и другие эффекты
- Неподдерживаемые эффекты и их замена
Режимы наложения
- Поддерживаемые blend modes
- Multiply, Screen, Overlay
- Особенности работы в разных рендерерах
- Производительность при использовании blend modes
Трехмерные слои и камеры
- Поддержка 3D-трансформаций
- Ограничения работы с Z-пространством
- Камеры и их параметры
- Родительские связи в 3D
- Альтернативные подходы для псевдо-3D
Звук и синхронизация
- Отсутствие встроенной поддержки аудио
- Синхронизация анимации с Web Audio API
- Использование маркеров для аудио-событий
- Синхронизация с внешними медиа-элементами
Расширения и плагины
- lottie-interactivity для интерактивности
- lottie-colorify для управления цветом
- Создание собственных расширений
- Интеграция с другими библиотеками
Интеграция с фреймворками
- Использование в React
- Компонент lottie-react
- Интеграция с Vue.js
- Использование в Angular
- Работа в Svelte
- Подходы для других фреймворков
Тестирование и отладка
- Проверка корректности воспроизведения
- Отладка проблем с рендерингом
- Консольные методы для диагностики
- Инспектирование DOM-структуры
- Проверка производительности
- Кроссбраузерное тестирование
Доступность
- Добавление ARIA-атрибутов
- Альтернативный контент для анимаций
- Управление автовоспроизведением
- Учет prefers-reduced-motion
- Клавиатурная навигация
Безопасность
- Валидация загружаемых JSON-файлов
- Защита от XSS через SVG
- Безопасная работа с внешними ресурсами
- Ограничение выполнения экспрессий
Сборка и деплой
- Минификация JSON-файлов
- Сжатие и оптимизация перед продакшеном
- Версионирование анимаций
- CDN и кеширование
- Lazy loading стратегии
Миграция и обновления
- Обновление версий Lottie Web
- Изменения в API между версиями
- Миграция старых анимаций
- Обратная совместимость
Альтернативные инструменты экспорта
- LottieFiles плагин для Figma
- Haiku Animator
- Cavalry
- Rive и сравнение с Lottie
- Конвертация из других форматов
Типичные проблемы и решения
- Анимация не воспроизводится
- Проблемы с путями к файлам
- Некорректное отображение в разных браузерах
- Проблемы с производительностью
- Потеря качества при масштабировании
- Конфликты с другими библиотеками
Продвинутые техники
- Программная генерация JSON-анимаций
- Морфинг между анимациями
- Процедурные анимации
- Использование WebGL для сложных эффектов
- Кастомизация рендереров
Справочник API
- Статические методы Lottie
- Методы экземпляра AnimationItem
- Свойства объекта конфигурации
- Типы событий и их параметры
- Константы и перечисления