Советы по анимации пользовательских интерфейсов в After Effects.
Ранее я уже писал, почему Motion Design не должен вызывать трудности, но я хочу, чтобы дизайнерам стало еще проще использовать принципы Material motion, которые я знаю и люблю. After Effects – это основной инструмент, который наша команда использует для создания примеров анимации в этом руководстве. Использовав его для анимирования львиной доли своих интерфейсов, я бы хотел поделиться рядом советов.
Скачайте файл по ссылке ниже, чтобы увидеть, завершенный проект с использованием моего упрощенного рабочего процесса (описан в общих чертах ниже). Он содержит коллекцию компонентов Material, базовых интерфейсов и переходов навигации.
Импорт исходников в After Effects
Сперва нам нужны исходники для анимации. Большинство визуальных дизайнеров в нашей команде используют Sketch, который по умолчанию не взаимодействует с After Effects. К счастью, Adam Plouff создал этот плагин, который дает нам такую возможность. Я использовал его для импорта нашей библиотеки базовых компонентов Material из Sketch в After Effects. Эти активы находятся в папке Components.
Создание интерфейсов
С этой библиотекой базовых компонентов можно быстро собрать новые интерфейсы, перетащив их в новый компилятор After Effects.
Пример перетаскивания импортированных компонентов Sketch в компилятор After Effects
Настройка компонентов
Эти базовые компоненты – отличное начало проекта. Теперь их необходимо настроить для создания широкого спектра интерфейсов. Вот тут Мастер-свойства After Effects раскроются во всей красе. Эта, часто игнорируемая, функция позволяет создать один повторно используемый актив, который можно быстро настроить, не дублируя оригинал. Это похоже на переопределения символов в Sketch. Например, панель приложения часто настраивается путем изменения иконок, цветов и теней. Поэтому я добавил эти три элемента в качестве мастер-свойств компонента.
Пример быстрой настройки компонента при помощи мастер-свойств
Добавив мастер-свойства к каждому компоненту, я смог быстро создать коллекцию интерфейсов для анимации. Вы можете найти их в папке Baseline UIs, когда скачаете документ по ссылке выше.
Коллекция интерфейсов, созданных с использованием компонентов, настроенных с использованием мастер-свойств
Анимационные переходы
Теперь, когда мы задали рабочий процесс по созданию интерфейсов, пришло время перейти к анимированию. Примеры в папке Navigation transitions иллюстрируют способ применения паттернов Material motion в After Effects. Если вы хотите узнать больше об этих паттернах, обязательно прочитайте мою предыдущую статью.
Примеры навигационных переходов с использованием паттернов Material motion
Для начала мы анимируем каждое свойство без плавности (easing). Затем родительская композиция перераспределяется по времени, чтобы применить плавность и установить длительность для всех вложенных ключевых фреймов. Это позволяет быстро регулировать плавность и длительность, поскольку только два перераспределенных по времени ключевых фрейма контролируют весь переход. Это также простой метод применения одной всеохватывающей кривой плавности ко всем анимированным элементам. Элементы, постоянно находящиеся на экране, анимируются при помощи кривой плавности. Исходящие элементы покидают экран по мере ускорения кривой, а появляющиеся на экране элементы – по мере замедления. Подробнее читайте здесь в разделе «Сложная хореография».
Этот метод можно использовать для последовательной анимации большинства переходов, в которых используются принципы Material motion. Он не годится для более сложных сценариев или сильно стилизованных переходов, но они, как правило, встречаются реже.
After Effects – настолько гибкий инструмент, что трудно утверждать, что только один рабочий процесс является правильным. У каждого дизайнера будет свой уникальный подход к анимационным задачам. Я надеюсь, что эти советы натолкнут вас на мысль и помогут стать более эффективным моушен-дизайнером.
Перевод статьи Jonas Naimark
Топ коментарі (0)