Как делать простые анимированные онбординги в Lottie без After Effects25.09.2024 14:30

Привет! Меня зовут Михаил Мурзак, я продуктовый дизайнер в Ozon Seller (сайт и приложение продавца).

Время от времени мы делаем анимированные онбординги крупных фич в мобильном приложении и долгое время использовали для этих целей Adobe After Effects с плагином Bodymovin (для экспорта в Lottie), но каждый раз для меня это было мучением, поэтому я решил пересесть на официальный клиент Lottie и написал этот гайд для коллег.

Теперь, когда Adobe не продлевает лицензии, этот гайд стал ещё более актуальным, и я решил опубликовать его тут.

Дисклеймер: это гайд для продуктовых, а не motion‑дизайнеров. Он призван дать краткую инструкцию по созданию быстрых и простых анимированных онбордингов с примитивными интерфейсными переходами в Lottie.

Что такое Lottie и зачем?

Lottie — это формат анимационных файлов на основе JSON, который позволяет вставлять анимацию на любую платформу (iOS, Android, веб). 

Преимущества Lottie:  

• Маленький размер файла (анимации Lottie значительно меньше весят по сравнению с другими форматами, такими как GIF или MP4 при сохранении такого же качества).

• Бесконечное масштабирование (анимации Lottie основаны на векторах, а значит, их можно уменьшать и увеличивать без потери качества).

• Мультиплатформенность (можно использовать анимации Lottie на iOS, Android, в вебе и React Native без модификаций).

• Интерактивность (можно управлять элементами анимации, чтобы они были интерактивными и реагировали на прокрутку, нажатие и наведение курсора).

В мобильном приложении Ozon Seller мы используем JSON-формат как для анимированных, так и для статичных онбордингов. Поэтому и пользуемся инструментами библиотеки Lottie. 

По этой же причине мы не можем использовать анимации в формате Rive (там исходниками являются файлы формата .rive, а не .json) — хоть это и более эффективный (ещё меньше весит) и функциональный (интерактивность настраивается с помощью нодов) формат анимации. Наверное, когда-нибудь перейдём и на него.

Почему не After Effects?

Возможно, вы уже благополучно делаете онбординги в After Effects. Если вам удобен этот инструмент, продолжайте.

А если вы каждый раз мучаетесь с этим громоздким инструментом, или вы ещё не делали онбордингов в AE, рекомендую не начинать, а сразу использовать простую и бесплатную альтернативу — официальный редактор Lottie.

Основная причина — After Effects был создан не для коротких анимаций интерфейса, а для более сложных задач, поэтому для простых анимированных онбордингов его функциональность и неповоротливость выглядят излишними.

Для сравнения двух инструментов сделал табличку:

Ещё отмечу, что есть и другие онлайн-редакторы Lottie и даже более простые и приятные в использовании (например, Lottielab), но у них есть проблемы с экспортом в наши приложения. Мы с разработчиками протестировали файлы из нескольких редакторов, и Lottie Creator на 100% будет работать, к тому же это официальный клиент от Lottie.

С инструментом определились, теперь можно перейти к самому гайду.

Гайд лучше сразу использовать на практике, поэтому можете добавить статью в закладки и вернуться к нему с боевой задачей.

Финальный результат

Шаг 1. Подготовить файлы

Для начала нужны файлы для экспорта. Чтобы понять, какие именно файлы понадобятся, придумайте сценарий анимации.

Например, наша задача — сделать онбординг нового раздела, который появляется в отдельном табе существующего раздела, а также новые фильтры. Сценарий может быть таким: появляется экран с существующим разделом → добавляем на него новый таб → открываем новые фильтры → показываем как они работают.

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

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

Ещё лучше маскировать ненужные для онбординга элементы «скелетонами» (просто серыми блоками вместо контента), чтобы они не мешали выделить нужное, а сам онбординг выглядел более аккуратно.

Шаблон с файлами для онбординга можно посмотреть по ссылке.

Шаг 2. Экспортировать файлы

Выделяем все файлы и экспортируем в формате SVG, проверяем, чтобы все настройки были включены:

Чтобы применить к объекту автоанимацию (расскажу о ней ниже), экспортируйте каждый элемент на экране, с которым будет взаимодействие (кнопка, таб, снэк, шторка) как отдельный SVG-файл.

А если, наоборот, нужно экспортировать весь экран (а уже поверх него добавлять интерактивные элементы) — сначала сгруппируйте все элементы на нём, чтобы при импорте не было ошибок в порядке слоёв.

Шаг 3. Открыть Lottie Creator и перенести файлы

Можно через интерфейс, а можно просто перенести через drag&drop.

Иногда есть проблемы с переносом растровых изображений в Lottie Creator (например, фото товара в карточке) — попробуйте импортировать изображение отдельно или замените растровую фотографию на иконку. 

Чтобы было удобнее работать с файлами, лучше сразу при экспорте назвать их таким образом, чтобы различать в списке файлов, иначе будет так:

Шаг 4. Подготовить сцену

Нужно выставить размеры сцены и задать время анимации — можно для начала поставить с запасом 10 сек., а потом сократить, если получилось короче.

Далее первым слоем ставим маску устройства, её можно сразу заблокировать.

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

Шаг 5. Сделать анимированный онбординг

Весь процесс анимации рассказывать и показывать будет долго и непонятно, поэтому напишу про несколько основных приёмов. Lottie Creator, помимо прочего, хорош тем, что в него встроены готовые анимации, которые можно применить к объектам. Поэтому достаточно выделить экран, применить анимацию и отредактировать точки на таймлайне.

1. Движение курсора и тап по нему

Выбираем курсор → Выбираем анимацию появления → Перемещаем курсор куда нам надо (на время завершения анимации) → Добавляем на таймлайн дефолтное значение размера (нажатием на ромбик — чтобы размер изменялся только с этой секунды) → Выбираем анимацию Pop out → Готово, далее можно сделать переход на другой экран.

2. Переход на другой экран 

Добавляем экран фильтров → Перетаскиваем его в правую сторону за область сцены → Выбираем анимацию появления → Перемещаем экран на сцену (на время завершения анимации) → Перемещаем точки на таймлайне так, чтобы попасть в нажатие курсора.

3. Выезжающая шторка

Добавляем шторку и оверлей на сцену → Перетаскиваем шторку под сцену → Для оверлея создаём анимацию с параметром Opacity и ставим 0% → Для шторки выбираем анимацию появления → Перемещаем шторку куда нам надо → В середине анимации шторки добавляем точку на таймлайн для анимации оверлея и ставим в Opacity 100% → Profit.

У этой функциональности есть ограничение — автоанимация применяется только на целый файл, то есть, если вы экспортировали весь экран в SVG, применить анимацию можно будет только к целому экрану, а не к кнопке внутри, например. Поэтому, чтобы применять автоанимацию, экспортируйте элементы по отдельности.

Если автоанимация вам не подходит, всё то же самое можно сделать вручную. На примере курсора:

Добавляем точки на таймлайне для анимации курсора с типом Position и Scale → Убираем курсор с экрана → Передвигаем таймлайн на сколько нам надо (1s) → Добавляем точку на таймлайне для Position → Перемещаем курсор куда нам надо → Добавляем точку для Scale (чтобы уменьшение началось с этой секунды, а не раньше) → Передвигаем таймлайн на 5-10f → Изменяем Scale курсора на 40x40px → Передвигаем таймлайн на 5-10f → Возвращаем Scale курсора на 48x48px → Готово.

Шаг 6. Экспортировать в Lottie

Нажимаем на кнопку Export, откроется новая страница для сохранения, сохраняем анимацию в свой Workspace в Lottie Files.

Шаг 7. Экспортировать в JSON

В Lottie Files уже можно экспортировать свою анимацию в JSON, GIF, MP4 и так далее. Для добавления анимации в приложение достаточно JSON-файла.

Готово!

Полезные ссылки

Спасибо, что прочитали до конца! Если у вас остались вопросы или вы хотите меня поправить, смело пишите в комментарии или лично: t.me/mikemurzak

Ещё можете смотреть мои сохранёнки и заметки на тему дизайна в телеграм-канале: t.me/design10000

Подписывайтесь на телеграм-канал Ozon Design — это коллективный аккаунт ведущих дизайнеров Ozon, где мы делимся опытом, мыслями и крутыми подборками про дизайн и продуктивность.

© Habrahabr.ru