Руководство EasyLottie
Почему моя анимация Lottie не воспроизводится? (И как это исправить)
Пустой холст, отсутствующие изображения или анимация, которая просто не движется? Вот обычные причины, по которым Lottie не удается отобразить, и способы быстрого выявления причины.
Начните с изоляции файла от вашего кода.
Когда Lottie не воспроизводится в вашем приложении, первый вопрос: проблема в файле или в интеграции. Самый быстрый способ это выяснить — открыть тот же файл в автономной программе просмотра Lottie. Если он воспроизводится там, но не в вашем приложении, проблема в настройках среды выполнения; если и в программе просмотра не получается, сам файл требует внимания.
Перетащите JSON (или ZIP) в EasyLottie Preview. Он отображается локально в вашем браузере, поэтому вы получаете немедленный и честный ответ, не затрагивая свою кодовую базу.
Наиболее распространенные причины
Большинство сообщений «Lottie не играет» сводятся к короткому списку причин. Проработайте их по порядку.
| Симптом | Вероятная причина | Исправить |
|---|---|---|
| Пустые поля, где должны быть изображения | Внешние графические ресурсы отсутствуют. | Загрузите ZIP с изображениями JSON + или встройте изображения. |
| вообще ничего не показывает | Сломанный/неправильный JSON или неправильный файл. | Повторно экспортировать анимацию; подтвердите, что это настоящий Lottie JSON |
| Воспроизводится в средстве просмотра, а не в вашем приложении | Рендерер или настройка среды выполнения | Проверьте конфигурацию lottie-web/lottie-react, автозапуск и цикл. |
| Детали отсутствуют или неправильные | Неподдерживаемые выражения/эффекты | Повторный экспорт без неподдерживаемых функций или растеризация. |
| Невидимый на странице | Без размера или однотонный фон | Укажите ширину/высоту контейнера; изменить фон |
Исправление #1: отсутствуют изображения (самое частое).
Очень распространенный случай — Lottie JSON, который ссылается на внешние файлы изображений. Сам по себе JSON неоткуда загрузить эти изображения, поэтому вы видите пустые поля. Исправление состоит в том, чтобы загрузить ZIP, содержащий JSON и папку с его изображениями, или перестроить файл со встроенными изображениями. Если вы не уверены, используются ли в вашем файле внешние изображения, при предварительном просмотре сразу появятся пустые изображения.
Исправление #2: оно воспроизводится в средстве просмотра, но не в вашем приложении.
Если файл анимируется в Preview, но не в вашем продукте, с файлом все в порядке, а интеграция — нет. Убедитесь, что контейнер анимации имеет реальную ширину и высоту, что автозапуск и цикл настроены так, как вы ожидаете, и что средство рендеринга (SVG vs Canvas) поддерживает то, что использует анимация. Фон того же цвета, что и анимация, также может сделать идеально работающий Lottie невидимым.
Быстрый контрольный список
- Откройте файл в режиме предварительного просмотра Lottie, чтобы изолировать файл от интеграции.
- Если изображения пусты, загрузите ZIP с папкой изображений JSON +.
- Если ничего не отображается, повторно экспортируйте и подтвердите, что он действителен. Lottie JSON.
- Если он воспроизводится только в средстве просмотра, проверьте размер контейнера, автозапуск, цикл.
- Переключите цвет фона, чтобы исключить невидимость одного и того же цвета.
Воспроизведите рабочий процесс
Используйте эти локальные образцы файлов, чтобы повторить проверки, описанные в этом руководстве. Просмотрите файл перед использованием его в рабочем проекте.
Базовый уровень диагностики: проверьте проигрыватель перед изменением файла
Загрузка счетчика и импульса — это заведомо исправные элементы управления с идентичными структурными метаданными: кадры 240 x 240, 30 fps, 60, две секунды, один слой и отсутствие внешних ресурсов. Тестирование обоих не позволяет одному удачному рендеру скрыть прерывистую загрузку или проблему с контейнером.
| Наблюдаемый результат | Вероятная граница | Следующее действие |
|---|---|---|
| Ни одна из базовых линий не играет | Настройка страницы, проигрывателя, контейнера, политики или JavaScript | Проверка ошибок загрузки и инициализации среды выполнения. |
| Базовые линии воспроизводятся, оригинал пуст | Оригинальный JSON, диапазон кадров, неподдерживаемая функция или контрастность | Проверка метаданных и поддержки средства рендеринга |
| Формы играют, изображения пусты | Путь к внешнему ресурсу или отсутствующие файлы пакета | Повторите проверку с полным ZIP и assetsPath |
| Браузер работает, приложение не работает | Поддержка или интеграция целевой среды выполнения | Сравните целевую матрицу поддерживаемых функций. |
| Анимация видна, но зависла | Автовоспроизведение, цикл, сегмент, направление или временной диапазон нулевого размера. | Проверьте параметры воспроизведения и точки начала/конца |
Используйте события загрузки в качестве доказательства. lottie-web предоставляет данные data_failed, loading_images, DOMLoaded и связанные с ними события, которые сужают стадию сбоя более надежно, чем многократное изменение CSS.
Пустая область не всегда является ошибкой синтаксического анализа. Контейнеры нулевого размера, совпадающие цвета переднего плана и фона, преобразования за пределами холста и приостановленный первый кадр — все это может выглядеть как пустой проигрыватель.
Знайте пределы
- Успешный рендеринг в браузере не гарантирует совместимости с каждым мобильным или собственным средством рендеринга, поскольку поддерживаемые функции различаются в зависимости от платформы и механизмов рендеринга.
- Ошибки консоли могут указывать на ошибки загрузки и синтаксического анализа, но визуально неверная маска, выражение, текстовый слой или режим наложения могут потребовать послойного тестирования экспорта.
- Изменение автовоспроизведения или цикла не может исправить отсутствующие ресурсы, неверный формат JSON, неподдерживаемые функции или недопустимый диапазон кадров.
Если ваш результат отличается
- 1.Загрузите заведомо исправный локальный файл JSON в тот же контейнер и с той же конфигурацией проигрывателя, что и файл со сбоем.
- 2.Запишите, срабатывают ли data_ready, loading_images, DOMLoaded или data_failed. Используйте последний успешный этап, чтобы сузить неисправность.
- 3.Задайте контейнеру явную ширину и высоту, временно установите контрастный фон и перейдите к первому видимому кадру.
- 4.Восстановите полный пакет ресурсов, затем сравните поддержку средства рендеринга и изолируйте сложные слои, если структура загружается, но визуальный результат неправильный.
Часто задаваемые вопросы
Почему на моем Lottie вместо изображений отображаются пустые поля?
JSON ссылается на внешние изображения, которые не входят в комплект поставки. Загрузите ZIP, содержащий JSON и его изображения, или встройте изображения.
Мой Lottie воспроизводится в программе просмотра, но не в моем приложении. Почему?
С файлом все в порядке; интеграции нет. Проверьте размер контейнера, настройки автозапуска/цикла и конфигурацию средства рендеринга в lottie-web или lottie-react.
Как узнать, поврежден ли сам файл?
Откройте его в предварительном просмотре EasyLottie. Если там тоже не удалось отрисовать, повторно экспортируйте анимацию и подтвердите, что это действительный Lottie JSON.
Почему мой Lottie невидим, хотя он загружается?
Контейнер может не иметь размера или фон имеет тот же цвет, что и анимация. Задайте ему ширину/высоту и измените фон для проверки.
Первоисточники
Техническое поведение было проверено на соответствие исходной документации по среде выполнения или формату, приведенной ниже.