1 12 1160x620 - Гайд по Material Motion в After Effects

Советы по анимации пользовательских интерфейсов в After Effects.

Ранее я уже писал, почему  Motion Design не должен вызывать трудности, но я хочу, чтобы дизайнерам стало еще проще использовать принципы Material motion, которые я знаю и люблю. After Effects – это основной инструмент, который наша команда использует для создания примеров анимации в этом руководстве. Использовав его для анимирования львиной доли своих интерфейсов, я бы хотел поделиться рядом советов.

Скачайте файл по ссылке ниже, чтобы увидеть, завершенный проект с использованием моего упрощенного рабочего процесса (описан в общих чертах ниже). Он содержит коллекцию компонентов Material, базовых интерфейсов и переходов навигации.

Скачать здесь👈

Импорт исходников в After Effects

Сперва нам нужны исходники для анимации. Большинство визуальных дизайнеров в нашей команде используют Sketch, который по умолчанию не взаимодействует с After Effects. К счастью, Adam Plouff создал этот плагин, который дает нам такую возможность. Я использовал его для импорта нашей библиотеки базовых компонентов Material из Sketch в After Effects. Эти активы находятся в папке Components.

Создание интерфейсов

С этой библиотекой базовых компонентов можно быстро собрать новые интерфейсы, перетащив их в новый компилятор After Effects.

Гайд по Material Motion в After Effects
Пример перетаскивания импортированных компонентов Sketch в компилятор After Effects

Настройка компонентов

Эти базовые компоненты – отличное начало проекта. Теперь их необходимо настроить для создания широкого спектра интерфейсов. Вот тут Мастер-свойства After Effects раскроются во всей красе. Эта, часто игнорируемая, функция позволяет создать один повторно используемый актив, который можно быстро настроить, не дублируя оригинал. Это похоже на переопределения символов в Sketch. Например, панель приложения часто настраивается путем изменения иконок, цветов и теней. Поэтому я добавил эти три элемента в качестве мастер-свойств компонента.

Гайд по Material Motion в After Effects
Пример быстрой настройки компонента при помощи мастер-свойств

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

Гайд по Material Motion в After Effects
Коллекция интерфейсов, созданных с использованием компонентов, настроенных с использованием мастер-свойств

Анимационные переходы

Теперь, когда мы задали рабочий процесс по созданию интерфейсов, пришло время перейти к анимированию. Примеры в папке Navigation transitions иллюстрируют способ применения паттернов Material motion в After Effects. Если вы хотите узнать больше об этих паттернах, обязательно прочитайте мою предыдущую статью.

Гайд по Material Motion в After Effects
Примеры навигационных переходов с использованием паттернов Material motion

Для начала мы анимируем каждое свойство без плавности (easing). Затем родительская композиция перераспределяется по времени, чтобы применить плавность и установить длительность для всех вложенных ключевых фреймов. Это позволяет быстро регулировать плавность и длительность, поскольку только два перераспределенных по времени ключевых фрейма контролируют весь переход. Это также простой метод применения одной всеохватывающей кривой плавности ко всем анимированным элементам. Элементы, постоянно находящиеся на экране, анимируются при помощи кривой плавности. Исходящие элементы покидают экран по мере ускорения кривой, а появляющиеся на экране элементы – по мере замедления. Подробнее читайте здесь в разделе «Сложная хореография».

Гайд по Material Motion в After Effects

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

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

Оригинал: Jonas Naimark

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

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

Исследование зарплаты дизайнеров 2017 в США

Эта статья содержит подробный анализ отчета о зарплате дизайнеров интерфейсов в Соединенных Штатах Америки.

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

Руководство по дизайн-системам от ведущих мировых брендов

Статья о ведущих мировых брендах, которые создали свои дизайн-системы общедоступными, поделившись своими идеями и процессами с дизайн-сообществом.