Просмотр Lottie
Бесплатный онлайн-плеер Lottie. Открывайте Lottie-анимации JSON, воспроизводите и покадрово просматривайте, меняйте скорость, включайте цикл и смотрите на прозрачной шахматке — прямо в браузере.
Что такое файл Lottie?
Lottie — это JSON-экспорт векторной анимации, обычно создаваемый в After Effects плагином Bodymovin или в инструментах вроде LottieFiles. Приложения и сайты проигрывают его лёгким рендерером вместо видео: файл крошечный, а качество идеально в любом масштабе.
Как посмотреть Lottie-анимацию здесь?
Нажмите на область загрузки или перетащите на неё файл .json. Анимация загрузится мгновенно и начнёт воспроизводиться. Кнопка примера позволяет опробовать плеер на встроенном образце.
Загружается ли моя анимация на сервер?
Нет. Файл читается и рендерится полностью внутри вкладки браузера. Никуда ничего не отправляется, поэтому безопасно открывать даже неопубликованные клиентские проекты и конфиденциальные материалы.
Какие элементы управления воспроизведением есть?
Воспроизведение и пауза, кнопка перезапуска, переключатель цикла, перетаскиваемый ползунок кадров и выбор скорости от 0,25x до 2x. На табло видны текущий кадр, общее количество кадров и частота кадров анимации.
Зачем нужен шахматный фон?
Шахматка обозначает прозрачность, как в графических редакторах. По ней видно, нет ли у анимации лишнего фона; переключитесь на белый или чёрный, чтобы проверить края, свечение и тени на светлых и тёмных поверхностях.
Какие версии Lottie поддерживаются?
Плеер использует рендерер lottie-web и поддерживает JSON Bodymovin начиная с версии 4: слои фигур, маски, матты, trim paths и большинство выражений, запечённых при экспорте.
Работает ли это на мобильных?
Да. Вёрстка адаптивная, рендеринг идёт тем же SVG-движком, поэтому работает в браузерах iOS и Android. Кнопки рассчитаны на касания.
Чем отличается .json от .lottie?
Формат .lottie (dotLottie) — это сжатый zip, который может содержать JSON плюс ассеты и прочее. Этот просмотрщик открывает стандартный JSON-экспорт Lottie; из dotLottie сначала извлеките внутренний .json.
Почему анимация тормозит или выглядит неправильно?
Анимации со множеством слоёв, картинок или выражений тяжело рендерятся. Проверьте, не выгружены ли картинки отдельно, упростите композицию или снизьте скорость — индикатор FPS показывает расчётную частоту анимации.
Как использовать Просмотр Lottie
Этот просмотрщик Lottie проигрывает анимации Bodymovin JSON полностью в вашем браузере с помощью рендерера lottie-web. Загрузите файл или перетащите его, управляйте воспроизведением покадрово и смотрите превью на прозрачном, белом или чёрном фоне — ничего никуда не отправляется.
- Нажмите на область загрузки или перетащите на неё файл Lottie .json; анимация загрузится и сразу начнёт воспроизводиться.
- Управляйте воспроизведением большой кнопкой «Пуск/Пауза» и кнопкой перезапуска.
- Перетаскивайте ползунок кадров, чтобы перейти к любому кадру; на табло видны текущий кадр, общее число кадров и FPS.
- Выберите скорость от 0,25x до 2x и включите кнопку цикла для непрерывного повтора.
- Переключайте фон между прозрачной шахматкой, белым и чёрным, чтобы проверять края, свечения и тени.
Сначала нажмите кнопку с примером и посмотрите, как ведёт себя плеер, прежде чем загружать свою анимацию — удобно, когда клиент прислал JSON и нужна быстрая проверка.
Похожие инструменты
- Просмотрщик и Редактор SVG Просматривайте, редактируйте и оптимизируйте SVG-файлы онлайн. Предпросмотр в реальном времени, редактирование кода и инструменты оптимизации.
- JSON просмотрщик дерева Визуализируйте данные JSON в виде интерактивного сворачиваемого дерева. Ищите ключи и значения, отслеживайте JSONPath при наведении и обрабатывайте большие файлы с отложенной загрузкой. Поддерживается перетаскивание .json файлов.
- Генератор спрайт-листов Объединяйте изображения в спрайт-листы с перетаскиванием для сортировки, сеткой, отступами, режимами масштаба. Экспорт в PNG/WebP/JPG с JSON-атласом для игровых движков и CSS.
- Картинка в Base64 Конвертируйте изображения в строки Base64 и декодируйте Base64 обратно в изображения. Поддержка PNG, JPG, GIF, WebP, SVG, BMP, ICO. 100% в браузере, без загрузки.
- GIF Разбор Кадров Извлеките и скачайте отдельные кадры из GIF-анимаций как PNG или спрайт-лист. Бесплатный онлайн-инструмент с просмотром и экспортом ZIP.
- GIF Реверс Измените порядок воспроизведения GIF-анимаций бесплатно онлайн. Загрузите, просмотрите и скачайте мгновенно.
- Изменитель скорости GIF Измените скорость анимации GIF онлайн. Мгновенно ускорьте или замедлите GIF-файлы.
- Видео в GIF Конвертируйте видео в анимированные GIF онлайн. Настраивайте качество, частоту кадров и разрешение прямо в браузере без загрузки файлов.