Как сделать анимацию для сайта в After Effects — на примере бургер-меню
Дизайнеру непросто решиться на освоение новой программы. Покажем, как сделать первый шаг в After Effects и получить результат.
![](https://248006.selcdn.ru/main/iblock/a32/a326d82f8fef9e21a4078fa9a9f05686/013933addc83a1e80978bd4de91868de.jpg)
![](https://248006.selcdn.ru/main/iblock/a32/a326d82f8fef9e21a4078fa9a9f05686/013933addc83a1e80978bd4de91868de.jpg)
vlada_maestro / shutterstock
В предыдущей статье мы рассмотрели возможности After Effects и убедились, что эта программа многогранна и идеально подходит для демонстрации анимации интерфейсов, а также создания микроанимаций иконок.
В этом уроке создадим анимацию иконки бургер-меню и узнаем основные принципы работы в After Effects.
Сначала познакомимся с рабочим пространством программы.
![](https://248006.selcdn.ru/main/upload/setka_images/339d3ec82a9f8977c432760f8365a7d849adea5c.png)
- Project — панель проекта, здесь отображаются все рабочие файлы: картинки, видео, аудио.
- Composition — панель композиции, рабочая зона, где вы можете визуально контролировать весь процесс создания проекта.
- Effects & Presets — панель эффектов, фильтров и шаблонов. По умолчанию сюда же включены панели: Review, Info, Align, панели по работе с текстом.
- Layers — панель слоев, отображает все созданные вами слои.
- Timeline — панель монтажного стола. Эта панель нужна для редактирования и настройки анимации.
- Menu — меню программы. Включает в себя все доступные инструменты и настройки.
- Toolbar — панель инструментов. Наглядно отображает основной инструмент программы, а также активный инструмент.
- Default — панель гибкой настройки рабочего пространства под ваши нужды.
Adobe After Effects очень похож на Adobe Photoshop. Такая же работа со слоями, фильтрами, эффектами и так далее. Если вы работали в Photoshop, вам будет несложно освоить и After Effects.
Отличительная особенность After Effects — большое количество всевозможных плагинов, платных и бесплатных. Еще одна особенность — работа со скриптами. Если вы умеете программировать, пишете скрипты или плагины, вам не составит труда использовать всю мощь After Effects. Но даже если вы программист только в душе, не расстраивайтесь, можете воспользоваться готовыми скриптами.
А теперь давайте приступим к созданию анимированной иконки бургер-меню.
Создание проекта
Создайте новую композицию.
![](https://248006.selcdn.ru/main/upload/setka_images/bc40397c373d78b1ae9ca231cf592797766f18bf.png)
Укажите разрешение композиции, я поставил 1280х1280. Количество кадров установил 30. Продолжительность 10 секунд.
![](https://248006.selcdn.ru/main/upload/setka_images/370f1edc437f3f1650affaa86aa15c6fc141133f.png)
Создайте новый слой на панели слоев. Для этого правой кнопкой мыши откройте контекстное меню и выберете пункт New — Solid. Solid — это тип слоя, залитый сплошным цветом.
![](https://248006.selcdn.ru/main/upload/setka_images/50e60e4f125ecccfe9b67aa1bad6404176ffe4ba.png)
Установите параметры, указанные на скриншоте, цвет можете выбрать любой или выбранный для урока — #3D5272.
![](https://248006.selcdn.ru/main/upload/setka_images/8cc275cf50eae8cb95c5dc6d0dd983570a514363.png)
Создание иконки
Основа готова. Перейдем непосредственно к иконке бургер-меню.
Создайте прямоугольник со скругленными углами — Rounded Rectangle Tool. Найти его можно на панели инструментов.
![](https://248006.selcdn.ru/main/upload/setka_images/21fb422e9edc9df505f03ba86b799e4fb6c6022c.png)
Примерно такого размера. Он сразу отобразится у вас на панели слоев.
![](https://248006.selcdn.ru/main/upload/setka_images/188323ef72db02bb468f9eb86cbfb13af4333b92.png)
Необходимо разместить этот элемент по центру. Перейдите на панель Align, как показано на скриншоте, и выберите горизонтальное и вертикальное выравнивание.
![](https://248006.selcdn.ru/main/upload/setka_images/aaaffc11b7198afe66d7f623bc85b60fd38b4747.png)
Чтобы скруглить края, раскройте свойства слоя в панели слоев Contents — Rectangle 1 — Rectangle Path 1 — Roundness и выставите значение 100.
![](https://248006.selcdn.ru/main/upload/setka_images/9391b752fa74322107a2dd945fe739875970a8cb.png)
Anchor Point
Anchor Point — это опорная точка объекта, поворот (Rotation) и масштабирование (Scale) выполняются вокруг этой точки. При создании шейпового слоя (Shape Layers — фигурные слои, для анимации векторной графики) по умолчанию Anchor Point располагается в центре слоя и имеет нулевые координаты X, Y, но будьте внимательны и всегда проверяйте расположение Anchor Point. Если точка находится за пределами объекта, расположите ее по центру.
![](https://248006.selcdn.ru/main/upload/setka_images/e9a3ffed51feb9598f8dfd2043b9fc9da2a9148f.png)
Для этого выделите слой с прямоугольником и нажмите на инструмент Anchor Point, затем мышкой передвиньте эту точку в центр прямоугольника, вот так:
![](https://248006.selcdn.ru/main/upload/setka_images/7c3a09c58ea22b510ec000dacb4c761a2a983bf4.png)
Для чего все это нужно? Покажу на примере. Я разместил два прямоугольника на одной плоскости, у одного прямоугольника Anchor Point расположен по центру, у другого чуть ниже.
![](https://248006.selcdn.ru/main/upload/setka_images/9528ed4a6c95150241b9ec09a0c95b6b4c016cab.png)
Теперь повернем прямоугольники на 360°.
![](/upload/setka_images/e922264fe85cedb94753706539a320f52a657cc6.gif)
Думаю, разница очевидна.
Вернемся к созданию нашей иконки. Перейдите в панель слоев, выделите прямоугольник и нажмите два раза на Ctrl+D, тем самым вы создадите две копии этого прямоугольника.
![](https://248006.selcdn.ru/main/upload/setka_images/d2142cbc27f1354a7bf41e46f78f5b9b45a9e973.png)
Сдвиньте прямоугольники таким образом, чтобы получилось бургер-меню. Как вариант, зажмите Shift и стрелками вверх и вниз сместите прямоугольники, как показано на скриншоте.
![](https://248006.selcdn.ru/main/upload/setka_images/88a54a0c1a7227aaf3c11a1082d809bf3b9ddacf.png)
Свойства слоя — Position и Rotation
В панели слоев выделите верхний прямоугольник и выберите два свойства слоя: Position и Rotate. Эти свойства мы задействуем в анимации. Повернем и переместим необходимые элементы. Чтобы выбрать именно эти свойства, зажмите Shift, затем, не отпуская, нажмите P, потом R. Должно получиться так:
![](https://248006.selcdn.ru/main/upload/setka_images/27fe578305f52b92aa2da496d39a13fc2dc7ca10.png)
Создание анимации иконки
Вот мы и подошли к самому интересному — анимации. Перейдите на панель Timeline, это та, что справа от панели слоев. Переместите индикатор текущего времени на одну секунду, как показано на скриншоте. Теперь на панели слоев в свойствах Position и Rotation нажмите на иконку секундомера. На панели Timeline у вас появятся два ромбика — это ключевые кадры анимации.
![](https://248006.selcdn.ru/main/upload/setka_images/de6b02b7c6c57651e77354f59e7852138858303f.png)
На панели Timeline переместите индикатор, как показано на скриншоте. Теперь создайте ключевой кадр — нажмите на иконку ромбика слева от иконки секундомера свойства Rotation на панели слоев. Поставьте этому свойству значение 45°.
![](https://248006.selcdn.ru/main/upload/setka_images/08f2d644a62082ae917530198af89daa06a91d48.png)
Кликните мышкой на свойстве Position верхнего прямоугольника и передвиньте его, как показано на скрине.
![](https://248006.selcdn.ru/main/upload/setka_images/51cd0ff14e59002a6c6f5c4c249cf64f49159f45.png)
Подвигайте индикатор текущего времени между ключевыми кадрами, чтобы посмотреть на результат. Должно получиться так:
![](/upload/setka_images/ca4b97da81c1396a3765075fb056ca4f2af08ec3.gif)
Для того, чтобы просмотреть результат анимации в процессе работы, можно нажать пробел или подвигать индикатор текущего времени на панели Timeline.
Если вам необходимо просмотреть результат конкретной части анимации в зацикленном виде, можно задействовать маркеры рабочей области для ограничения анимации.
Переместите маркеры рабочей области так, чтобы осталась нужная часть.
![](/upload/setka_images/0845619db8a3a03e610cd3064fa9f29e8a72f774.gif)
Далее повторите все действия с нижним прямоугольником. Единственное отличие — в свойстве Rotation вместо 45° нужно поставить –45°.
Активируйте свойства слоя нижнего прямоугольника — зажмите Shift, затем поочередно P и R для отображения свойств слоев Position и Rotation. На панели Timeline переместите индикатор на первую секунду. Кликните на иконки секундомеров, тем самым создав ключевые кадры для свойств слоев Position и Rotation.
![](https://248006.selcdn.ru/main/upload/setka_images/5c6329aa8006dd85da7abe407febccecf0da420d.png)
Переместите индикатор и создайте новые ключевые кадры, как на скриншоте, для свойства Rotation задайте значение –45°. Находясь на свойстве Position, переместите прямоугольник к центру двух других прямоугольников.
![](https://248006.selcdn.ru/main/upload/setka_images/f6c960a1d1ec880a00abdfa1c47f467594cd2b8e.png)
Вот что должно получиться:
![](/upload/setka_images/c77690bdbd200946922ea34ed8984abf1b7c38f8.gif)
Теперь нам необходимо избавиться от среднего прямоугольника. Можно сделать анимацию прозрачности от 100% до 0%.
Выделите слой среднего прямоугольника и нажмите T, вы увидите свойство Opacity. Создайте ключевые кадры, для первого задайте значение прозрачности 100%, для второго 0%.
![](https://248006.selcdn.ru/main/upload/setka_images/ca6406910494b30fb62cfa49ae635da5a25e67b9.png)
Сделаем так чтобы крестик превращался обратно в бургер. Чтобы это реализовать, используем Time-Reverse Keyframes — воспроизведение ключевых кадров в обратном направлении.
Выберите верхний прямоугольник и на панели Timeline выделите ключевые кадры свойств Position и Rotation, нажмите Ctrl + C. Затем переместите индикатор, как показано на скриншоте, и нажмите Ctrl + V. Тем самым вы скопировали ключевые кадры и свойства этого элемента. Но ключевые кадры еще раз продублируют анимацию от бургер-меню к элементу закрытия. Нам нужно ровно наоборот, чтобы элемент закрытия превращался обратно в бургер-меню.
Для этого, не снимая выделения со скопированных ключевых кадров, нажмите правой кнопкой мыши, в контекстном меню выберите Keyframe Assistant — Time-Reverse Keyframes. Наши ключевые кадры развернулись в нужном направлении от элемента закрытия к бургер-меню.
![](https://248006.selcdn.ru/main/upload/setka_images/98d84dd8bfbaebfa52c2db9a2199f301309319ca.png)
Повторите те же действия для оставшихся двух прямоугольников.
![](https://248006.selcdn.ru/main/upload/setka_images/37b7cc8ef71d9872883e2ca5f780891bf8e14e02.png)
Что у вас должно получиться:
![](/upload/setka_images/af23e25e99565b9a4dae751fb3621bdb3d39da61.gif)
Очень неплохо, и если бы мы не были крутыми UI- и моушн-дизайнерами, то мы бы сказали: круто, в продакшн. Но мы так не скажем, потому что умеем замечать детали и знаем, как сделать еще лучше.
Улучшение анимации, добавление микроанимации
Так что же тут не так? Давайте подумаем. Все верно — прямолинейно, избито, неинтересно. Попробуем поработать с этим и сделать хорошо. На самом деле допиливать и дорабатывать анимацию можно до бесконечности, все зависит от ваших знаний, умений и желаний.
Я выберу три приема которые помогут улучшить анимацию: добавлю разворот на 180°, микроанимацию и Easy Ease. «Сглаживание анимации» (Easy Ease) — это одна из тех особенностей, за которую так любят After Effects.
Для того, чтобы развернуть все прямоугольники на 180° в процессе анимации, не обойтись без Null Object. Это слой без видимых свойств, но он умеет все, что умеют обычные слои. В нашем примере мы используем его, чтобы связать с иконкой и назначить свойство вращения на 180°. Создать новый слой с Null Object можно так:
![](https://248006.selcdn.ru/main/upload/setka_images/87db6cb196ffa08a76dd859267c141dbc9478c77.png)
Или так:
![](https://248006.selcdn.ru/main/upload/setka_images/445a3ade988e19a7f979c2a122912930066f2e9c.png)
Привяжите все наши прямоугольники к слою Null Object. Сделать это можно двумя способами:
1. Кликните курсором мыши на значке спирали в столбце Parent панели слоев и, удерживая, перетащите на слой Null Object. Так нужно сделать с каждым слоем, который мы хотим привязать.
![](https://248006.selcdn.ru/main/upload/setka_images/7096f1e7dfa5538542ee5298959d2c1c01735f92.png)
2. Выбрать в выпадающем списке столбца Parent панели слоев — Null Object.
![](https://248006.selcdn.ru/main/upload/setka_images/8021964c570e7fc07e2d9c699d65a43966c5cf10.png)
Выделите слой Null Object, в моем случае слой называется Null1. Выберите свойство Rotation этого слоя. Установите ключевые кадры, как показано на скрине, со значением 0° первого кадра и значением 180° второго кадра.
![](https://248006.selcdn.ru/main/upload/setka_images/bc505989da9a2a80a4ed5478fb704ebf084d4501.png)
Продублируйте эти кадры и выберите Time-Reverse Keyframes, как показано на скриншоте.
![](https://248006.selcdn.ru/main/upload/setka_images/e4589884001e1b53edaed6669fef82f2d49e2a60.png)
Посмотрим, что получилось:
![](/upload/setka_images/8980618e6e0e26ec7e5706de5ac476f03777163a.gif)
Теперь продублируйте ключевой кадр свойства Rotation верхнего прямоугольника, как показано на скрине.
![](https://248006.selcdn.ru/main/upload/setka_images/d9f262a7c677392727e63c1dbc6fa0e0cb149b69.png)
Это нужно для того, чтобы создать микроанимацию возвращения элемента на прежнюю позицию.
Укажите значение Rotation 53°.
![](https://248006.selcdn.ru/main/upload/setka_images/bc505989da9a2a80a4ed5478fb704ebf084d4501.png)
Плавность анимации, Easy Ease
Поработаем над плавностью анимации. Выделите все ключевые кадры и нажмите F9 для того, чтобы мы могли корректировать график Easy Ease.
![](https://248006.selcdn.ru/main/upload/setka_images/bc55706d124a96761501ed4dd24ba184a39ab808.png)
Ключевые кадры перестали быть ромбиками и превратились в значки похожие на песочные часы. Это значит что мы их перевели в режим Easy Ease.
Но перед тем как редактировать графики, продублируйте еще несколько кадров. Эти кадры добавляют микроанимацию на выходе. С ней бургер-иконка смотрится более живо и гармонично. Перейдите на слой Null1 скопируйте ключевой кадр, который находится на десятом кадре второй секунды, и вставьте его на 20-й кадр второй секунды. Значение свойства Rotation укажите 190°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation –45°. Вот так:
![](https://248006.selcdn.ru/main/upload/setka_images/6bfe57c61f9a1157f2f546e3c0de1bc45ba36a47.png)
Перейдите на слой Null1, скопируйте ключевой кадр, который находится на десятом кадре третьей секунды, и вставьте его на 20-й кадр третьей секунды. Значение свойства Rotation укажите 0°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation 0°. Вот так:
![](https://248006.selcdn.ru/main/upload/setka_images/01dcde110ca42559dd42e7d97dfb71b7f4315965.png)
Выделите три ключевых кадра, как показано ниже, и нажмите на иконку графика Easy Ease, он также указан на скрине.
![](https://248006.selcdn.ru/main/upload/setka_images/03c68690f83f1bef964051378ae03777eab99004.png)
Теперь настройте кривую, как показано ниже, пользуясь желтыми манипуляторами точек.
![](https://248006.selcdn.ru/main/upload/setka_images/e291e52fe6fae933918b6397077acade26d282ec.png)
Пример настройки графика:
![](/upload/setka_images/3d7628cf2cd4e10ea4bbb837d7078810c2a4cee7.gif)
Протестируем.
![](/upload/setka_images/3e1d52f9002871ffe4b1df86d03008e3a19f1376.gif)
То же самое проделайте для нижнего прямоугольника.
![](https://248006.selcdn.ru/main/upload/setka_images/03c68690f83f1bef964051378ae03777eab99004.png)
График нижнего прямоугольника.
![](https://248006.selcdn.ru/main/upload/setka_images/c3c9038f5cec282c2fd96660a536d6acc9e00a12.png)
Результат
Давайте посмотрим, что получилось в итоге.
![](/upload/setka_images/b49a8448e39a8f28e8067c069e74ed79b0610eed.gif)
Отлично получилось!
В следующем уроке сделаем небольшую анимацию прелоадера с применением несложных скриптов.
![](/upload/setka_images/46f1f46a44382e76ec30378d26e0c66ece21653f.gif)
Знание анимации — большой плюс для дизайнера. На курсах Skillbox рассказывают, как анимировать интерфейсы, создавать микровзаимодействия, делать пользовательский опыт «плавным». Вы освоите новые редакторы и приемы, углубите знания во многих областях, повысите свою ценность как специалист.