Масштабная трансформация
Сбербанка в прямом эфире
LIVE
Дизайн
Roman Solonovich
8653

Как анимировать интерфейсы в 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
ITI Capital
Новый закон о категоризации инвесторов. Что важно о нем знать, и как теперь покупать акции иностранных компаний
Мы уже рассказывали вам, что Центробанк разрабатывает новый закон, о котором важно знать инвесторам. Это закон “о…

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": 531, "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 }
Объявление на vc.ru
0
29 комментариев
Популярные
По порядку
Написать комментарий...
5

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

Ответить
16

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

Ответить
0

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

Ответить
7

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

Ответить
0

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

Ответить
–5

Умиляет наивность автора, считающего что 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

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

Ответить

Комментарии