Дизайн
Roman Solonovich
8835

Как анимировать интерфейсы в 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 и другие интерактивные состояния. Мне остается лишь поменять цвет курсоров для анимации. Это позволяет уйти от стандартных стрелочек и экономит время на создания новых курсоров.

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

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

Объявление на vc.ru

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

{ "author_name": "Roman Solonovich", "author_type": "self", "tags": [], "comments": 29, "likes": 75, "favorites": 533, "is_advertisement": false, "subsite_label": "design", "id": 147563, "is_wide": false, "is_ugc": true, "date": "Tue, 04 Aug 2020 19:01:09 +0300", "is_special": false }
Трибуна
Собственная CRM-система с сопровождением клиентов и встроенной логистикой
Меня зовут Павел Ковтун, я совладелец сервиса по аренде сменных ковров в Санкт-Петербурге и Ленообласти — Virginia. С…
Объявление на vc.ru
0
29 комментариев
Популярные
По порядку
Написать комментарий...
5

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

Ответить
16

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

Ответить
0

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

Ответить
7

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

Ответить
0

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

Ответить
–4

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

Ответить
1

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

Ответить
3

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

Ответить
1

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

Ответить
0

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

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

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

Ответить
–1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

Комментарии

null