Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

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

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

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

4 <ul><li>Project - панель проекта, здесь отображаются все рабочие файлы: картинки, видео, аудио.</li>

5 <li>Composition - панель композиции, рабочая зона, где вы можете визуально контролировать весь процесс создания проекта.</li>

6 <li>Effects & Presets - панель эффектов, фильтров и шаблонов. По умолчанию сюда же включены панели: Review, Info, Align, панели по работе с текстом.</li>

7 <li>Layers - панель слоев, отображает все созданные вами слои.</li>

8 <li>Timeline - панель монтажного стола. Эта панель нужна для редактирования и настройки анимации.</li>

9 <li>Menu - меню программы. Включает в себя все доступные инструменты и настройки.</li>

10 <li>Toolbar - панель инструментов. Наглядно отображает основной инструмент программы, а также активный инструмент.</li>

11 <li>Default - панель гибкой настройки рабочего пространства под ваши нужды.</li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54 Или так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

71 Протестируем.

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

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

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

75 Отлично получилось!

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

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