Как редактировать анимацию Lottie без After Effects

After Effects отлично подходит для создания движения с нуля, но большинство запросов Lottie, поступающих к разработчику, меньше этого размера. Изменился фирменный цвет. Скриншот внутри онбординг-анимации устарел. Погрузчик слишком тяжел для связки. Отделу маркетинга нужен GIF для электронного письма, которое не может запустить проигрыватель. Ничто из этого не требует нового движения, и у многих команд уже нет исходного проекта .aep.

Файл Lottie — это JSON. Цвета представляют собой массивы чисел, встроенные изображения — это строки base64, а время — это частота кадров плюс точки входа и выхода. Редактирование, которое изменяет только эти сохраненные значения, можно безопасно вносить вне инструмента движения. Редактирование, требующее новых ключевых кадров, новых фигур или новых слоев, не требуется, поскольку в файле пока нечего менять.

В таблице ниже общие запросы сопоставлены с тем, чего они касаются внутри файла, и с инструментом, который их обрабатывает. В этом руководстве каждая строка была протестирована на реальном файле; результаты измерений приведены в следующих разделах.

Откройте Color Changer и вставьте JSON или ZIP. Инструмент просматривает файл, собирает каждый сплошной цвет, который он находит в заливках и обводках, и перечисляет для каждого из них количество использований. Выберите образец, который хотите изменить, введите новое значение и примените. Предварительный просмотр продолжает воспроизводиться, поэтому вы можете судить о контрасте по реальной анимации, а не по палитре.

В нашем тесте с бренд-значком .json экспорт отличался от оригинала ровно шестью цифрами: каналы двух цветов мы поменяли местами. Больше ничего не изменилось. Это свойство нужно искать в любом редакторе браузера. Если инструмент повторно экспортирует всю анимацию через свою собственную модель, могут возникнуть небольшие изменения округления в ключевых кадрах, и их трудно обнаружить, пока цикл не начнет заикаться.

Многие маркетинговые и онбординговые анимации построены на основе встроенных растровых изображений: скриншота продукта, логотипа, аватара. В JSON они находятся в массиве ресурсов как данные base64, на которые ссылается слой изображения. Image replace перечисляет каждый ресурс изображения с его размером в пикселях и размером в байтах. В нашем образце карточки продукта показан один актив, img_0.png, с координатами 300 по 180 пикселям и 26.8 KB.

При замене ресурса сохраняется слой, его положение, масштаб и анимация; новое изображение рисуется в том же поле. Наша замена была того же размера 300 на 180, поэтому она упала без корректировки и актив вырос только до 29.8 KB. При замене с другим соотношением сторон необходимо сначала обрезать, а фотография размером 2,000, помещенная в слот 300, выглядит на экране так же, но может добавить к файлу сотни килобайт.

Проблемы с доставкой часто связаны с размером или форматом, а не с содержанием. Компрессор Lottie удаляет форматирование, удаляет ресурсы изображений, на которые не ссылается ни один слой, и объединяет байтовые идентичные изображения. На нашей раздутой карточке продукта, которая содержала дубликат и неиспользованную копию скриншота, загруженный файл изменился с 119,611 на 38,869 в байтах при воспроизведении без изменений.

Если канал вообще не может воспроизводить Lottie, экспортируйте GIF. Имейте в виду, что GIF хранит задержки кадров в сотых долях секунды, поэтому некоторые частоты кадров невозможно представить точно. Наш значок с кадрами 30 fps, 90 превратился в GIF с сотыми задержками 3, который воспроизводит цикл за 2.7 секунд вместо 3.0. Для погрузчика это нормально. Для анимации, синхронизированной со звуком, это не так.

Используйте инструмент движения, когда вам нужно перерисовать фигуры, изменить ключевые кадры, настроить кривые замедления, изменить маски, перестроить композиции или добавить состояния. Редактор браузера не должен делать вид, что это простое редактирование файлов, и EasyLottie и не пытается.

Продуктивный рабочий процесс честно использует обе категории. Создайте и реструктурируйте движение там, где оно было создано. Выполните окончательную работу с цветом, ресурсом, размером и форматом в браузере, когда доставленный файл уже закрыт. Это разделение также сохраняет исходный проект чистым: вы не экспортируете анимацию повторно и рискуете слегка отклониться от того, что на самом деле является изменением с одним значением.