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

​ Зачем изучать анимацию Делать живой эмоциональный UI с микровзаимодействиями Презентовать решения заказчикам, разработчикам и пользователям Усилить своё портфолио: сильно выделить кейсы среди других дизайнеров Передавать анимации в разработку: Lottie, Telegram-стикеры Поменяем график скорости анимации (easing, изинг) вручную и с помощью стороннего плагина Flow (установим этот плагин). Сделаем анимацию жестов (tap, swipe, long tap, zoom/pinch): простое движение кругляшков в пространстве и изменение масштаба. Эти жесты потом будем использовать в презентации интерфейса. Урок 2. Скролл и Pull-to-refresh. Продолжительность 1 час 25 минут Сохраним ассеты из Figma, воссоздадим макет в проекте After Effects без плагинов. Применим все основные простые параметры: Position (P), Rotation (R), Scale (S), Opacity (T). Сделаем анимацию загрузки, применив свойство Trim Path для анимации обводки. Отдельно сделаем анимацию скролла всего экрана. Соединим 2 анимации в одну. Урок 3. Счетчики, таймеры, зависимости, морфинг, последовательность. Продолжительность 2 часа 42 минуты Будем применять код/выражения (expressions) для создания зависимостей и таймеров. Построим зависимости параметров друг от друга на примере стрелок часов. Сделаем простой счётчик последовательности цифр, и сложный анимированный счётчик с анимацией каждого числа по-отдельности. Попробуем сделать морфинг объектов на примере трансформации значка паузы в значок воспроизведения и волноформы. Рассмотрим применение анимации без анимации (отсутствие анимации между ключами, график hold). Сделаем последовательность, сделав одинаковую анимацию для всех виджетов на экране и расставив их на таймлайне последовательно автоматически. Урок 4. Сохранение и рендеринг анимации. Продолжительность 18 минут Сохраним сделанную анимацию в видео в формате MP4 с помощью внутреннего способа в After Effects и отдельно с помощью программы Media Encoder, которая делает это более качественно. Сохраним все кадры анимации и с помощь Photoshop сохраним анимацию в формате GIF. Урок 5. Маски и мокапы. Продолжительность 55 минут Разберём и применим 4 способа создания маски. Создадим реалистичные мокапы Apple iPhone и Apple Watch и мокапы в стиле Telegram с применением 3D, сделаем анимацию поворота мокапа, применим созданные в первом уроке жесты и добавим эффект размытия для них. Урок 6. 3D-иконки. Продолжительность 30 минут Превратим плоские иконки из Figma в объёмные 3D-иконки на примере доски наград по аналогии со стандартным приложением Фитнес в iPhone. Посмотрим возможности работы в 3D-пространстве: покрутим свет и материал, добавим hdri-карту, настроим камеру для избавления от перспективы (чтобы показать иконки в изометрии без перспективных искажений). Урок 7. Комплексная анимация, приложение аренды авто. Продолжительность 1 час 26 минут Применим всё основное в реалистичном проекте на примере приложения аренды авто, но на этот раз углубимся в применение этих параметров. Используем увеличение (scale) и изменение позиции (position) вместе для изменения масштаба карты, для счетчика добавим букву в конце, изменим путь движения маркера, применим эффект тени, вставим 3D-модель автомобиля скачанную из интернета в проект. Урок 8. Liquid, жидкая анимация. Продолжительность 56 минут Сделаем анимацию жидкого (liquid) соединения между 2 объектами на примере аватара и динамического остова из настроек Telegram, где при скролле аватар соединяется с системным элементом на экране. Разберём 3 способа как это сделать. Урок 9. Мастер-класс. Повторяем анимации динамического острова (Dynamic Island). Продолжительность 30 минут Ничего нового, все приёмы показаны в предыдущих уроках, просто челлендж, в котором я показываю полный процесс создания анимаций из динамического острова, сталкиваясь со множеством ошибок и трудностей. Единственное реально новое здесь – это эффект Echo, который позволяет делать следы анимации, его я применяю в последней анимации вращения зеленых колец и галочки. Урок 10. Стикеры для Telegram, экспорт кода JSON. Продолжительность 43 минуты Импортируем анимированный стикер из Telegram в проект, обычный и «проблемный», с помощью плагина Bodymovin. Установим плагины Bodymovin и Bodymovin for Telegram. Откроем анимацию в Lottie и посмотрим варианты импорта из него в After Effects. Создадим свой анимированный стикер для Telegram. Экспортируем его в JSON-код (один плагин Bodymovin экспортирует для Lottie, другой сразу для Telegram).