Анимация автомобиля after effects

Автомобили

Как сделать анимацию для сайта в After Effects — на примере бургер-меню

Дизайнеру непросто решиться на освоение новой программы. Покажем, как сделать первый шаг в After Effects и получить результат.

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

В этом уроке создадим анимацию иконки бургер-меню и узнаем основные принципы работы в After Effects.

Сначала познакомимся с рабочим пространством программы.

Adobe After Effects очень похож на Adobe Photoshop. Такая же работа со слоями, фильтрами, эффектами и так далее. Если вы работали в Photoshop, вам будет несложно освоить и After Effects.

Отличительная особенность After Effects — большое количество всевозможных плагинов, платных и бесплатных. Еще одна особенность — работа со скриптами. Если вы умеете программировать, пишете скрипты или плагины, вам не составит труда использовать всю мощь After Effects. Но даже если вы программист только в душе, не расстраивайтесь, можете воспользоваться готовыми скриптами.

А теперь давайте приступим к созданию анимированной иконки бургер-меню.

Создание проекта

Создайте новую композицию.

Укажите разрешение композиции, я поставил 1280х1280. Количество кадров установил 30. Продолжительность 10 секунд.

Создайте новый слой на панели слоев. Для этого правой кнопкой мыши откройте контекстное меню и выберете пункт New — Solid. Solid — это тип слоя, залитый сплошным цветом.

Установите параметры, указанные на скриншоте, цвет можете выбрать любой или выбранный для урока — #3D5272.

Создание иконки

Основа готова. Перейдем непосредственно к иконке бургер-меню.

Создайте прямоугольник со скругленными углами — Rounded Rectangle Tool. Найти его можно на панели инструментов.

Примерно такого размера. Он сразу отобразится у вас на панели слоев.

Необходимо разместить этот элемент по центру. Перейдите на панель Align, как показано на скриншоте, и выберите горизонтальное и вертикальное выравнивание.

Чтобы скруглить края, раскройте свойства слоя в панели слоев Contents — Rectangle 1 — Rectangle Path 1 — Roundness и выставите значение 100.

Anchor Point

Anchor Point — это опорная точка объекта, поворот (Rotation) и масштабирование (Scale) выполняются вокруг этой точки. При создании шейпового слоя ( Shape Layers — фигурные слои, для анимации векторной графики) по умолчанию Anchor Point располагается в центре слоя и имеет нулевые координаты X, Y, но будьте внимательны и всегда проверяйте расположение Anchor Point. Если точка находится за пределами объекта, расположите ее по центру.

Для этого выделите слой с прямоугольником и нажмите на инструмент Anchor Point, затем мышкой передвиньте эту точку в центр прямоугольника, вот так:

Для чего все это нужно? Покажу на примере. Я разместил два прямоугольника на одной плоскости, у одного прямоугольника Anchor Point расположен по центру, у другого чуть ниже.

Теперь повернем прямоугольники на 360°.

Думаю, разница очевидна.

Вернемся к созданию нашей иконки. Перейдите в панель слоев, выделите прямоугольник и нажмите два раза на Ctrl+D, тем самым вы создадите две копии этого прямоугольника.

Сдвиньте прямоугольники таким образом, чтобы получилось бургер-меню. Как вариант, зажмите Shift и стрелками вверх и вниз сместите прямоугольники, как показано на скриншоте.

Свойства слоя — Position и Rotation

В панели слоев выделите верхний прямоугольник и выберите два свойства слоя: Position и Rotate. Эти свойства мы задействуем в анимации. Повернем и переместим необходимые элементы. Чтобы выбрать именно эти свойства, зажмите Shift, затем, не отпуская, нажмите P, потом R. Должно получиться так:

Создание анимации иконки

Вот мы и подошли к самому интересному — анимации. Перейдите на панель Timeline, это та, что справа от панели слоев. Переместите индикатор текущего времени на одну секунду, как показано на скриншоте. Теперь на панели слоев в свойствах Position и Rotation нажмите на иконку секундомера. На панели Timeline у вас появятся два ромбика — это ключевые кадры анимации.

На панели Timeline переместите индикатор, как показано на скриншоте. Теперь создайте ключевой кадр — нажмите на иконку ромбика слева от иконки секундомера свойства Rotation на панели слоев. Поставьте этому свойству значение 45°.

Кликните мышкой на свойстве Position верхнего прямоугольника и передвиньте его, как показано на скрине.

Подвигайте индикатор текущего времени между ключевыми кадрами, чтобы посмотреть на результат. Должно получиться так:

Для того, чтобы просмотреть результат анимации в процессе работы, можно нажать пробел или подвигать индикатор текущего времени на панели Timeline.

Если вам необходимо просмотреть результат конкретной части анимации в зацикленном виде, можно задействовать маркеры рабочей области для ограничения анимации.

Переместите маркеры рабочей области так, чтобы осталась нужная часть.

Далее повторите все действия с нижним прямоугольником. Единственное отличие — в свойстве Rotation вместо 45° нужно поставить –45°.

Активируйте свойства слоя нижнего прямоугольника — зажмите Shift, затем поочередно P и R для отображения свойств слоев Position и Rotation. На панели Timeline переместите индикатор на первую секунду. Кликните на иконки секундомеров, тем самым создав ключевые кадры для свойств слоев Position и Rotation.

Переместите индикатор и создайте новые ключевые кадры, как на скриншоте, для свойства Rotation задайте значение –45°. Находясь на свойстве Position, переместите прямоугольник к центру двух других прямоугольников.

Читайте также:  Виды гаражей для автомобиля на даче

Вот что должно получиться:

Теперь нам необходимо избавиться от среднего прямоугольника. Можно сделать анимацию прозрачности от 100% до 0%.

Выделите слой среднего прямоугольника и нажмите T, вы увидите свойство Opacity. Создайте ключевые кадры, для первого задайте значение прозрачности 100%, для второго 0%.

Сделаем так чтобы крестик превращался обратно в бургер. Чтобы это реализовать, используем Time-Reverse Keyframes — воспроизведение ключевых кадров в обратном направлении.

Выберите верхний прямоугольник и на панели Timeline выделите ключевые кадры свойств Position и Rotation, нажмите Ctrl + C. Затем переместите индикатор, как показано на скриншоте, и нажмите Ctrl + V. Тем самым вы скопировали ключевые кадры и свойства этого элемента. Но ключевые кадры еще раз продублируют анимацию от бургер-меню к элементу закрытия. Нам нужно ровно наоборот, чтобы элемент закрытия превращался обратно в бургер-меню.

Для этого, не снимая выделения со скопированных ключевых кадров, нажмите правой кнопкой мыши, в контекстном меню выберите Keyframe Assistant — Time-Reverse Keyframes. Наши ключевые кадры развернулись в нужном направлении от элемента закрытия к бургер-меню.

Повторите те же действия для оставшихся двух прямоугольников.

Что у вас должно получиться:

Очень неплохо, и если бы мы не были крутыми UI- и моушн-дизайнерами, то мы бы сказали: круто, в продакшн. Но мы так не скажем, потому что умеем замечать детали и знаем, как сделать еще лучше.

Улучшение анимации, добавление микроанимации

Так что же тут не так? Давайте подумаем. Все верно — прямолинейно, избито, неинтересно. Попробуем поработать с этим и сделать хорошо. На самом деле допиливать и дорабатывать анимацию можно до бесконечности, все зависит от ваших знаний, умений и желаний.

Я выберу три приема которые помогут улучшить анимацию: добавлю разворот на 180°, микроанимацию и Easy Ease. «Сглаживание анимации» (Easy Ease) — это одна из тех особенностей, за которую так любят After Effects.

Для того, чтобы развернуть все прямоугольники на 180° в процессе анимации, не обойтись без Null Object. Это слой без видимых свойств, но он умеет все, что умеют обычные слои. В нашем примере мы используем его, чтобы связать с иконкой и назначить свойство вращения на 180°. Создать новый слой с Null Object можно так:

Привяжите все наши прямоугольники к слою Null Object. Сделать это можно двумя способами:

1. Кликните курсором мыши на значке спирали в столбце Parent панели слоев и, удерживая, перетащите на слой Null Object. Так нужно сделать с каждым слоем, который мы хотим привязать.

2. Выбрать в выпадающем списке столбца Parent панели слоев — Null Object.

Выделите слой Null Object, в моем случае слой называется Null1. Выберите свойство Rotation этого слоя. Установите ключевые кадры, как показано на скрине, со значением 0° первого кадра и значением 180° второго кадра.

Продублируйте эти кадры и выберите Time-Reverse Keyframes, как показано на скриншоте.

Посмотрим, что получилось:

Теперь продублируйте ключевой кадр свойства Rotation верхнего прямоугольника, как показано на скрине.

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

Укажите значение Rotation 53°.

Плавность анимации, Easy Ease

Поработаем над плавностью анимации. Выделите все ключевые кадры и нажмите F9 для того, чтобы мы могли корректировать график Easy Ease.

Ключевые кадры перестали быть ромбиками и превратились в значки похожие на песочные часы. Это значит что мы их перевели в режим Easy Ease.

Но перед тем как редактировать графики, продублируйте еще несколько кадров. Эти кадры добавляют микроанимацию на выходе. С ней бургер-иконка смотрится более живо и гармонично. Перейдите на слой Null1 скопируйте ключевой кадр, который находится на десятом кадре второй секунды, и вставьте его на 20-й кадр второй секунды. Значение свойства Rotation укажите 190°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation –45°. Вот так:

Перейдите на слой Null1, скопируйте ключевой кадр, который находится на десятом кадре третьей секунды, и вставьте его на 20-й кадр третьей секунды. Значение свойства Rotation укажите 0°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation 0°. Вот так:

Выделите три ключевых кадра, как показано ниже, и нажмите на иконку графика Easy Ease, он также указан на скрине.

Теперь настройте кривую, как показано ниже, пользуясь желтыми манипуляторами точек.

Пример настройки графика:

То же самое проделайте для нижнего прямоугольника.

График нижнего прямоугольника.

Результат

Давайте посмотрим, что получилось в итоге.

В следующем уроке сделаем небольшую анимацию прелоадера с применением несложных скриптов.

Знание анимации — большой плюс для дизайнера. На курсах Skillbox рассказывают, как анимировать интерфейсы, создавать микровзаимодействия, делать пользовательский опыт «плавным». Вы освоите новые редакторы и приемы, углубите знания во многих областях, повысите свою ценность как специалист.

Источник

Анимация интерфейса в After Effects: пошаговое руководство по созданию полноэкранного слайдера

Подробно рассказываем, как сделать анимацию в After Effects на примере эффектного полноэкранного слайдера.

Специально для руководства я разработал вот такой макет, который мы и будем анимировать.

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.

Подготовка проекта

Создание проекта

Начните с создания проекта и композиции: File — New — New Project.

Затем выберите New Composition.

Перед вами появился экран настроек, теперь можно задать нужные параметры. Frame Rate — это количество кадров в секунду, отвечает за плавность анимации: чем выше значение, тем плавнее. Duration — продолжительность анимации. Вы можете менять то и другое в процессе работы.

Читайте также:  Восстановление панели автомобиля после срабатывания подушек

Назовите композицию Animations. После создания композиции добавьте новый слой. Щелкните правой кнопкой мыши по панели слоев и выберите New — Solid, цвет белый.

Перенос макета

Если вы сделали макет в Photoshop, он хорошо структурирован и разбит по папкам, воспользуйтесь импортом для быстрого переноса: File — Import — File.

Если пользуетесь Figma, лучше переносите макет поэлементно. Во-первых, у программы нет связки с After Effects. Во-вторых, так вы с меньшей вероятностью запутаетесь в слоях. В-третьих, лучше будете контролировать элементы.

Перед тем, как вы начнете формировать композицию в After Effects, подставьте фоном изображение макета: так будет удобнее выравнивать элементы.

Для этого выделите Frame в Figma и экспортируйте его в формате PNG.

Теперь импортируйте этот файл в After Effects. Сделать это можно тремя способами:

Перенесите только что импортированный файл на панель слоев, в примере он называется bg1.png.

Уменьшите прозрачность этого слоя и нажмите иконку замочка, чтобы он случайно не сместился при дальнейшей работе.

Теперь можно приступать к переносу элементов. Это легко: экспортируйте все изображения из Figma в формате PNG, а текст наберите в самом After Effects.

Импортируйте в After Effects подготовленные изображения из Figma любым удобным способом, после чего перенесите их на панель слоев.

Должно получиться так:

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

Добавьте буллеты навигации слайдера и текстовые элементы — они находятся справа на большом изображении. Выберите на панели инструментов Ellipse Tool и нарисуйте кружок как на макете, цвет #F21356.

Продублируйте слой 8 раз, для этого зажмите Ctrl+D.

Теперь перенесите восьмой слой bullet-навигации на соответствующее ему место на макете. И примените выравнивание, как показано ниже.

Навигация на месте, пора реализовать надписи. Посмотрите параметры текста в Figma и примените их в After Effects. Например, надпись I kill giants имеет такие параметры: 24 кегль, стиль Uppercase, Bold, цвет #F21356.

В After Effects на панели инструментов выберите Text, нажмите мышкой на рабочую область и наберите I kill giants. Разместите текст точно по макету. Не забудьте, что шрифт должен быть установлен на вашем устройстве локально. В Figma есть стандартная интеграция с Google Fonts, что очень удобно. Если шрифта не окажется в After Effects, его всегда можно скачать и установить отдельно.

Результат переноса элементов правого блока макета:

По такому же принципу перенесите левую часть.

Макет первого слайда готов. Выделите все элементы этой композиции, нажмите правой кнопкой мыши на любой выделенный слой и в контекстном меню выберите pre-compose. Назовите композицию I kill giants.

Перенесите все элементы второго слайда из Figma и также создайте pre-compose. Композицию назовите T omb raider.

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

Чтобы вы не запутались в структуре проекта, давайте сверимся. У вас должно получиться так: композиция Animations, в ней слой заливки White Solid и две композиции — I kill giants и Tomb Raider.

Теперь переходим к основной части нашего урока — непосредственно к анимации.

Создание анимации

Анимация изображений

Выберите композицию первого слайда I kill giants и перейдите в нее. Чтобы было удобно работать, оставьте только изображение правого блока, а остальные слои спрячьте.

Выделите слой с изображением и нажмите клавишу P, чтобы активировать свойство Position. Переместите индикатор текущего времени на панели Timeline на одну секунду и нажмите иконку секундомера, чтобы выставить keyframe (ключевой кадр). Затем вернитесь на нулевой кадр и сместите изображение вправо за пределы рабочей области.

Выделите эти ключевые кадры и нажмите F9 (Easy Ease — сглаживание анимации). Перейдите в Graph Editor.

Настройте график так, чтобы изображение замедлялось к концу анимации, как показано ниже:

Проверьте, что получилось:

Анимация на основе масок

Большинство анимаций в этом уроке будет выполнено с использованием масок. В их основе обычно лежит Shape (Фигура) — она ограничивает объект своими границами, которыми можно гибко управлять. Маски имеют следующие свойства:

Чтобы добавить маску, выберите на панели инструментов Rectangle Tool. Не снимая выделение со слоя, нарисуйте прямоугольник чуть больше вашего изображения.

Выберите Mask Path в свойствах слоя и перейдите на вторую секунду. Поставьте там ключевой кадр, нажав на икону секундомера слева от названия. Вернитесь на нулевую секунду, выделите у маски два нижних манипулятора и передвиньте их вправо.

Выделите ключевые кадры и нажмите F9, настройте график Easy Ease, как и в предыдущем случае. Посмотрите результат:

Далее поработаем с появлением дополнительных кадров фильма. Сделайте видимыми ранее скрытые 4 изображения левой части макета.

Выберите эти изображения и создайте для них pre-compose, чтобы было удобнее работать, назовите композицию Extra frames. Перейдите в нее.

Для этих четырех изображений мы применим маски и горизонтальное движение справа налево с использованием Easy Ease, как делали это для большого слайда. Я еще раз подробно разберу технику на примере одного изображения, оставшиеся три делаются аналогично.

Выберите нижний слой, нажмите P, чтобы активировать свойство слоя Position. Перейдите на первый кадр и поставьте keyframe, вернитесь на нулевой кадр и сдвиньте изображение вправо. Выделите ключевые кадры и нажмите F9 Easy Ease. Результат без маски:

Выберите Rectangle Tool на панели инструментов и создайте маску как на скриншоте:

Для свойства Mask Path создайте ключевые кадры и расположите маску так, чтобы она раскрывалась, как показано ниже. Можете поэкспериментировать: перемещайте манипуляторы формы маски, как считаете нужным, или повторите, как сделал я.

Читайте также:  Где нужно снимать автомобиль с учета

Повторите те же шаги для остальных изображений. Не забывайте смещать ключевые кадры последующего изображения так, чтобы они проигрывались друг за другом, а не все одновременно.

Теперь займемся текстом и навигацией.

Анимация текста

Перейдите в композицию I kill giants, выделите весь текст в левой части макета и создайте pre-compose этих слоев. Назовите композицию Text left side и перейдите в нее.

Выделите слой с названием фильма и на панели Effects & Presets выберите Animation Presets — Text — Animate In — Slow Fade On.

Примените этот эффект к текстовому слою. Посмотрите, что получилось.

Для текстового слоя imdb: 6.20 я применил эффект Decoder Fade In. Он находится там же: Animation Presets — Text — Animate In — Decoder Fade In.

Поэкспериментировал с дескриптором и навигацией переключения слайдов. Получилось вот так:

Промежуточный результат общей композиции:

Настройка навигации

Теперь нужно добавить навигацию слайдера, меню-бургер и логотип. Перейдите в композицию I kill giants. Выберите слои буллетов слайдера, название фильма и порядковый номер слайда, а также их общее число. Объедините все слои в композицию Slider navigation.

Объедините логотип и меню-бургер в другую композицию, назовите ее Logo. Выделите слой композиции Slider navigation, но пока не открывайте ее. Сдвиньте весь слой на панели Timeline:

Это нужно для того, чтобы анимация слоя выполнялась не с первого кадра, а немного с опозданием.

Анимируйте цифры и название фильма масками — вы уже знаете, как это сделать.

Добавьте буллеты слайдера, чтобы они, например, появлялись одновременно с надписями и чуть-чуть выезжали справа. Это можно реализовать обычным позиционированием и прозрачностью.

Выберите композицию Bullets, которая, в свою очередь, находится в композиции Slider navigation.

Нажмите P и Shift+T для выбора свойств слоя — Position и Opacity. Перейдите на первую секунду на панели Timeline и поставьте там ключевые кадры. Вернитесь на нулевой кадр и так же поставьте ключевые кадры. Для Opacity значение 0, для Position сместите композицию чуть правее. Выделите все ключевые кадры и нажмите F9 Easy Ease. Должно получиться так:

Из основных элементов незаанимированными остались логотип и меню-бургер.

Для бургера не станем делать анимацию при появлении, вместо этого сделаем анимацию по клику. Как это сделать, читайте тут.

Логотип можно анимировать масками. Например, так:

Он будет появляться при загрузке первого слайда.

Чтобы картинка не выбивалась из стиля, я убрал текстовый эффект с заголовка под логотипом и применил анимацию маски.

Все элементы собраны. Давайте еще раз посмотрим на весь макет. Перейдите в композицию Animations и протестируйте анимацию.

Отлично! Первый этап работы над главным экраном закончен. Переходим к следующему этапу. Мы сделаем:

Создание и анимация курсора

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

Перейдите в композицию Animations, выберите на панели инструментов Ellipse Tool и нарисуйте круг примерно 60 px. Обводку поставьте 10 px, цвет белый, цвет заливки #799CC4, прозрачность заливки 40%.

Так как курсор всего 60 px, при достаточном приближении будут видны крупные пиксели. Я сильно масштабировал курсор, чтобы его было хорошо видно.

Теперь нужно переместить его на второй буллет навигации слайдера.

Создайте симуляцию нажатия для просмотра второго слайда.

Перейдите на слой с курсором и сдвиньте его на панели Timeline на третью секунду:

Нажмите P для выбора свойства Position и поставьте ключевой кадр на четвертую секунду. Вернитесь на третью секунду и переместите курсор так, чтобы он оказался над буллетом навигации.

Теперь нужно создать симуляцию нажатия: три ключевых кадра и свойство Scale (клавиша S на клавиатуре). Первый и последний кадр — Scale 100%, промежуточный кадр Scale 60%.

Перейдите в композицию Animations и посмотрите на результат.

С этим разобрались, переходим к смене главного слайда — остальные делаются аналогично.

Анимация второго слайда

Выберите композицию Tomb raider, которая находится в композиции Animations на панели слоев. Переместите слой композиции на четвертую секунду седьмого кадра.

Перейдите в композицию и сделайте pre-compose всех слоев по принципу композиции I kill giants. Чтобы не запутаться, дайте композициям другие названия: можно использовать префикс или нумеровать.

Объедините весь текст в блоке слева, логотип и меню, навигацию слайдера и дополнительные изображения. Если возникнут трудности, просто перейдите в композицию I kill giants и посмотрите, как сделано там, или вернитесь к началу руководства.

Теперь давайте поменяем слайд с монстрами на Лару Крофт.

По сути, вся работа по замене контента сводится к копированию и сопоставлению кадров плюс нужно синхронизовать ключевые кадры на панели Timeline.

Перейдите в композицию I kill giants и выберите слой с большим слайдом. Раскройте свойства слоя, выделите и скопируйте все ключевые кадры, переместитесь на четвертую секунду десятого кадра панели Timeline — и вставьте эти кадры.

Выделите перенесенные кадры и нажмите правой кнопкой мыши на любой из них. В контекстном меню выберите Keyframe Assistant — Time-Reverse Keyframes (воспроизведение ключевых кадров в обратном направлении).

Сначала появляется слайд I kill giants, затем вы нажимаете курсором буллет навигации, слайд сворачивается и на его месте разворачивается слайд Лары Крофт — происходит это практически одновременно.

Перейдите в композицию Tomb raider, выберите слой Lara Croft, раскройте свойства слоя и вставьте кадры, которые вы скопировали в слое предыдущей композиции.

Это нужно для того, чтобы заново не настраивать маску и позицию — вы берете готовые настройки.

Давайте посмотрим, что получилось:

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

Чек-лист для копирования настроек анимации с одного слайда на другой:

Источник

Оцените статью
Популярные рекомендации экспертов