Плеер, редактор цвета и оптимизатор Lottie — полностью локально
Откройте анимации .lottie, .tgs и .json, перекрасьте каждую заливку, обводку и точку градиента, проверьте, что сломается в других плеерах, и экспортируйте в JSON, SVG, PNG, секвенцию кадров или WebM — всё прямо в браузере.
Откройте анимацию, чтобы увидеть её структуру.
Как это работает
Бросьте файл
Обычный .json, архив .lottie, стикер Telegram .tgs или сжатый .json.gz. Никуда ничего не загружается.
Прочитайте отчёт
Ещё до отрисовки вы видите размер, число слоёв и список того, что сломается на iOS, Android или в старых плеерах.
Перекрасьте и обрежьте
Каждая заливка, обводка, точка градиента и цветовой ключевой кадр становятся образцом. Скрывайте слои, обрезайте диапазон, задавайте свои fps.
Экспорт или дальше
JSON, .lottie, SVG, PNG, пронумерованная секвенция кадров или видео WebM — либо отправьте результат прямо в другой инструмент набора.
Ничего не покидает ваш компьютер
Плеер, редактор цвета, оптимизатор и любой экспорт работают на вашем процессоре. Ни загрузок, ни аккаунта, ни очереди — и всё продолжает работать с отключённой сетью.
Цвета, которые другие просмотрщики не находят
Большинство онлайн-просмотрщиков видят только статичные заливки. Этот находит ещё обводки, точки градиента, слои-заливки и ключевые кадры анимированного цвета — и показывает, сколько раз использован каждый цвет.
Настоящее дерево слоёв
Каждый слой верхнего уровня со своим типом, выражениями и track matte, плюс переключатель, чтобы спрятать ненужные. Потом их можно выкинуть из экспортируемого файла.
Оптимизатор, который показывает расчёт
Округление координат, записанных экспортёром с пятнадцатью знаками, удаление авторских метаданных и скрытых слоёв обычно уменьшает файл вдвое. Вы видите байты до и после, а не обещание.
Экспорт в картинку и в видео
Текущий кадр как PNG или SVG, весь диапазон как пронумерованная секвенция PNG в ZIP, или покадрово точное видео WebM. Всё рисуется на canvas в этой вкладке.
Отчёт о совместимости
Выражения, объединения контуров, эффекты слоёв, текстовые слои, флаги 3D и картинки по URL — ровно то, из-за чего анимация выглядит правильно здесь и криво на телефоне.
Плеер, который рисует, а не превью, которое подгружается
Анимацию рисует lottie-web, работающий прямо на этой странице, с частотой кадров самого документа, покадровой перемоткой и настоящим транспортом: шаг по кадрам, воспроизведение задом наперёд, обрезка диапазона, свои fps. Рендерер локальный, поэтому нет ни ожидания загрузки, ни потолка качества от сервиса предпросмотра.
Откройте анимацию Lottie, посмотрите, что именно внутри, перекрасьте её, снимите лишний вес и выгрузите в том формате, который вам действительно нужен, никому её не загружая.
Дизайнер отдаёт Lottie на 900 КБ, который ломается на Android. Этот инструмент объяснит почему ещё до релиза, позволит перекрасить его под бренд без возврата в After Effects, уберёт скрытые слои, оставленные экспортёром, и отдаст файл в виде JSON, .lottie, SVG, PNG, секвенции кадров или WebM.
Всё происходит в этой вкладке. Кроме того, инструмент помечает анимации, ссылающиеся на изображения по URL, — единственный случай, когда Lottie не самодостаточен, — и встраивает их за вас, если они пришли внутри архива .lottie.
Частые вопросы
QЗагружаются ли мои анимации куда-нибудь?+
Нет. Файл читается через File API самого браузера, обрабатывается в памяти и отрисовывается плеером, поставляемым вместе со страницей. Обращений к серверу нет ни на одном шаге, и между визитами ничего не сохраняется.
QКакие форматы можно открыть?+
Обычный .json-Lottie, архив .lottie (формат, который lottiefiles.com отдаёт по умолчанию), стикер Telegram .tgs и сжатый .json.gz. Контейнер определяется по содержимому, поэтому файл с неверным именем тоже откроется.
QПочему после перетаскивания файла ничего не запускается?+
Так задумано. Перетаскивание только разбирает и проверяет файл: сначала вы получаете его размер, структуру и отчёт о совместимости, а плеер стартует по нажатию кнопки. Если хочется пропустить это целиком — вставьте JSON вручную, и он откроется сразу.
QКакие цвета действительно можно править?+
Статичные заливки и обводки, каждую точку градиентной заливки или обводки, цвет слоя-заливки и каждый ключевой кадр анимированного цветового свойства. Цвета, запечённые во встроенный PNG или созданные эффектом слоя, изменить нельзя — этого не умеет ни один редактор без перерисовки самого ресурса.
QНасколько оптимизатор уменьшает файл?+
Это целиком зависит от исходника, поэтому инструмент показывает реальные байты до и после, а не называет цифру. Файлы прямо из After Effects при двух знаках после запятой обычно становятся на 40-60 % меньше: почти весь их вес — координаты с пятнадцатью значащими цифрами.
QМожно ли выгрузить GIF?+
Напрямую нет, и это осознанно: GIF-кодировщик в браузере превратил бы цвета векторной анимации в постеризацию. Выгрузите пронумерованную секвенцию PNG или WebM — оба сохраняют полную палитру, и любой кодировщик соберёт из них GIF без потерь.
QПортит ли правка цветов саму анимацию?+
Нет. Каждая правка хранится как патч поверх исходного документа, который никогда не меняется. Отмена, повтор, сброс палитры или удержание кнопки «Сравнить» в любой момент покажут нетронутый файл.