Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>19 авг 2019</li>

3 <li>0</li>

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

5 vlada_maestro / shutterstock

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

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

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

9 Создаем новый проектЗатем выберитеNew Composition.

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

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

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

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

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

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

16 <ul><li>Выберите импорт в верхней строке менюFile - Import - File.</li>

17 <li>Нажмите правой кнопкой мыши на панели проектов и выберитеImport - File.</li>

18 <li>Перетащите файл из папки проводника на панель проектов.</li>

19 </ul>Импортируем файл через панель проектовПеренесите только что импортированный файл на панель слоев, в примере он называетсяbg1.png.

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

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

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

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

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

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

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

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

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

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

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

31 Вот что получилось в итоге переноса в After Effects правой части макетаПо такому же принципу перенесите левую часть.

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

33 Сборка всех слоев первого слайда в одну композициюПеренесите все элементы второго слайда из Figma и также создайтеpre-compose. Композицию назовитеTomb raider.

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

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

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

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

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

39 Смещаем изображение по таймлайну и выставляем ключевой кадрВыделите эти ключевые кадры и нажмитеF9 (Easy Ease - сглаживание анимации). Перейдите в Graph Editor.

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

41 Замедляем анимацию в Graph EditorПроверьте, что получилось:

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

43 <ul><li>Mask Path - путь маски;</li>

44 <li>Mask Feather- размытие границ;</li>

45 <li>Mask Opacity - непрозрачность маски;</li>

46 <li>Mask Expension - расширение границ.</li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

63 Анимация описания фильма и переключателя слайдовПромежуточный результат общей композиции:

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

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

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

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

68 Анимация надписей и цифр маскамиОбщая композиция:

69 Анимация композиции I kill giantsПроба пера:

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

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

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

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

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

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

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

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

78 Было:

79 Анимация текста с помощью опции Slow Fade OnСтало:

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

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

82 <ul><li>курсор;</li>

83 <li>симуляцию движения курсора и нажатия;</li>

84 <li>смену слайдов и сопутствующих элементов.</li>

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

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

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

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

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

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

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

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

93 Настраиваем масштаб курсора в ключевых кадрахПолучится так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

109 <ul><li>Сопоставляете элементы двух композиций.</li>

110 <li>Копируете кадры того элемента, который должен будет смениться следующим.</li>

111 <li>Переносите эти кадры на нужный слой композиции.</li>

112 <li>Проверяете, редактируете, подгоняете.</li>

113 <li>Если нужно сделать так, чтобы предыдущие кадры плавно исчезали, копируете кадры и вставляете дальше по таймлайну, при этом не забывая использовать Time-Reverse Keyframes.</li>

114 </ul>Итоговый результат:

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

116 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>