Lottie Builder

Инструмент превращает статичные PNG/SVG в анимированные Lottie-файлы — «облегчённый After Effects» под узкую задачу.

1. Импорт

Перетащите изображения в левую панель или нажмите «Импорт». Каждый файл станет слоем сцены. SVG встраивается как векторный ассет, PNG — как растровый.

2. Композиция

Выберите слой и перетащите его мышью по канвасу. Справа задайте масштаб и поворот. Порядок слоёв (z-index), видимость и блокировка — в списке слева.

3. Анимация: пресеты

Выберите слой → в правой панели выберите пресет из 20 доступных (появление, движение, вращение, сложные). Сегмент появится на дорожке слоя в позиции плейхеда. У каждого сегмента можно задать ослабление (кривую времени) и включить «встык к предыдущему» — тогда он автоматически начинается там, где закончился предыдущий. Кнопка «Выстроить сегменты цепочкой» состыкует все сегменты дорожки.

4. Анимация: ручные ключевые кадры (новое в v1)

В панели слоя нажмите «＋ Ключ в позиции плейхеда» — он зафиксирует позицию, масштаб, поворот и прозрачность. Добавьте второй ключ в другой момент — слой пойдёт по собственной траектории, а пресеты наложатся поверх. Ключи редактируются полями в панели, перетаскиваются ромбиками ⬥ на дорожке, а выбранный ключ можно двигать прямо по канвасу. У каждого ключа — своя кривая сглаживания к следующему. Delete удаляет выбранный ключ.

5. Слои

Перетащите слой мышью по канвасу; справа задайте масштаб и поворот. Порядок (z-index), видимость, блокировка и дублирование ⧉ — в списке слева.

6. Таймлайн

Перетаскивайте сегменты, тяните правый край для длительности. Клик по линейке — перемотка. Привязка/зум — кнопки справа сверху. Пробел — play/pause.

7. Сохранение и экспорт

Проекты хранятся локально в браузере (IndexedDB) с автосейвом. В окне «Экспорт» сверху — отчёт: число ключей до/после упрощения, итоговый размер, self-test рендера и валидация структуры. Доступны Lottie JSON (с упрощением ключей по Дугласу–Пейкеру), упакованный .lottie (dotLottie) и проектный бэкап со встроенными изображениями — его же можно загрузить обратно кнопкой «Загрузить из файла…» (в окне «Экспорт» или «Проекты»).

Тонкая настройка

Ослабление сегмента или ключа можно задать своей кривой Безье (вариант «Своя…» — тяните ручки) или пружиной (вариант «Пружина…»): жёсткость, затухание и масса задают физический отскок, а форма кривой считается симуляцией. Для слоя с ≥3 ключами доступно сглаживание траектории (сплайн), а сама траектория рисуется на канвасе точками, которые можно перетаскивать.

Горячие клавиши

• Пробел — воспроизведение / пауза
• ← / → — шаг на кадр назад/вперёд (с Shift — на 10 кадров)
• Home / End — в начало / в конец сцены
• K — добавить ключевой кадр в позиции плейхеда
• Delete / Backspace — удалить выбранный сегмент или ключ (или всё мультивыделение)
• Shift + клик по сегментам/ключам — мультивыделение; перетаскивание двигает всю группу
• Ctrl/⌘ + C / V — копировать выбранные сегменты и вставить на активный слой от плейхеда
• Ctrl/⌘ + колесо над таймлайном — зум к точке под курсором
• Alt при перетаскивании на сцене — отключить прилипание к направляющим
• I — импорт изображений · N — новый проект
• G — привязка вкл/выкл · + / − — масштаб таймлайна
• Ctrl/⌘ + Z — отменить · + Shift + Z (или + Y) — вернуть
• Ctrl/⌘ + S — сохранить · + E — экспорт · + O — проекты · + D — дублировать слой
• H или ? — эта справка · Esc — закрыть окно

Новое в v3

• Якорная точка слоя (сетка 3×3 в параметрах) — вращение/масштаб вокруг угла или края: маятники, стрелки, открывающиеся панели.
• Текст и фигуры (кнопки под зоной импорта). Фигуры экспортируются векторными shape-слоями — это в разы легче растра.
• Импорт Lottie JSON как слоя: готовая анимация вставляется прекомпозицией, её можно двигать/масштабировать и комбинировать со своими слоями.
• Каскад в параметрах сегмента — копия анимации на все слои с нарастающей задержкой (stagger).
• Мои шаблоны — сохраняйте настроенный сегмент («Сохранить как шаблон» в параметрах) и применяйте в любом проекте.
• WebM и GIF в окне экспорта — для отправки на согласование без Lottie-плеера.
• Onion skin (кнопка-призрак рядом с ползунком воспроизведения) — контуры слоя на его ключевых кадрах.
• Тёмная тема (кнопка с луной в шапке), спарклайны прозрачности на дорожках, направляющие с прилипанием на сцене, точные числовые поля у слайдеров.
• .lottie теперь сжимается DEFLATE (если браузер поддерживает CompressionStream) — файлы заметно меньше.

Ограничения

• SVG и PNG анимируются как изображения трансформами; полноценный парсер SVG→shape-слои (морфинг вершин) — за рамками версии.
• Morph и Расщепление по path помечены β и используют аппроксимацию.
• Фон превью служит для примерки и не входит в экспорт.