📄 Гайд · Создание анимаций в After Effects с помощью Lottie

Воркшоп по анимированным иконкам от Марата

В видео показана работа с Path объектов, другими словами, морфинг иконки из одного объекта в другой. Раскрыто больше подробностей про работу векторной SVG-иконки. Также показана работа с Lottie Preview. Рекомендую воркшоп к просмотру.

(*секретное видео*)

Туториал видео · Анимация в After Effects и экспорт в JSON

Если нет времени читать статью ниже, то можно посмотреть это видео. В нём я рассказал, как импортировать графику из Figma, как сделать простую анимацию в After Effects и как экспортировать её в JSON-файл. Но статью я также рекомендую изучить, в ней всё рассказывается более детально на примере другой иконки.

https://youtu.be/nVhudf1Bf5Y

Подготовка к работе

Давайте для начала установим и подготовим необходимые инструменты для работы.

Вам потребуется:

Adobe After Effects — можете установить Trial-версию с официального сайта или попросить лицензию у нашей техподдержки. В сообщении для них можете указать, почему вам нужен этот софт, например, «Для создания интерфейсных анимаций в Lottie».

Плагин Bodymovin для After Effects — ссылка на гайд по установке.

Плагин AEUX для After Effects. Скачиваем плагин с официального сайта для Figma и устанавливаем его с помощью приложения ZXP installer.

Настроить плагин AEUX в Figma.

Установка плагина AEUX в Figma для импорта графики в After Effects

Переходим в пункт меню Figma → Plugins → Manage Plugins.

Нажимаем Create new plugin.

Нажимаем в открытом окне Link existing plugin и выбираем файл manifest.json в скачанном ранее архиве AEUX из шага п. 3.

User-uploaded image: ++2020-11-24++22.41.39.png

Теперь плагин AEUX должен быть установлен в Figma. Проверить его можно в меню Plugins → Development → AEUX.

Делаем анимацию иконки

Учитывая, что мы делаем анимацию для последующего её использования с библиотекой Lottie, мы ограничены возможностями векторной анимации, но их нам будет вполне достаточно для воплощения любых идей!

Почему Lottie?

К примеру, у Android есть нативный векторный формат AVD (Animated Vector Drawable), но мы хотим использовать кросс-платформенное решение, чтобы можно было применять одну анимацию в двух платформах, на iOS и Android, и не хранить разные ресурсы для разных платформ. Тем самым экономятся силы разработки и дизайнеров.

Несколько простых, но важных правил перед началом работы

Советы взяты из хорошей статьи:

Не используйте какие-либо эффекты в AE. Векторная анимация их не будет поддерживать. Напомню про таблицу поддерживаемых фич в AE.

Желательно все слои держать в одной композиции AE. Точнее, вы можете во время работы делать множество композиций внутри проекта, но результирующая на экспорт в json через bodymovin должна быть только одна!

Простыми словами: работаете с множеством композиций, но в итоге копируете все слои с ключами в итоговую композицию. Но я рекомендую просто привыкнуть к работе в одной композиции, тем самым вы избежите лишних проблем.

User-uploaded image: 1*ciakTAPOvA3iKcU83M42gw.png

Пример множества слоёв в одной композиции. Источник

Лучше отказаться от использования Expressions при работе. Либо их можно использовать, но с осторожностью, и «запекать» их перед экспортом анимации в слое. Почитать, как работать с Expressions, можно тут.

Использовать меньше Alpha matte и Alpha inverted matte. Лучше вместо этих эффектов использовать маски.

Чем меньше масок и keyframes у вас в анимации, тем меньше её вес.

С градиентами возникают проблемы. Автор из статьи рекомендует сохранять проект перед экспортом, возможно, это помогает, но скажу по своему опыту, что с градиентами действительно возникали большие проблемы и лучше попробовать от них отказаться. Либо предварительно сделать черновой экспорт с использованием градиента и проверить его отображение в предпросмотре.

Импорт графики из Figma в Adobe After Effects

Разберём создание анимации на примере иконки check_circle_outline_28.

Запускаем After Effects (далее в статье для просто AE) и окно плагина AEUX.

Выбираем в окне плагина AEUX раздел New Comp (он выбран по дефолту).

В секции Options выставляем, на какой коэффициент увеличить импортированную композицию.

Я не рекомендую работать с графикой в маленьком размере, в коэффициенте 1 × будет попросту неудобно. Поэтому для иконки рекомендую выбрать коэффициент 3 ×. По умолчанию выбран коэффициент 3 ×. После на шаге экспорта анимации можно будет сделать результат в коэффициенте 1 ×.

Frame rate — оставляйте 60 fps. С 60 кадрами в секунду анимация будет выглядеть естественней.

Comp duration. Для анимации иконок мы используем диапазон времени 120–240 ms. Подробнее про длительность описано в принципах анимации.

Плагин настроен, переходим в Figma. Читаем далее.

User-uploaded image: ++2020-11-24++23.37.13.png

​​Воркшоп по анимированным иконкам от Марата

​​Туториал видео · Анимация в After Effects и экспорт в JSON

​​Подготовка к работе

​​Установка плагина AEUX в Figma для импорта графики в After Effects

​​Делаем анимацию иконки

​​Почему Lottie?

​​Несколько простых, но важных правил перед началом работы

​​Импорт графики из Figma в Adobe After Effects