Предпросмотр Lottie-анимации
Animation JSON · Мгновенное воспроизведение · Локальный рендеринг
Предпросмотр Lottie
Готово
ABOUT
О предпросмотре Lottie-анимации
Импортируйте Lottie animation JSON и просматривайте в браузере в реальном времени — без After Effects и плагинов.
Lottie переносит motion из After Effects на Web и mobile, но JSON «не виден». Локальный preview позволяет утвердить ассеты до интеграции lottie-web и сократить переделки.
DEEP DIVE
Подробнее о предпросмотре Lottie-анимации
Lottie — открытый формат анимации Airbnb: векторное motion в JSON, широко на mobile и Web. В редакторе кода Lottie JSON не preview'ится; обычно нужны After Effects + Bodymovin или LottieFiles online. JSONSort рендерит Lottie локально — вставьте JSON и он проигрывается.
Удобно для frontend asset QA, проверки повреждённого Lottie JSON и быстрого осмотра frame rate и структуры слоёв.
Lottie JSON из Bodymovin включает layers, shapes, keyframes и др. Preview использует lottie-web — поведение близко к production; при сбое preview вероятны настройки экспорта или повреждённый JSON, а не код интеграции.
FEATURES
Ключевые возможности
Мгновенное воспроизведение
Вставьте Lottie JSON — автозагрузка и зацикливание анимации.
Импорт файла
Drag-and-drop файлов .json и .lottie.
Локальный рендеринг
Animation JSON не загружается — preview конфиденциального design motion локально.
Сообщения об ошибках
Сообщение при сбое загрузки, если JSON не соответствует схеме Lottie.
Интеграция с форматером
Сначала проверьте синтаксис JSON, затем переключитесь на Lottie preview.
Без плагинов
AE или Lottie desktop client не требуются.
Архив .lottie
Формат dotLottie автоматически извлекается и рендерится.
Зацикленное воспроизведение
Автоповтор для проверки непрерывности первого/последнего кадра.
HOW TO USE
Шаги использования
-
1
Вставьте Lottie JSON или загрузите .json/.lottie
-
2
Автовоспроизведение preview анимации
-
3
Настройка и экспорт
-
4
Вид обновляется при изменении ввода — правьте JSON и наблюдайте структуру
-
5
Скриншот или копирование фрагментов JSON для docs и review
WORKFLOW
Типичный workflow
Полный цикл от импорта до экспорта — единый подход к предпросмотру Lottie-анимации в команде.
Получите Lottie JSON
Скачайте из Figma/AE Bodymovin plugin или LottieFiles.
Импорт и preview
Перетащите .json / .lottie или вставьте JSON-текст.
QA motion
Проверьте loop, размер и цвета по design spec.
Интеграция
После sign-off скопируйте JSON в ассеты проекта.
USE CASES
Сценарии использования
Frontend-разработка
Проверьте, что Lottie-ассеты дизайнера воспроизводятся корректно.
Mobile-разработка
Preview JSON animation assets — подтвердите frame rate и параметры размера.
Motion design
Быстрая проверка полноты Bodymovin JSON после экспорта.
QA
Regression-тест визуального эффекта после обновления Lottie-ассетов.
Design handoff
Дизайнеры сами проверяют экспортированный JSON перед dev-интеграцией.
Тюнинг производительности
При preview следите за числом слоёв и решайте, нужно ли упрощать motion.
TIPS
Советы
- Lottie JSON часто большой — drag-and-drop импорт стабильнее вставки.
- При сбое загрузки сначала проверьте синтаксис JSON форматером.
- Область preview показывает, seamless ли loop или есть скачки кадров.
- В паре с JSON mind map: mind map для структуры слоёв, preview для реального motion.
- dotLottie (.lottie) сжат — инструмент автоматически извлекает и рендерит.
- Подтвердите в preview перед интеграцией в lottie-web / lottie-react.
- Лаг preview может означать слишком много слоёв — попросите design упростить или объединить shapes.
- Внешние image assets не грузятся? Проверьте CORS или переключитесь на embedded base64.
- В паре с форматировщиком: проверьте синтаксис JSON перед режимом Lottie.
- Перед интеграцией убедитесь, что frameRate не конфликтует с CSS animation проекта.
LOCAL VS ONLINE
Локально vs онлайн-инструменты
JSONSort — чистый frontend: почему локальные инструменты лучше для dev-данных.
TROUBLESHOOTING
Типичные ошибки и решения
Частые проблемы и рекомендации — меньше проб и ошибок.
Ошибка загрузки
Совет:Синтаксическая ошибка JSON или несовместимая версия Lottie — переэкспортируйте из Bodymovin.
Изображения не отображаются
Совет:Внешний URL заблокирован CORS — используйте embedded assets.
Анимация слишком быстрая/медленная
Совет:Проверьте fr (frame rate) и диапазон кадров op/ip в JSON.
Пустой preview без ошибки
Совет:Возможно пустая composition — убедитесь, что в timeline есть содержимое перед экспортом из AE.
FAQ
Частые вопросы
Какие версии Lottie поддерживаются?
Основные экспорты Bodymovin JSON. Новейшие возможности могут потребовать обновления renderer.
Можно пауза/seek?
Сейчас только auto loop. Элементы управления воспроизведением могут появиться позже.
Lottie с встроенными изображениями работает?
Да для base64-embedded images. Внешние URL могут упираться в CORS.
Preview совпадает с реальными устройствами?
lottie-web близок к native Lottie iOS/Android; сложные expressions могут слегка отличаться.
Что если файл больше 1MB?
Можно попробовать; для огромных файлов — dotLottie compression или разделение анимаций.
Данные уходят на сервер?
Нет. Все инструменты JSONSort работают локально в браузере.
Нужна регистрация или установка?
Нет. Откройте страницу — без аккаунта и клиента; поддержка PWA offline.
Какой максимальный размер файла?
Зависит от памяти браузера; обычно несколько MB. Огромные — разбейте или используйте merge/очистку.