Как сделать исчезновение текста в after effects
Обновлено: 06.07.2024
В начале года отдел дизайна Noveo практически полным составом прошел онлайн-курс по Adobe After Effects и основам анимации. Senior Designer и Team Lead отдела дизайна Зарина рассказывает (и показывает), чему мы научились на курсе.
Как и любой курс по инструменту, мы начали с основ, интерфейса программы и основных принципов анимации.
Принципы анимации
Принцип сжатия и растяжения создает иллюзию веса и эластичности формы. Например, прыгающий мяч будет сжиматься, ударяясь о землю.
Принцип дуги говорит о том, что в природе все объекты движутся по параболическим траекториям, поэтому нужно использовать этот принцип для достижения эффекта естественности движений.
Шейповая анимация
Следующей была тема шейповых слоев. Несмотря на возможность создавать шейпы в After Effects, иллюстраторы предпочитают делать это в более гибких и мощных инструментах, таких как Adobe Illustrator или Adobe Photoshop. Импорт из этих программ позволяет сохранить некоторые свойства шейповых слоев (градиенты и прозрачность не сохраняются) и информацию о точках (их координаты) и продолжить работать с ними в After Effects, добавляя анимацию. Например, изменить форму векторного слоя можно, передвинув точки, а After Effects достроит плавное изменение формы в промежуточных кадрах. Для закрепления навыков мы взяли несложную иллюстрацию, подготовили в Adobe Illustrator слои, необходимые для анимации, и после экспорта добавили движения некоторым объектам:
- добавили анимацию по Position луне, сияние луны сделали с помощью анимации Scale, зациклили расширение слоев в Expressions при помощи функции Loopout и Cycle;
- чтобы задать движение дыму, пустили круглые шейповые слои по анимированному пути и настроили для них эффекты Gaussian Blur и Simple Choker;
- для движения лодки сделали анимацию пути по дуге и добавили покачивание с помощью анимации параметра Rotate.
В результате статичная картинка ожила.
Анимация текста и кинетическая типографика
Создание титров
Анимация при помощи Puppet position pin tool
Часто, чтобы заанимировать несложные движения персонажей, применяется анимация при помощи Puppet pin tool. В ключевых точках расставляются пины, которые, как булавки, фиксируют части изображения. И передвигая эти булавки, можно заставить двигаться фигуру персонажа. Манипулировать этими пинами не всегда легкая задача, поэтому их привязывают к Null objects и анимируют параметры Position и Rotation нулевого объекта. Чтобы заанимировать, например, движение руки персонажа, необходимо сначала привязать части руки друг к другу и саму руку к телу. Тогда при повороте руки в локте остальная часть руки с кистью повернется следом. Кроме движения персонажей этот прием можно применять для оживления листвы, кустов или деревьев.
Анимация при помощи плагина Joysticks’n’Sliders
Трекинг камеры
Кроме того, если отслеживание сделано по 4 точкам, можно вписать другой заанимированный объект в границы этих точек. Именно таким способом мы сделали к 1 апреля шуточное видео про дорожные знаки, которые немного сошли с ума.
Паралакс
Анимация интерфейсов
Эта тема нас интересовала, пожалуй, больше всех, так как с ней мы сталкиваемся в процессе своей профессиональной деятельности. Чтобы создавать презентации возможных анимаций интерфейсов, прежде всего надо быть знакомым с концепцией Google Material design, ведь там подробно описано, как должны вести себя элементы интерфейсов. Средствами Adobe After Effects можно показать, какие микровзаимодействия, переходы и анимации могут быть применены в приложении, как это повлияет на общее восприятие приложения. Чтобы оживить приложение, нужно в первую очередь подготовить файл с элементами интерфейса в Adobe Illustrator, затем импортировать его со всеми необходимыми слоями в программу After Effect и там настроить переходы и анимации средствами программы. Обычно анимируются такие параметры, как opacity, position и scale. С их помощью можно показать, как разворачиваются и открываются элементы, как приложение реагирует на взаимодействие с пользователем, как происходит переход между экранами и многое другое.
Еще одним заданием было вписать заанимированный интерфейс в фото или видео. Для этого нам опять пришлось обратиться к трекингу, цветокоррекции и инструментам деформации.
Итак, на этом суперинтересном и полезном курсе мы освоили множество мощных инструментов, узнали принципы моушен-графики и анимации, выполнили много сложных, но интересных заданий и уже вовсю применяем полученные знания в нашей повседневной работе!
Анимации выполнены дизайнерами Noveo Зариной и Людмилой.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Читайте также: