Как делать простые анимированные онбординги в Lottie без After Effects

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

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

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

4a0b908580886431de291cf6d3da4388.png

Дисклеймер: это гайд для продуктовых, а не 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 был создан не для коротких анимаций интерфейса, а для более сложных задач, поэтому для простых анимированных онбордингов его функциональность и неповоротливость выглядят излишними.

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

After Effects

Lottie Creator

Запуск

Нужна лицензия, которую сейчас не получишь в РФ. Или скачивать пиратскую версию.

Нужно просто зарегистрироваться на сайте (от блокировки, правда, никто не застрахован).

Импорт файлов

Нужен специальный плагин для AE и отдельно для Figma, затем надо выделить нужные экраны и выгрузить их в AE. В результате в AE появляются файлы непонятного формата (скорее всего, растровые, а не векторные).

Можно сделать обычный экспорт SVG-файлов из Figma, и добавить их посредством drag&drop прямо в редактор — импортируются векторные файлы.

Работа с анимацией

Принцип одинаковый в двух инструментах, поэтому если делали онбординги в AE, разницы в работе с анимацией не будет: такой же таймлайн и работа с кривыми.

Экспорт

Чтобы сделать экспорт готовой анимации из AE в Lottie, опять потребуется отдельный плагин, который по дороге может и что-то сломать.

Проект из Lottie Creator сразу сохраняется в вашу учётную запись Lottie, и онбординг готов для скачивания в формате JSON.

Обновления

AE функционально не обновляется веками.

Lottie Creator — онлайн-редактор, поэтому обновления и новые фичи появляются автоматически и регулярно.

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

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

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

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

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

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

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

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

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

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

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

5bb52fdd69406cbe931c008fdc20aa3a.png

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

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

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

2504093f4fb801af252e434e9896bbbd.png

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

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

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

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

368167b91beec290516d6469b71a3800.png

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

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

f896a7f857ff2608bd1beaed9d5db454.png

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

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

61778be4a8c5a620fd19bc17aeb6bc30.png

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

226385e827168d92c9aaac344147c3c1.png

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

11562ef2eb92d7f3e23c0120f0c0bc37.png

Шаг 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.

26dcdbf33c2c63080c4b80f758da17a9.png

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

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

6b3b71b71f497d172d564bb364ee1778.png

Готово!

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

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

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

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

958588452fcad83efbe4bf629408eca2.png

© Habrahabr.ru