🏃♀️ Вчера мне снова понадобилось немного подкорректировать lottie анимацию. По большому счету это не шибко трудозатратная процедура, которая не должна занимать много времени. Но открывать в браузере сайт для превью и через код поочередно, наугад, удалять слои со временем становится не очень приятно. Юзать полноценный Adobe AE, чтоб удалить один слой, я не рассматривал как вариант никогда, потому-что в большинстве задач мне не нужен завод ложек для производства одной)
😳 Поняв, что я больше не намерен мирится с этой проблемой, я быстро завайбкодил небольшую тулзу, которая после(спасибо нейронкам) переросла в легковестный редактор lottie, который я уверен должен будет помочь многим участникам экосистемы телеграмм, которые в эпоху подарков ежедневно работают с .lottie и .tgs, и которым периодически нужно перегнать их между стандартными форматами(.svg, .png)
Я думаю знающие люди, сами натыкаются и разберутся, но я кратко изложу все преимущества тут:
Загрузка .json и .tgs (Telegram стикеры) через кнопку или drag & drop
Объединение нескольких Lottie файлов в одну анимацию
Автоматическая группировка импортированных слоёв в Null-родитель
Живой превью с play/pause, перемоткой, зацикливанием, счётчиком фреймов
Обрезка анимации (Trim) — задание In/Out кадров для изменения длительности
Дерево слоёв с иконками типов, выделение/снятие, переименование, удаление
SVG-миниатюры слоёв в дереве для визуальной идентификации
Сворачиваемые группы (Null/Precomp) со стрелками ▶️/▼
Перемещение слоёв вверх/вниз с реальным изменением z-order (целыми группами)
Каскадное удаление — удаление родителя удаляет всех потомков
Мульти-выделение слоёв (Ctrl+Click)
Перетаскивание слоёв прямо на canvas с рамкой выделения
Редактирование позиции, якоря, масштаба, прозрачности для каждого слоя
Глобальная палитра цветов сгруппированная по HEX с массовым редактированием
HSL коррекция (Hue, Saturation, Lightness) — глобальная и по группам цветов (красные, оранжевые, жёлтые, зелёные, голубые, синие, фиолетовые, нейтральные)
Извлечение цветов из заливок, обводок, градиентов, солидов, эффектов
Экспорт в JSON, TGS, SVG (текущий кадр), PNG (текущий кадр, 2x retina)
Маркеры границ canvas с размером
Отмена Ctrl+Z (до 50 шагов) + кнопка Undo в тулбаре
https://attikusfinch.github.io/lottie-editor-ui/
😽 Буду рад любому репосту, если эта тулза поможет упростить вам жизнь хотя-бы раз, спасибо за прочтение)
@fiscaldev