Как анимировать интерфейсы в After Effects
1. AEUX выгружает исходники за тебя
AEUX – это плагин, который экспортирует все слои из Sketch или Figma в After Effects. Установка займет не более 15 минут, а в будущем это сэкономит вам уйму времени для выгрузки исходников в проект AE.
2. Если используете что-то не один раз — сделайте шаблон
В каждом проекте использую свой шаблонный кастомный курсор, который показывает *tap, *swipe, *scroll и другие интерактивные состояния. Мне остается лишь поменять цвет курсоров для анимации. Это позволяет уйти от стандартных стрелочек и экономит время на создания новых курсоров.
Вы можете скачать мой фри пак курсоров по этой ссылке
3. Скрипт Motion V2 быстро создает нужные графики
Прежде чем использовать дополнительные скрипты/плагины для графиков, вы должны понимать как они работают. Если вы понимаете как дергать усики и за что они отвечают, тогда этот скрипт поможет не переходить каждый раз в графики для точечной настройки усиков. Отличным плюсом является доп. панель с созданием различных анимаций, например, анимации подпрыгивания. Честно говоря, дополнительной панелью я практически не пользуюсь, но они могут пригодиться вам в любой момент.
Есть похожий скрипт — Flow, если вдруг Motion V2 вам не подошел. Он предоставляет простой интерфейс для адаптации анимационных кривых. Все тоже самое, только с уже готовыми шаблонами анимаций и без дополнительных приколов с анимацией прыжков.
4. Bodymovin и Lottie помогут выгрузить анимации в разработку
Хватит выгружать прелоудеры и другие элементы анимации в mp4/gif. Если вы хотите, чтобы ваша анимация не теряла качества и не нагружала ваш сайт/приложение, используйте Bodymovin или Lottie. Давайте разбираться что это такое:
- Bodymovin — это open-source библиотека для экспорта анимаций из After Effects в код. Она делает парсинг всей анимации в АЕ и создает *.json файл со всеми необходимыми данными, которые можно отправлять разработчику. Однако, будьте внимательны при выгрузке анимации и сначала проверьте поддержку, т.к не все эффекты поддерживаются данным форматом. Обязательно проверяйте ваш исходник на адекватность вашей анимации. Простой пример, я сделал анимацию для своего CV, но на выходе оказалось что обводка и свечение не поддерживаются, поэтому мне пришлось упростить анимацию в конечном варианте.
- LottieFiles работает аналогично Bodymoving и позволяет просматривать анимацию, загружать её на платформу LottieFiles, сохранять на пк. Вот хорошая статья для более информативного объяснения.
5. Привязывайте объекты к Null Object для переходов, слайдеров и др.
Приведу простой и распространенный пример. Чтобы сделать анимацию прокрутки экрана, я собираю все блоки в отдельные композиции. После чего привязываю их к Null Object (переименовываю в «scroll»), чтобы привязать все мои блоки к одному объекту. Смотрите пример этого кейса на скриншотах ниже.
Я использую этот метод в каждом интерфейсе для задач, когда анимирую любое последовательное движение, например для анимации слайдеров. Это очень экономит время, когда ты собираешь сложную анимацию с несколькими экранами и помогает использовать меньше ключей.
6. Собирайте все файлы для анимации в одну папку
Если вы собираете композиции из локальных исходников, советую собирать всё в одну папку. Это решит 2 проблемы:
- Если путь к вашим файлам потеряется, вы сможете показать AE путь к одному файлу и все остальные файлы обновятся сами собой
- Это поможет избавиться от беспорядка в вашем проекте и быстрее ориентироваться в файлах. Очень важно для больших проектов
7. AfterCodecs для рендера видео с минимальным весом в mp4
В новых версиях AE нет возможности рендерить видео с нормальным сжатием, поэтому ваши видео будут весить по 2 гигабайта за 2-х минутное видео. Раньше, мне приходилось рендерить видео в mov, перекидывать его в HandBrake (очень полезное бесплатное приложение для mac, если нужно сжать видео) и сжимать до нужного веса. AfterCodecs скрипт добавляет возможность сжимать по-старинке через кодек H.264 в mp4, не делая дополнительных движений.