Руководство EasyLottie
Как заменить изображения в анимации Lottie
Поменяйте местами встроенные изображения внутри файла Lottie, сохранив исходное время, движение и формат экспорта.
Почему замена изображения имеет значение
Многие анимации Lottie представляют собой смесь векторных фигур и растровых изображений. Скриншоты продуктов, логотипы, аватары, значки и текстурированные иллюстрации часто хранятся в виде изображений внутри упаковки. Это упрощает настройку анимации, если у вас есть правильный инструмент, и разочаровывает, если у вас есть только последний вариант JSON.
Старый рабочий процесс заключался в том, чтобы попросить дизайнера движения снова открыть After Effects, заменить ресурс и снова экспортировать. Для этого требуется исходный проект и человек, который его создал. Рабочий процесс замены изображения Lottie позволяет маркетологу, основателю, разработчику или менеджеру по локализации вносить изменения непосредственно из доставленного файла.
Как заменить изображение внутри файла Lottie
Загрузите свой Lottie JSON или ZIP на EasyLottie Image replace. Если файл ZIP, инструмент разрешает указанные ресурсы и отображает их как редактируемые ресурсы. Если изображения встроены непосредственно в JSON, инструмент также их обнаружит.
Выберите изображение, которое хотите заменить, из списка ресурсов или предварительного просмотра. Загрузите новый PNG, JPG, JPEG или WebP. Затем отрегулируйте подгонку, масштаб, обрезку и смещение до тех пор, пока замена не будет естественным образом вписываться в исходную анимацию.
Предварительный просмотр анимации перед экспортом. Время и движение должны оставаться неизменными; только выбранный визуальный ресурс должен отличаться. Экспортируйте JSON для простых встроенных файлов или ZIP, когда внешние графические ресурсы должны перемещаться вместе с анимацией.
Хорошие заменяющие ресурсы упрощают редактирование.
По возможности сопоставляйте соотношение сторон исходного изображения. Квадратный логотип, помещенный в широкую рамку скриншота, потребует масштабирования и обрезки. Прозрачные PNG обычно лучше всего подходят для логотипов и значков, а JPG или WebP подойдут для полнокадровых фотографий.
Используйте изображения, размер которых не меньше исходного ресурса. Увеличение размера небольшого скриншота внутри анимации часто приводит к размытию. Если исходная анимация имеет небольшое размытие в движении или тени, проверьте результат на скорости воспроизведения, а не судите только по неподвижному кадру.
Варианты использования замены активов Lottie
Замена изображений полезна для локализации обучающих анимаций, обновления снимков экрана продукта после редизайна пользовательского интерфейса, нанесения на шаблон белой метки логотипом клиента, замены аватаров-заполнителей или обновления визуальных эффектов кампании, не затрагивая временную шкалу анимации.
Это также полезно для работы, требующей конфиденциальности. Поскольку файл обрабатывается локально, невыпущенные снимки экрана и клиентские ресурсы не нужно загружать в стороннюю службу конвертации.
Быстрый контрольный список
- Используйте ZIP, когда JSON ссылается на внешние изображения.
- Прежде чем загружать замену, выберите точный ресурс.
- По возможности соблюдайте соотношение сторон и разрешение.
- Предварительный просмотр движения, а не только неподвижного кадра.
- Экспортируйте ZIP для полных пакетов с изображениями.
Результат валидации: что должно остаться неизменным
Замена изображения успешна только в том случае, если выбранный визуальный элемент изменяется и контракт анимации остается нетронутым. Таким образом, тест представляет собой сравнение путей к пакету «до» и «после», метаданных холста и времени, размеров ресурсов, прозрачности и воспроизведения, а не визуальный взгляд на один кадр.
| Проверить | До замены | После замены |
|---|---|---|
| Время анимации | Исходная частота кадров и диапазон кадров | Точно такие же значения |
| Ссылка на актив | Существующий идентификатор актива и ожидаемая папка | Ссылка разрешается в новое изображение |
| Подходит | Исходный кроп и размещение | Преднамеренное кадрирование без растяжения |
| Прозрачность | Ожидаемая альфа вокруг актива | Никакой матовой коробки или яркого ореола по краям. |
| Воспроизведение пакета | Рендеринг всех сцен и слоев | Все сцены визуализируются с изменением только выбранного изображения. |
Соответствие соотношению сторон уменьшает количество необходимой коррекции обрезки и смещения. Сопоставление размеров в пикселях полезно, но видимое соответствие зависит от преобразования и маски, примененных анимацией.
Экспортированный файл необходимо протестировать как пакет. Предварительный просмотр внутри редактора может по-прежнему отличаться от развертывания, если конвейер сборки перемещает JSON, но пропускает или оставляет отпечатки пальцев в папке с его изображением.
Знайте пределы
- Замена изображения не перерисовывает анимацию, не меняет ее маску и не восстанавливает композицию, разработанную для другого соотношения сторон.
- Исходное изображение большего размера может увеличить вес пакета и использование памяти, даже если оно отображается в небольшой области анимации.
- Некоторые среды выполнения по-разному разрешают пути к внешним ресурсам. Пакет, который правильно просматривается, все равно должен быть протестирован после объединения, загрузки CDN или упаковки собственного приложения.
Если ваш результат отличается
- 1.Восстановите исходный пакет и убедитесь, что он все еще воспроизводится. Это отделяет ранее существовавшую поломку передачи обслуживания от проблемы замены.
- 2.Сопоставьте соотношение сторон замены, затем отрегулируйте размер и смещение перед увеличением разрешения или изменением холста анимации.
- 3.Сохраняйте ожидаемую структуру папок и расширение файла, если среда выполнения использует внешний путь.
- 4.Просмотрите экспортированный JSON или ZIP в чистом сеансе, а затем протестируйте точно развернутый URL или собственный пакет.
Часто задаваемые вопросы
Могу ли я заменить логотип внутри анимации Lottie?
Да, если логотип хранится как изображение. Выберите его в разделе «Замена изображения», загрузите новый логотип и экспортируйте.
Это работает без исходного файла After Effects?
Да. EasyLottie работает из поставляемого комплекта Lottie JSON или ZIP.
Могу ли я заменить векторные пути?
Замена изображения предназначена для растровых изображений. Редактирование векторного пути относится к инструменту моушн-дизайна.
Должен ли я экспортировать JSON или ZIP?
Используйте JSON для простых внедренных файлов и ZIP, когда анимация ссылается на внешние ресурсы изображения.
Первоисточники
Техническое поведение было проверено на соответствие исходной документации по среде выполнения или формату, приведенной ниже.