Как анимировать интерфейсы в After Effects со скоростью света
Это статья для тех, кто только ознакамливается с данной программой, но уже знаком с интерфейсом AE.
Анимация — неотъемлемый скилл для UX/UI дизайнера, если вы претендуете на позицию выше, чем Junior. Ни для кого из дизайнеров не секрет, что самый продвинутый инструмент для анимации — After Effects.
Нужно ли разбираться в таком сложном инструменте, если есть более простые программы. Мой ответ — да. Вы не сделаете в Principle, Proto.io… то, что можно сделать в AE, и рано или поздно придется изучать возможности этой программы. Тем более YouTube кишит туториалами практически под любую задачу.
Все учат делать анимацию, но не показывают, как её делать быстрее. Я покажу вам свои фишки, которые помогают сэкономить мне лишний час для похода в Starbucks.
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, не делая дополнительных движений.
В заключение
Надеюсь, эта статья была полезна не только новичкам AE. Эти принципы помогают мне работать быстрее и продуктивнее. Не стесняйтесь оставлять в комментариях свои фишки для ускорения процесса.
Буду рад общению. По всем вопросам: Instagram, ВКонтакте, Facebook, Telegram, блог-дневник в Telegram
Спасибо за статью! Для штатного рендера в нужный формат, можно использовать Adobe media encoder. Главное, чтобы версии Ae и этой штуки были одинаковыми
сразу видно лицензионного пользователя
AfterCodecs лучше, энкодер(в плане интеграции и ае) слишком тормозной и кривоватый.
Комментарий недоступен
ПаверПоинт шоль? Вы батенька любите извращения😂🔧🔧
Потом из-за такого горе аниматора и всратой маленькой анимации нужно тащить на фронт библиотеку для воспроизведения этой анимации, которая весит 100500 метров.