Как анимировать интерфейсы в After Effects со скоростью света

Это статья для тех, кто только ознакамливается с данной программой, но уже знаком с интерфейсом AE.

Анимация — неотъемлемый скилл для UX/UI дизайнера, если вы претендуете на позицию выше, чем Junior. Ни для кого из дизайнеров не секрет, что самый продвинутый инструмент для анимации — After Effects.

Нужно ли разбираться в таком сложном инструменте, если есть более простые программы. Мой ответ — да. Вы не сделаете в Principle, Proto.io… то, что можно сделать в AE, и рано или поздно придется изучать возможности этой программы. Тем более YouTube кишит туториалами практически под любую задачу.

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

1. AEUX выгружает исходники за тебя

Одним действием переносим макет в AE

AEUX – это плагин, который экспортирует все слои из Sketch или Figma в After Effects. Установка займет не более 15 минут, а в будущем это сэкономит вам уйму времени для выгрузки исходников в проект AE.

Самый детальный видео-туториал установки данного плагина на русском

2. Если используете что-то не один раз — сделайте шаблон

В каждом проекте использую свой шаблонный кастомный курсор, который показывает *tap, *swipe, *scroll и другие интерактивные состояния. Мне остается лишь поменять цвет курсоров для анимации. Это позволяет уйти от стандартных стрелочек и экономит время на создания новых курсоров.

Внимание на курсоры

Вы можете скачать мой фри пак курсоров по этой ссылке

3. Скрипт Motion V2 быстро создает нужные графики

Интерфейс Motion V2

Прежде чем использовать дополнительные скрипты/плагины для графиков, вы должны понимать как они работают. Если вы понимаете как дергать усики и за что они отвечают, тогда этот скрипт поможет не переходить каждый раз в графики для точечной настройки усиков. Отличным плюсом является доп. панель с созданием различных анимаций, например, анимации подпрыгивания. Честно говоря, дополнительной панелью я практически не пользуюсь, но они могут пригодиться вам в любой момент.

Интерфейс Flow

Есть похожий скрипт — Flow, если вдруг Motion V2 вам не подошел. Он предоставляет простой интерфейс для адаптации анимационных кривых. Все тоже самое, только с уже готовыми шаблонами анимаций и без дополнительных приколов с анимацией прыжков.

4. Bodymovin и Lottie помогут выгрузить анимации в разработку

Хватит выгружать прелоудеры и другие элементы анимации в mp4/gif. Если вы хотите, чтобы ваша анимация не теряла качества и не нагружала ваш сайт/приложение, используйте Bodymovin или Lottie. Давайте разбираться что это такое:

  • Bodymovin — это open-source библиотека для экспорта анимаций из After Effects в код. Она делает парсинг всей анимации в АЕ и создает *.json файл со всеми необходимыми данными, которые можно отправлять разработчику. Однако, будьте внимательны при выгрузке анимации и сначала проверьте поддержку, т.к не все эффекты поддерживаются данным форматом. Обязательно проверяйте ваш исходник на адекватность вашей анимации. Простой пример, я сделал анимацию для своего CV, но на выходе оказалось что обводка и свечение не поддерживаются, поэтому мне пришлось упростить анимацию в конечном варианте.
Открытие Bodymovin
  • LottieFiles работает аналогично Bodymoving и позволяет просматривать анимацию, загружать её на платформу LottieFiles, сохранять на пк. Вот хорошая статья для более информативного объяснения.

5. Привязывайте объекты к Null Object для переходов, слайдеров и др.

Приведу простой и распространенный пример. Чтобы сделать анимацию прокрутки экрана, я собираю все блоки в отдельные композиции. После чего привязываю их к Null Object (переименовываю в «scroll»), чтобы привязать все мои блоки к одному объекту. Смотрите пример этого кейса на скриншотах ниже.

1. Создаю новый Null Object
2. Переименовываю его в «Scroll» и привязываю всё композиции к «Scroll»
3. Ставлю нужные брейкпоинты для плавного скрола блоков
4. Готовый вариант. Внимание на слой Scroll и его ключи. Всё привязано к одному слою. Легко ориентироваться в проекте и не нужно настраивать каждую позицию у композиции.

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

6. Собирайте все файлы для анимации в одну папку

Если вы собираете композиции из локальных исходников, советую собирать всё в одну папку. Это решит 2 проблемы:

  • Если путь к вашим файлам потеряется, вы сможете показать AE путь к одному файлу и все остальные файлы обновятся сами собой
  • Это поможет избавиться от беспорядка в вашем проекте и быстрее ориентироваться в файлах. Очень важно для больших проектов
Мой вариант

7. AfterCodecs для рендера видео с минимальным весом в mp4

В новых версиях AE нет возможности рендерить видео с нормальным сжатием, поэтому ваши видео будут весить по 2 гигабайта за 2-х минутное видео. Раньше, мне приходилось рендерить видео в mov, перекидывать его в HandBrake (очень полезное бесплатное приложение для mac, если нужно сжать видео) и сжимать до нужного веса. AfterCodecs скрипт добавляет возможность сжимать по-старинке через кодек H.264 в mp4, не делая дополнительных движений.

Интерфейс скрипта AfterCodecs

В заключение

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

Буду рад общению. По всем вопросам: Instagram, ВКонтакте, Facebook, Telegram, блог-дневник в Telegram

0
28 комментариев
Написать комментарий...
Sergio Carlione

Спасибо за статью! Для штатного рендера в нужный формат, можно использовать Adobe media encoder. Главное, чтобы версии Ae и этой штуки были одинаковыми

Ответить
Развернуть ветку
hakhagmon

сразу видно лицензионного пользователя 

Ответить
Развернуть ветку
Sergio Carlione

Да нет, как ни странно) Последний момент как раз указан из опыта танцев с бубнами

Ответить
Развернуть ветку
hakhagmon

Это был сарказм, так как в креатив клауд все идет сразу, без бубна

Ответить
Развернуть ветку
Кирилл Клейменов

AfterCodecs лучше, энкодер(в плане интеграции и ае) слишком тормозной и кривоватый.

Ответить
Развернуть ветку
Надир Мурсалов

Умиляет наивность автора, считающего что After - самый продвинутый комбайн для анимации :) 

Ответить
Развернуть ветку
Sakari Sauso
Ответить
Развернуть ветку
Андрей Морозов

ПаверПоинт шоль? Вы батенька любите извращения😂🔧🔧

Ответить
Развернуть ветку
Пластиковое Окно

Потом из-за такого горе аниматора и всратой маленькой анимации нужно тащить на фронт библиотеку для воспроизведения этой анимации, которая весит 100500 метров.

Ответить
Развернуть ветку
Yuri G

потому что чел решил что это отличает джуна от мида, а зарплату хочется мида

Ответить
Развернуть ветку
Sakari Sauso

да можно вообще гипертекстом ограничиваться, ну и js по праздникам

Ответить
Развернуть ветку
Mark Rapida Gromov

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

Другое дело, что в вебе это усложняет рендер и сильно нагружает среднестатистический кудахтер на 486 камне.

С мобильными приложениями все проще в плане ресурсов, так что это больше для них

Ответить
Развернуть ветку
Anton Reut

Когда коллеги смотрят на мой UI:

Ответить
Развернуть ветку
Volc O'Hara

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

Ответить
Развернуть ветку
Nick

Статья - супер!

Давно хотел сесть и начать по чуть-чуть практиковаться в Adobe AE, ваша статья сподвигла наконец-то этим заняться.

Ответить
Развернуть ветку
Roman Solonovich
Автор

Спасибо. Я это очень ценю, когда мои действия как-то помогают людям 

Ответить
Развернуть ветку
Энди

Спасибо за статью, сохранил)

Ответить
Развернуть ветку
Evgeny Noev

Подскажите, а как экспортируете в gif из AE?

Ответить
Развернуть ветку
Данил Гафиев

Можно вывести в секвенцию, а потом в фш импортировать и уже собрать в нём.

Ответить
Развернуть ветку
Sergey Kotelnikov

Посмотри скрипт GifGun для AE

Ответить
Развернуть ветку
Sakari Sauso

Я просто экспортирую видео, а потом делаю из него гиф в фотошопе

Ответить
Развернуть ветку
Svetylek V

Aeux вроде ещё сырой был? У меня половину объектов куда то за экран в одну кучу складывает))

Ответить
Развернуть ветку
Антон Майдуров

Уже нет, его допиливают, сейчас почти ничего не ломает)

Ответить
Развернуть ветку
Viktor

AE - легчайшая программа. Там даже первоклассник сможет 3Д-анимацию сделать

Ответить
Развернуть ветку
Marat Nigametzianov

...и интерфейсы!

Ответить
Развернуть ветку
Viktor

ну а это вообще в детском саду осваивают. Малоизвестный факт, но все известные моушн-дизайнеры уже в яслях заливали свои проекты на videohive

Ответить
Развернуть ветку
Истории компаний

Почему все дизайнеры сидят в старбаксе? ))

Ответить
Развернуть ветку
Roman Solonovich
Автор

На самом деле в моем городе нет старбакса))) Это игра слов+стереотип, чтобы убрать долю серьезности в статье

Ответить
Развернуть ветку
25 комментариев
Раскрывать всегда