Руководство EasyLottie
Как изменить цвета в анимации Lottie онлайн
Перекрасьте анимацию Lottie для палитр бренда, темного режима, кампаний или передачи клиента без редактирования JSON вручную.
Когда редактор цветов Lottie — правильный инструмент
Большинство заданий по перекрашиванию Lottie не относятся к моушен-дизайну. Вам уже нравится время, динамика и композиция. Проблема в том, что анимация была экспортирована в палитру другого бренда, разработана для облегченного режима или загружена с торговой площадки с общими цветами. Открытие After Effects для такого рода редактирования происходит медленно и часто невозможно, если у вас нет исходного файла.
Браузерный редактор цветов Lottie решает практическую версию проблемы. Он сканирует JSON на наличие редактируемых значений заливки, обводки и градиента, позволяет сопоставлять старые цвета с новыми и немедленно отображает результат в режиме предварительного просмотра.
Как изменить цвета Lottie онлайн
Начните с загрузки Lottie JSON или ZIP. Редактор определяет значения цвета и группирует их в палитру. Прежде чем что-либо менять, просмотрите обнаруженные цвета; повторяющиеся значения часто являются преднамеренными токенами, используемыми на нескольких уровнях.
Выберите цвет, который хотите заменить, и выберите новое значение с помощью палитры или шестнадцатеричного ввода. Хороший рабочий процесс — сначала заменить самые крупные фирменные цвета, а затем настроить поддерживающие нейтральные цвета, предупреждающие цвета, блики и тени. Просматривайте каждое изменение вместо того, чтобы заменять все сразу.
Если анимация выглядит правильно как на светлом, так и на темном фоне, экспортируйте отредактированный JSON или ZIP. При экспорте сохраняется структура анимации, поэтому разработчики могут использовать отредактированный файл в той же среде выполнения Lottie, которую они уже планировали использовать.
Избегайте распространенных ошибок при перекрашивании
Не заменяйте слепо все похожие синие, красные или серые. Дизайнеры часто используют близкие значения цвета для создания глубины, сглаживания или тонких теней. Замена их всех одним фиксированным значением может сделать анимацию дешевле.
Проверьте контрастность после перекрашивания. Галочка успеха, которая хорошо смотрится на белом фоне, может исчезнуть на тонированной карте. Варианту с темным режимом могут потребоваться более яркие штрихи, а не просто инвертированные цвета. Используйте фоны предварительного просмотра как часть редактирования, а не как второстепенную мысль.
Помните, что растровые изображения отличаются от векторных фигур. Редактор цвета может изменять значения цвета Lottie JSON, но он не будет перекрашивать встроенные снимки экрана или логотипы PNG. Для этого используйте инструмент замены изображений.
Лучшие варианты использования
Редактирование цвета идеально подходит для сопоставления брендов, вариантов темного режима, сезонных кампаний, настройки клиента, состояний пользовательского интерфейса продукта и небольших изменений в системе дизайна. Он менее подходит для переписывания структуры анимации или преобразования векторной иллюстрации в другой объект.
Если вам нужны более глубокие изменения движения, такие как ключевые кадры, пути, маски или кривые замедления, вернитесь к исходному файлу в After Effects. При работе с палитрами рабочий процесс браузера обычно быстрее и безопаснее.
Быстрый контрольный список
- Загрузите JSON или ZIP и просмотрите обнаруженные цвета.
- Сначала замените фирменные цвета, а затем поддерживающие цвета.
- Предварительный просмотр на реалистичном светлом и темном фоне.
- По возможности сохраняйте тонкие тени и блики.
- Экспортируйте JSON или ZIP и протестируйте в целевой среде выполнения.
Воспроизведите рабочий процесс
Используйте эти локальные образцы файлов, чтобы повторить проверки, описанные в этом руководстве. Просмотрите файл перед использованием его в рабочем проекте.
Проверенный результат: перекрашивание без изменения тайминга
Загружаемые файлы spinner иpulse дают нам возможность провести контролируемый тест на перекрашивание, поскольку оба используют один и тот же холст 240 x 240, синхронизацию 30 fps, диапазон кадров 60 и двухсекундную длительность. Правильное редактирование цвета изменяет визуальные свойства цвета, в то время как эти структурные значения остаются стабильными после экспорта.
| Точка проверки | Ожидается до редактирования | Ожидается после редактирования |
|---|---|---|
| Холст | 240 х 240 | 240 х 240 |
| Тайминг | Рамки 30 fps и 60 | Рамки 30 fps и 60 |
| Внешние активы | 0 | 0 |
| Воспроизведение | Полный двухсекундный цикл | Тот же полный двухсекундный цикл |
| Цветовые значения | Исходные значения заливки и обводки | Заменены только выбранные значения |
Считайте время и размеры регрессионными проверками. Если продолжительность, диапазон кадров или размер холста изменяются во время редактирования палитры, при экспорте изменяется не только цвет, и он не должен заменять производственный ресурс.
Тестируйте по одному намеренному сопоставлению за раз. Соседние оттенки могут представлять собой блики, тени или сглаживание. Объединение их всех в один фирменный цвет лишает глубины даже тогда, когда JSON остается технически годным.
Знайте пределы
- Инструменты цвета могут изменять векторные заливки, обводки и поддерживаемые остановки градиента, хранящиеся в JSON. Они не могут надежно перекрасить пиксели, запеченные в PNG, JPEG, WebP или других растровых ресурсах.
- Выражения, эффекты и функции, специфичные для средства рендеринга, могут рассчитывать цвет во время воспроизведения. Обнаруженное статическое значение не является доказательством того, что каждый видимый цвет можно безопасно редактировать.
- Палитра, которая передает белый цвет, может не соответствовать требованиям контрастности в темном режиме, тонированных картах или высококонтрастных темах специальных возможностей.
Если ваш результат отличается
- 1.Отмените последнюю замену и повторно проверьте одно обнаруженное значение, чтобы определить, контролирует ли сгруппированный цвет больше слоев, чем ожидалось.
- 2.Сравните экспортированную ширину, высоту, частоту кадров, точку входа и выхода с исходным файлом, прежде чем исследовать визуальные различия.
- 3.Если видимая иллюстрация представляет собой растровое изображение, переместите это изменение в «Заменить изображение» вместо принудительной замены цвета JSON.
- 4.Если один из модулей рендеринга отличается от предварительного просмотра в браузере, просмотрите его матрицу поддерживаемых функций и протестируйте более простой экспорт заливки или градиента.
Часто задаваемые вопросы
Могу ли я изменить цвета Lottie без After Effects?
Да. Если цвета хранятся как редактируемые значения Lottie JSON, EasyLottie может обнаружить и заменить их в браузере.
Работает ли редактирование цвета с градиентами?
EasyLottie обнаруживает распространенные остановки градиента, а также сплошные заливки и обводки.
Могу ли я перекрасить ресурсы изображений внутри Lottie?
Нет. Растровые изображения не перекрашиваются редактором цвета. Используйте функцию «Замена изображения», если иллюстрацией является встроенное изображение.
Мои файлы загружены?
Нет. Редактирование выполняется локально в вашем браузере.
Первоисточники
Техническое поведение было проверено на соответствие исходной документации по среде выполнения или формату, приведенной ниже.