Курс «Анимация интерфейсов» от Дениса Абдуллина

Зачем изучать анимацию? Вот несколько причин: создание привлекательного UI с микровзаимодействиями, эффективная презентация решений для заказчиков и пользователей, улучшение портфолио, выделение среди других дизайнеров. Курс по UI-анимации — это возможность освоить навыки создания анимаций для интерфейсов, чтобы сделать их более живыми и эмоциональными.

Курс ведет Денис Абдуллин, опытный дизайнер с победами в конкурсах и работой в крупных компаниях. Программа курса включает 10 уроков, охватывающих все аспекты работы с After Effects, начиная от основ и заканчивая сложными анимациями. Обучение подходит как для новичков, так и для тех, кто уже работает в других инструментах, таких как Figma или Sketch.

Краткое содержание курса «Анимация интерфейсов»:

1. Знакомство с интерфейсом After Effects и основами анимации.
2. Создание анимаций скролла и загрузки.
3. Работа с таймерами и морфингом объектов.
4. Сохранение и рендеринг анимации в различных форматах.
5. Создание реалистичных мокапов и 3D-иконок.
6. Комплексная анимация на примере приложения аренды авто.
7. Создание жидкой анимации и анимаций для Telegram.

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

Урок 1. Знакомство с интерфейсом After Effects, ключи и скорость анимации, подготовка анимации жестов

• Посмотрим на основные принципы работы в программе After Effects, сделаем композиции, посмотрим основные инструменты и параметры, применим горячие клавиши.
• Поменяем график скорости анимации (easing, изинг) вручную и с помощью стороннего плагина Flow (установим этот плагин).
• Сделаем анимацию жестов (tap, swipe, long tap, zoom/pinch): простое движение кругляшков в пространстве и изменение масштаба. Эти жесты потом будем использовать в презентации интерфейса.

Урок 2. Скролл и Pull-to-refresh

• Сохраним ассеты из Figma, воссоздадим макет в проекте After Effects без плагинов. Применим все основные простые параметры: Position (P), Rotation (R), Scale (S), Opacity (T). Сделаем анимацию загрузки, применив свойство Trim Path для анимации обводки. Отдельно сделаем анимацию скролла всего экрана. Соединим 2 анимации в одну.

Урок 3. Счетчики, таймеры, зависимости, морфинг, последовательность

• Будем применять код/выражения (expressions) для создания зависимостей и таймеров. Построим зависимости параметров друг от друга на примере стрелок часов. Сделаем простой счетчик последовательности цифр, и сложный анимированный счетчик с анимацией каждого числа по-отдельности.
• Попробуем сделать морфинг объектов на примере трансформации значка паузы в значок воспроизведения и волноформы.
• Рассмотрим применение анимации без анимации (отсутствие анимации между ключами, график hold).
• Сделаем последовательность, сделав одинаковую анимацию для всех виджетов на экране и расставив их на таймлайне последовательно автоматически.

Урок 4. Сохранение и рендеринг анимации

• Сохраним сделанную анимацию в видео в формате MP4 с помощью внутреннего способа в After Effects и отдельно с помощью программы Media Encoder, которая делает это более качественно.
• Сохраним все кадры анимации и с помощью Photoshop сохраним анимацию в формате GIF.

Урок 5. Маски и мокапы

• Разберем и применим 4 способа создания маски.
• Создадим реалистичные мокапы Apple iPhone и Apple Watch и мокапы в стиле Telegram с применением 3D, сделаем анимацию поворота мокапа, применим созданные в первом уроке жесты и добавим эффект размытия для них.

Урок 6. 3D-иконки

• Превратим плоские иконки из Figma в объемные 3D-иконки на примере доски наград по аналогии со стандартным приложением Фитнес в iPhone. Посмотрим возможности работы в 3D-пространстве: покрутим свет и материал, добавим hdri-карту, настроим камеру для избавления от перспективы (чтобы показать иконки в изометрии без перспективных искажений).

Урок 7. Комплексная анимация, приложение аренды авто

• Применим все основное в реалистичном проекте на примере приложения аренды авто, но на этот раз углубимся в применение этих параметров. Используем увеличение (scale) и изменение позиции (position) вместе для изменения масштаба карты, для счетчика добавим букву в конце, изменим путь движения маркера, применим эффект тени, вставим 3D-модель автомобиля скачанную из интернета в проект.

Урок 8. Liquid, жидкая анимация

• Сделаем анимацию жидкого (liquid) соединения между 2 объектами на примере аватара и динамического остова из настроек Telegram, где при скролле аватар соединяется с системным элементом на экране. Разберем 3 способа как это сделать.

Урок 9. Мастер-класс. Повторяем анимации динамического острова (Dynamic Island)

• Ничего нового, все приемы показаны в предыдущих уроках, просто челлендж, в котором я показываю полный процесс создания анимаций из динамического острова, сталкиваясь со множеством ошибок и трудностей.
• Единственное реально новое здесь — это эффект Echo, который позволяет делать следы анимации, его я применяю в последней анимации вращения зеленых колец и галочки.

Урок 10. Стикеры для Telegram, экспорт кода JSON

• Импортируем анимированный стикер из Telegram в проект, обычный и «проблемный», с помощью плагина Bodymovin. Установим плагины Bodymovin и Bodymovin for Telegram.
• Откроем анимацию в Lottie и посмотрим варианты импорта из него в After Effects.
• Создадим свой анимированный стикер для Telegram. Экспортируем его в JSON-код (один плагин Bodymovin экспортирует для Lottie, другой сразу для Telegram).

• Формат
  Самостоятельно с наставником
  Видеоуроки
  Обучение в ЛК на GetCourse
• Количество уроков
  10
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Сопровождение
  Куратором
• Общение с группой
  Чат в Telegram
• Техническая поддержка
  В рабочее времяЧат внутри ЛК
• Срок доступа к материалам
  1 год с момента оплаты курса