Анимация интерфейсов в After Effects

В этом модуле вы разберётесь, что такое веб-анимация, её роль в интерфейсах, задачи (привлечение внимания, навигация, обратная связь) и когда она нужна.

Узнаете о двух типах анимаций: трансформациях и переходах. Освоите принципы плавного, лёгкого движения и приёмы к избежанию, как избыточные эффекты. Посмотрите примеры действий вроде hover и загрузок.

Настроите среду: установите программы, выберите тариф, получите плагины AEUX и Motion Tool. Познакомитесь с интерфейсом After Effects для практики.

В этом уроке вы изучите базовую и самую популярную анимацию — появление элементов, разберётесь с ключевым свойством Opacity и научитесь им управлять, чтобы создавать плавные эффекты. Получите пошаговую инструкцию по созданию такой анимации от начала до конца, познакомитесь с понятием рендеринга и его ролью в финализации проекта.

Освоите функцию Track Matte и её основное свойство Alpha Matte (альфа-маска) для маскировки и композиции. На практике создадите шот с красивой и плавной анимацией появления, применяя все эти навыки.

В этом модуле вы разберётесь с комбинацией анимаций появления и движения. Изучите новый тип — анимацию движения, используя Position для положения объектов и Anchor Point для контроля. На практике создадите шот, сочетая типы для впечатляющего результата.

В этом уроке вы подробно изучите скрипт Motion Tools, оценив его удобство на практике: он ускоряет работу и повышает точность анимации. Узнаете о графике скорости (Speed Graph), Easing и кривых Безье, влияющих на движение объектов. На практике настроите анимацию с помощью Motion Tools для оптимизации процесса.

В этом уроке вы узнаете, как эффектно анимировать появление фотографий с помощью масштабирования: изучите свойство Scale для изменения размеров объектов, освоите совместное масштабирование Alpha Matte и изображения внутри неё, и объедините всё с анимацией появления через Opacity для плавного и впечатляющего эффекта.

В этом уроке вы разберётесь с эффектом параллакс для интерфейсов: используйте три элемента дизайна и свойство Position, чтобы создать глубину, освоите анимацию обратного хода для зацикливания и научитесь делать шоты с впечатляющим ощущением объёма.

В этом уроке вы объедините изученные анимации — Opacity, Position, Scale, Alpha Matte и Параллакс — с новым типом: появлением заголовка в области маски. На практике создадите сложные сцены с плавными переходами, комбинируя все техники для впечатляющих композиций.

В этом уроке вы познакомитесь с адаптивной анимацией для разных версий макетов: на практике анимируете плавный переход с десктопной версии сайта на мобильную, используя свойства Position, Scale, Opacity и Motion Tools 2/Clone, чтобы правильно демонстрировать адаптивные интерфейсы через динамичные эффекты.

В этом уроке вы изучите простую, но выразительную анимацию вращения: разберётесь с параметром Rotation, включая количество оборотов, градусы и направление по часовой стрелке или против, и на практике создадите повторяющиеся циклы для плавного и аккуратного движения объектов.

В этом уроке вы познакомитесь с циклом из трёх уроков по альтернативным переходам между сценами: изучите более интересные варианты, используя уже знакомые действия, и на практике освоите три типа — смену маской, смену шторкой и смену слайдом — для плавных и динамичных переходов.

В этом уроке вы освоите работу с параметром слоя Color: научитесь создавать простые анимации для демонстрации hover-эффектов кнопок и ссылок, а также разберёте более интересные способы применения анимации цвета для яркой презентации проектов.

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

В этом уроке вы начнёте цикл из трёх уроков по декоративной анимации текста: научитесь создавать эффект Glitch, имитирующий «битое» изображение или телевизионные помехи, и узнаете, как делать его модным и эффектным без лишней сложности.

В этом уроке вы изучите два новых параметра Track Matte — Luma Matte и Luma Inverted Matte: научитесь применять их для создания эффектных переходов и масок в проектах, а затем используйте полученные знания на практике для оформления интерфейсных шотов.

В этом уроке вы познакомитесь с инструментом Turbulent Displace из раздела Distort: научитесь создавать лёгкие сдвиги пикселей для эффекта волны или движения на фотографиях и разберёте практическое применение этого эффекта в интерфейсах и презентациях.

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

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

В этом уроке вы разберёте требования к анимации для публикации на Behance, научитесь вставлять видео анимации в проект с помощью кода и узнаете, как сделать презентацию проекта более живой и динамичной.

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