Моушен для интерфейсов
Анимация в интерфейсе объясняет, а не украшает: откуда взялся экран, что происходит прямо сейчас и услышал ли вас продукт. Разбираем тайминги и кривые, переходы и микровзаимодействия, минимум After Effects под задачу и передачу движения в разработку значениями, а не словами.
Что вы сможете делать
8 модулей, один проект
01 Зачем интерфейсу движение2 урока · 1 ч 28 минОткрыт
Начинаем с вопроса, на который анимация отвечает. И сразу с обратного случая: когда движение мешает и его нужно выключить.
02 Тайминг и кривые3 урока · 2 ч 16 мин
Главный модуль курса. Числа вместо ощущений: сколько длится движение, какая у него кривая и почему пружина иногда честнее easing.
03 Переходы между экранами2 урока · 1 ч 32 мин
Экран не должен появляться из ниоткуда. Связываем экраны общим элементом и выстраиваем порядок появления.
04 Микровзаимодействия3 урока · 2 ч 14 мин
Мелочи, которые складываются в ощущение качества: отклик за сотню миллисекунд, честное ожидание и понятная ошибка.
05 After Effects по делу3 урока · 2 ч 19 мин
Не курс по программе, а тот её минимум, которым делают интерфейсную анимацию: композиция, ключи, график скорости и шейпы.
06 Иконки и Lottie2 урока · 1 ч 31 мин
Анимированная иконка — самая частая задача. Делаем её из вектора и отдаём в формате, который поймёт разработчик.
07 Передача в разработку2 урока · 1 ч 29 мин
Ролик показать мало — движение нужно описать. Разбираем спецификацию и то, что браузер и приложение умеют сами, без файла анимации.
08 Проект2 урока · 1 ч 32 мин
Финальная работа: короткий ролик о продукте и оформленный кейс, в котором видно не только результат, но и логику движения.
Что вы получаете
Видео с таймкодами и текстовой версией: все значения длительностей и кривых есть текстом, их не нужно выписывать с экрана.
Готовые композиции на каждый разбор: можно открыть, покрутить ключи и увидеть, что меняет каждое значение.
Одностраничная шпаргалка: тип движения — длительность — кривая, с примерами, где какой вариант уместен.
Таблица передачи движения: элемент, свойство, значения, кривая, задержка — в виде, который принимают в работу.
Первый модуль открыт целиком
Посмотрите уроки первого модуля и первое задание. Если формат не подойдёт — вы ничего не потеряли.