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

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

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

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

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

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

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

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

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

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

  1. Переходим в пункт меню Figma → Plugins → Manage Plugins.
  1. Нажимаем Create new plugin.
  1. Нажимаем в открытом окне Link existing plugin и выбираем файл manifest.json в скачанном ранее архиве AEUX из шага п. 3.
  1. Теперь плагин AEUX должен быть установлен в Figma. Проверить его можно в меню Plugins → Development → AEUX.

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

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

Почему Lottie?

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

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

Советы взяты из хорошей статьи:
  • Не используйте какие-либо эффекты в AE. Векторная анимация их не будет поддерживать. Напомню про таблицу поддерживаемых фич в AE.
  • Желательно все слои держать в одной композиции AE. Точнее, вы можете во время работы делать множество композиций внутри проекта, но результирующая на экспорт в json через bodymovin должна быть только одна! 
  • Простыми словами: работаете с множеством композиций, но в итоге копируете все слои с ключами в итоговую композицию. Но я рекомендую просто привыкнуть к работе в одной композиции, тем самым вы избежите лишних проблем.
  • Лучше отказаться от использования Expressions при работе. Либо их можно использовать, но с осторожностью, и «запекать» их перед экспортом анимации в слое. Почитать, как работать с Expressions, можно тут.
  • Использовать меньше Alpha matte и Alpha inverted matte. Лучше вместо этих эффектов использовать маски.
  • Чем меньше масок и keyframes у вас в анимации, тем меньше её вес.
  • С градиентами возникают проблемы. Автор из статьи рекомендует сохранять проект перед экспортом, возможно, это помогает, но скажу по своему опыту, что с градиентами действительно возникали большие проблемы и лучше попробовать от них отказаться. Либо предварительно сделать черновой экспорт с использованием градиента и проверить его отображение в предпросмотре.

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

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

  1. Запускаем After Effects (далее в статье для просто AE) и окно плагина AEUX.
  1. Выбираем в окне плагина AEUX раздел New Comp (он выбран по дефолту). 
  1. В секции Options выставляем, на какой коэффициент увеличить импортированную композицию. 
  • Я не рекомендую работать с графикой в маленьком размере, в коэффициенте 1× будет попросту неудобно. Поэтому для иконки рекомендую выбрать коэффициент 3×. По умолчанию выбран коэффициент 3×. После на шаге экспорта анимации можно будет сделать результат в коэффициенте 1×
  1. Frame rate — оставляйте 60 fps. С 60 кадрами в секунду анимация будет выглядеть естественней.
  1. Comp duration. Для анимации иконок мы используем диапазон времени 120–240 ms. Подробнее про длительность описано в принципах анимации.
  1. Плагин настроен, переходим в Figma. Читаем далее.