Я работаю продуктовым дизайнером, и на моей практике анимации в интерфейсах часто уделяли мало внимания. Я говорю не про нативную анимацию переходов, а про заглушки, онбординги, кастомные лоадеры, splash скрины и т.д. Один из ключевых пунктов для отказа — долго и сложно. Но уже давно известно, что существует библиотека Lottie, через которую анимацию внедрить просто и быстро.
Итак, я расскажу свой способ создания анимации с помощью Lottie, также сделаю обзор на крутые возможности этой библиотеки. Для этого нужен Adobe Illustrator, After Effects и плагин Lottie.
Подготовка изображения
Для начала нам нужно векторное изображение, которое будем анимировать. Я взяла свою рандомную картинку. Изображение должно быть в плотности 1x, это важно для передачи в разработку.
Открываем изображение в Adobe Illustrator, и смотрим на панель слоев.
Все объекты обычно располагаются на одном слое. В нем сложно ориентироваться, поэтому я группирую слои и переименовываю их, чтобы в дальнейшем было удобно.
Так намного лучше, теперь все части летучей мыши на разных слоях, и можно легко понять где крылья, а где ноги. Сохраняем файл в формате .ai
На этом подготовка нашего изображения закончена, можно приступать к импорту в After Effects.
Импорт в After Effects
Открываем After Effects и находим слева панель Project. Перетаскиваем туда наш подготовленный .ai файл
Откроется диалог. Настройки не меняем, нажимаем ок.
Открываем нашу композицию и смотрим на панель слоев. Все наши слои перенеслись так, как были сгруппированы в AE.
Теперь необходимо перевести все .ai слои в шейповые, чтобы их можно было легко редактировать. Есть несколько способов, лично я для этого использую плагин Motion Tool. Выделяю наши ai слои, зажимаем ALT и нажимаем Convert to shape. И происходит магия.
Либо можете использовать бесплатный вариант.
Существует встроенная функция в AE. Для этого выделите все слои и нажмите правую кнопку мыши: Create — Create Shapes from Vector Layer, после чего удалите задублированные слои.
Итак, теперь у нас есть шейповые слои, с которыми можно работать.
Далее вы должны заанимировать изображение так, как хотите чтобы оно выглядело. Очень важно не использовать сложные эффекты, выражения и т.д. Желательно добавлять анимацию самыми примитивными методами. У Lottie есть ограничения, список тут. Проскрольте до раздела "Supported Features" и посмотрите, чтобы потом не удивляться.
Теперь, когда анимация готова, переходим к выгрузке в Lottie.
Установка и выгрузка в Lottie
Качаем Plugin Lottie и устанавливаем. Также нужно зарегистрировать аккаунт и авторизоваться. Запускаем наш плагин. Он находится в разделе Window – Extention - LottieFiles
После авторизуемся и в окне плагина выбираем нашу композицию, нажимаем стрелку.
Далее рендерится наша анимация и вы видите окно предпросмотра. Если анимация выглядит не так, как в предпросмотре AE, то скорее всего вы использовали неподдерживаемые функции. Обязательно проверяйте, чтобы все отображалось корректно. И, если вас все устраивает, то нажимайте Upload
Далее анимация загрузится, и можно будет открыть ссылку, кликнув по глобусу. Вуаля.
Скидывайте эту ссылку разработчикам, сохраняйте себе. Можно встраивать Лотти в iOS, Android и Web.
В заключение
Как видите, создать и передать в разработку такую анимацию достаточно просто. Разработчику нужно будет подключить Lottie библиотеку в проект и добавить код, который вы передадите. Вот и все!
Также читайте мою статью по крутым фишкам Лотти, там будет обзор дополнительных возможностей, которые точно вас заинтересуют.
P.S. Анимацию летучей мыши можете посмотреть в моем instagram.
Спасибо что дочитали, буду рада ответить на ваши вопросы ❤️