after effects 1160x620 - 7 маленьких трюков создания анимации в After Effects

Эффективная работа с разработчиками

Несмотря на то, что существует буквально 97 инструментов для прототипирования ваших идей, лучшим инструментом анимации по-прежнему является After Effects. Однако проблема в том, что вы будете поражены большим количеством плагинов. Поэтому я выбрал один из лучших и наиболее важных плагинов анимации пользовательского интерфейса.

7 маленьких трюков создания анимации в After Effects

1. Начнем с эскиза

7 маленьких трюков создания анимации в After Effects
Эскиз

Убедитесь, что вы правильно назвали слои, иначе будет очень сложно найти ваши слои в AE.AEUX – это плагин, который экспортирует все слои Sketch в After Effects.

2. Импорт в After Effects

7 маленьких трюков создания анимации в After Effects
After effects
  • Загрузите обновления AEUX – это плагин, и если вы нажмете на компоновку, все слои эскиза будут скопированы в After Effects.
  • Вам нужно иметь ZXP Installer для установки плагина aftereffects .

3. Скачайте плагин

Хоть aftereffects и имеет очень мощные функционал, но нам достаточно двух плагинов для создания анимации UI. Только расположение плагина, о котором я упоминаю ниже, сохранит ваше рабочее пространство.

7 маленьких трюков создания анимации в After Effects

https://aescripts.com/flow/

https://www.mtmograph.com/motion

https://aescripts.com/bodymovin/

https://google.github.io/inspectorspacetime/

4. Плавные переходы

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

7 маленьких трюков создания анимации в After Effects
  • Если вы нажмете на графический значок, это будет слишком сложно и хаотично, чтобы настроить множество графиков. Вот здесь то плагины и полезны.
  • Flow предоставляет простой интерфейс для адаптации анимационных кривых, не касаясь графика.
  • Animation-composer’s показывает ключевые кадры для облегчения ваших переходов.

5. Экспорт анимации для разработчиков

Как разработчики могут создавать анимацию, не тратя время:

  • Нажмите «Настройка» и добавьте демонстрационный файл
  • Выберите папку назначения
  • Затем предварительный просмотр внутри AE
7 маленьких трюков создания анимации в After Effects

6. Предварительный просмотр

Вы можете сделать это в lottiefiles, если хотите просмотреть или поделиться своей работой с сообществом. Вы даже можете сканировать QR для мобильного тестирования.

7 маленьких трюков создания анимации в After Effects

7. Экспорт

Иногда вы работаете с пользовательским интерфейсом в это время, используя Inspector Spacetime. Плагин создает код автоматически для быстрой Android-разработки.

  • Просто выберите ключевые кадры
  • Выберите режим пикселей
  • Нажав кнопку экспорта, вы получите это в формате JSON
7 маленьких трюков создания анимации в After Effects

Экспорт в gif в один клик

https://aescripts.com/gifgun/

Оригинал: Johny Vino

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Принципы анимации для UX и UI дизайнеров, от простого к сложному

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

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Как повысить ценность дизайна благодаря анимациям в интерфейсе

В первую очередь давайте рассмотрим классификации, техники и специфики анимации. Затем, сравним некоторые инструменты для создания анимаций