Анимация интерфейсов с нуля

Name: Анимация интерфейсов с нуля
Price: 7074 RUB
Availability: PreOrder

6 участников

О чём курс

Авторский курс Дениса Абдуллина об анимации интерфейсов в After Effects. В курсе создают UI-анимации и готовят их к презентации и передаче в разработку.

Зачем изучать анимацию интерфейсов

Создавать эмоциональный UI с микровзаимодействиями.
Презентовать решения заказчикам, разработчикам и пользователям.
Усилить портфолио и выделить кейсы среди работ других дизайнеров.
Передавать анимации в разработку: Lottie, Telegram-стикеры.

Работа в After Effects

В After Effects можно настраивать движения с точностью до миллисекунд, работать с кривыми, таймингами, слоями и камерами. Программа позволяет прорабатывать каждый кадр и накладывать эффекты поверх всей сцены; в Figma и Rive такой возможности нет.

В After Effects есть motion blur, glow, размытия, свет, эффекты, 3D, частицы, морфинг, работа с камерой и сложные кривые. Figma, Rive и Principle используются для прототипов и простых анимаций.

С помощью плагина Bodymovin анимацию можно экспортировать в Lottie и Telegram. Разработчики могут использовать JSON для интеграции в мобильные или веб-приложения.

After Effects используют в продуктах Apple, Airbnb, Google, Microsoft и Telegram, а также в студиях Cuberto, Tubik Studio, Zajno и Ueno.

Автор

Денис Абдуллин — дизайнер интерфейсов с 10-летним опытом. За семь лет участия в конкурсах Telegram он освоил приёмы анимации, которыми делится в курсе.

Программа обучения

Урок 1. Знакомство с интерфейсом After Effects, ключи и скорость анимации, подготовка анимации жестов Продолжительность 1 час 5 минут
- Посмотрим на основные принципы работы в программе After Effects, сделаем композиции, посмотрим основные инструменты и параметры, применим горячие клавиши.
- Поменяем график скорости анимации (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).

Складчина создана 7 ноября 2026 г.

Запишитесь бесплатно — цена упадёт для всех

У автора этот материал стоит 35 900 ₽. В складчине сумму делят на всех: чем больше участников, тем меньше взнос каждого.

1 Оставляете email
Без оплаты и без карты. Пришлём, как занять место в складчине на нашем основном сайте.
2 Складчина набирает людей
Сейчас 6 участников и взнос 7 074 ₽. Ещё 56 человек — и он опустится до 690 ₽.
3 Открывается сбор
Присылаем итоговую цену. Устроит — платите и получаете материалы. Нет — просто не платите.

21 222 ₽ 2 уч.
14 148 ₽ 3 уч.
7 074 ₽ 6 уч. сейчас
690 ₽ 62 уч. цель

Запись ни к чему не обязывает: платите, только если итоговый взнос вас устроит.

Теги курса

Отзывов пока нет. Будьте первым!

Как получить курс?

Влада Администратор сайта

Этот курс сейчас в процессе организации складчины. Нажмите кнопку «Записаться» и ожидайте старта — вам придёт уведомление. Когда складчина стартует, в карточке курса будет указан актуальный взнос. Текущая цена пока в процессе формирования и может отличаться от финальной.

Финальный взнос будет ниже, чем 35 900 ₽?

Влада Администратор сайта

Да, мы стремимся, чтобы финальный взнос был не больше ≈10% от оригинальной цены курса. Чем больше участников записывается в складчину, тем ниже выходит взнос для каждого.

Как я могу ускорить сбор складчины и уменьшить взнос?

Влада Администратор сайта

Нажмите кнопку «Записаться» и авторизуйтесь на сайте через email (через ту же почту, которую будете использовать для входа). В личном кабинете вас будут ждать инструкции, как пригласить других участников — чем больше людей записалось, тем быстрее стартует складчина и тем ниже взнос. Как только складчина готова к приобретению, вам придёт уведомление.