Как сделать исчезновение в after effects

Element 3D Tutorial | After Effects Tutorial | VFX Эффекты тряски, портала, исчезновения

Эффекты After Effects :

Дубликаты не найдены

А модели с blender добавляются?

Как сделать исчезновение в after effects

Визуальный обман

Забавно, как благодаря небольшому наклону досок цвет дороги на набережной меняется. По классике, все зависит от точки зрения.

Думаю, помните прикол с кубом и клеточками, где один и тот же цвет кажется то белым, то серым?

Как сделать исчезновение в after effects

Как сделать исчезновение в after effects

Как сделать турбо-тоннель эффект в Unity с помощью Particle System

Я не знаю, как назвать такой эффект: дыра, пещера, турбо-тоннель, wormhole или, может, пищевод, но результат выглядит так:

Как сделать исчезновение в after effects

Для реализации этого эффекта подойдёт практически любой игровой движок: мой первый вариант был сделан ещё на флеше. Здесь же расскажу на примере Unity (Version 2019.2.4f1).

Я добавил такой эффект во вступительном ролике и тизере своей игры про атаку вирусов на иммунную систему «Listeria Wars».

Я использовал 2D темплейт при создании проекта, но можно использовать и 3D. В любом случае понадобится ортографическая проекция в настройках камеры и сплошной чёрный фон.

Как сделать исчезновение в after effects

Для Particle System понадобится материал со спрайтом тоннеля. Я нарисовал вот такую картинку, не особо заморачиваясь, так как эффект динамичный и мало кто успеет оценить вашу невероятную детализацию. Но всё, конечно, на ваш вкус. Изначально спрайт был красный, но для динамического цвета стоит перевести его в черно-белый режим.

Как сделать исчезновение в after effects

Закидываем наш спрайт в папку для спрайтов в Assets и создаём новый материал Tunnel Wall (создаём папку Materials, по ней кликаем правой кнопкой мыши → Create → Material). В настройках выбираем шейдер Mobile/Particles/Alpha Blended (в старых версиях Unity Particle/Additive). Затем в Particle Texture кликаем по нашему спрайту тоннеля.

Как сделать исчезновение в after effects

Добавление основной Particle System

Добавляем в сцену пустой объект и называем Tunnel. В него мы будем помещать все необходимые партиклы и контроллеры. Кликаем правой кнопкой мыши и выбираем Effects → Particle System, который назовём Tunnel Wall по аналогии с именем спрайта. Начинается самое интересное! Настройка и эксперименты.

Основная суть данных настроек — это поочерёдное появление стенок тоннеля с последующим увеличением, где каждый последующий партикл находится за предыдущим. За счёт этого и получается эффект движения вперед по тоннелю.

* Material: Tunnel Wall;

* Sort Mode: Oldest in Front;

* Max Particle Size: 5 (для возможности увеличения спрайта на размер больше, чем на пол экрана, где 5 — это разрешение экрана * 5).

Основные (Появляются при клике на хедер настроек, если скрыты)

* Start Lifetime 2.5 (Время жизни партикла, так же определяет скорость увеличения);

* Start Speed: 0 (Скорость не нужна);

* Start Size: 100 (Зависит от размера спрайта, выбираем на глаз, регулируем вместе с Size over Lifetime);

* Start Rotation: от 0 до 360 (Выбираем Random Between Two Constants, крутим партиклы как хотим);

* Start Color: Выбираем на вкус, если спрайт Tunnel Wall чёрно-белый. Осторожно, со слегка оранжевым цветом турбо тоннель рискует превратиться в задний проход;

* Gravity modifier: 0.02 (Партиклы будут слегка падать, задаём немного динамики в движении);

* Simulation Space: World (Мы будем двигать точку создания партиклов, чтобы не перемещалась вся конструкция, ставим World);

* Max Particles: 10 (Смотрим итоговое количество партиклов в панели Particle Effect и устанавливаем столько же).

Emission: Rate over Lifetime: 4 (на вкус)

Shape (форма, которая спавнит партиклы)

* Radius: 0.05 (Чем меньше радиус, тем более ровными получаются стенки. Выбираем на вкус).

Color over Lifetime

* Я выставил такие настройки для плавного появления и менее плавного ухода

Как сделать исчезновение в after effects

Size over Lifetime

* Размер должен увеличиваться примерно по экспоненте, но не с самого нуля

Как сделать исчезновение в after effects

Результат на текущий момент

Как сделать исчезновение в after effects

По аналогии я добавил другие частицы в виде клеток и вен. Расписывать подробно не буду, так как работу я проделал примерно аналогичную — настройки отличались лишь слегка. Следует учесть, что частицы должны быть поверх стен. Для этого необходимо задать Order in Layer в Renderer. Ещё я использовал Velocity over Lifetime, с этим тоже можно поиграться. Ну и добавил виньетку. Получилось так:

Как сделать исчезновение в after effects

Простым перемещением объекта Tunnel мы получим нелинейный тоннель. Добавим компонент Mover к Tunnel и удивимся результату

using UnityEngine;
public class Mover: MonoBehaviour <
public float rangeX = 2;
float rangeY = 1.5f;
public float timeDelimiterX = 4f;
public float timeDelimiterY = 3f;
void Update() <
transform.position = new Vector3(
Mathf.SmoothStep(-rangeX, rangeX, Mathf.PingPong(Time.time / timeDelimiterX, 1)),
Mathf.SmoothStep(-rangeY, rangeY, Mathf.PingPong(Time.time / timeDelimiterY, 1)),
0
);
>
>

Как сделать исчезновение в after effects

Так же в коде можно менять каждый из параметров. Цвет, плавное вращение, скорость, да всё что угодно. Вот пример динамического света. Добавляем компонент и прикручиваем наши партиклы к аргументам.

using UnityEngine;
public class Colorizer: MonoBehaviour <
public ParticleSystem tunnelWall;
public ParticleSystem cellBig;
public ParticleSystem cellSmall;
public ParticleSystem cellVessel;
void Update() <
Color color = new Color(
Mathf.SmoothStep(1, 0.5f, Mathf.PingPong(Time.time / 10f, 1)),
Mathf.SmoothStep(0, 1, Mathf.PingPong(Time.time / 15f, 1)),
Mathf.SmoothStep(0, 1, Mathf.PingPong(Time.time / 5f, 1))
);
var tunnelWallMainSettings = tunnelWall.main;
tunnelWallMainSettings.startColor = color;
var cellBigMainSettings = cellBig.main;
cellBigMainSettings.startColor = color;
var cellSmallMainSettings = cellSmall.main;
cellSmallMainSettings.startColor = color;
var cellVesselMainSettings = cellVessel.main;
cellVesselMainSettings.startColor = color;
>
>

Как сделать исчезновение в after effects

Весь код и ассеты тут: Github

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

Добавляйте игру в вишлисты!

Как сделать исчезновение в after effects

Как сделать исчезновение в after effects

Магия шейдеров 19: ASCII Art Шейдер а-ля Watch dogs от Мэтта Старка

Я возвращаюсь к Магии шейдеров и сегодня хочу, как обычно, не вдаваясь в детали, рассказать как бы я сделал шейдер для такого post-эффекта.

Но, давайте, сначала вспомним: что это за ASCII-арт такой. Как сообщает нам Википедия: ASCII-графика — это форма изобразительного искусства, использующая символы ASCII на моноширинном экране компьютерного терминала или принтера для представления изображений.

Так как бы я сделал?

Сделаем fullscreen post-эффект: 1) Вычисляем Luminance 2) Сжимаем картинку до размеров нашей ASCII-картинки в символах. Сколько символов мы хотим чтобы у нас было на экране? 3) Делаем 1D LUT-текстуру с, отсортированными по количеству белого, символами 4) В последнем пассе используем картинку из шага 2 и LUT-текстуру из шага 3 чтобы отрисовать символы в экранную текстуру.

Простор для применения

— Можно блендиться между исходной текстурой и полученной в результате такого пост-эффекта, чтобы сделать какой-то красивый fade-эффект.

— Можно затенять пиксели символов, я предполагаю будет гораздо более объемная картинка

— Можно сделать цветной и добавить какую-то палитру

Как всегда любые вопросы в ЛС или в предложку можно задавать вконтакте, и мы, наконец, завели канал в телеграме: https://t.me/coremission

Всем гектаров в имениях и легкости в движениях!

Смотрите остальные посты про магию шейдеров по тегам ниже.

Источник

Распад на частицы в видео | After Effects Tutorial

Распад на частицы(эффект разрушения) объекта в видео.Исчезновение объекта в видео сделаем с помощью эффекта распада(разрушения) на частицы в After Effects.Использовать будем встроенный эффект частицы(particular).

Чтобы сделать эффект распада реалистичным,в видео должны быть кадры,где отсутствует сам объект разрушения.Если такового нет,то исчезновение объекта сделаем из кадра в Фотошоп.Где удалим его при помощи инструмента Штамп.В After Effects загружаем файл с видео и изображение,которое сделали в Фотошоп.Далее создаем эффект распада(разрушения) при помощи встроенных инструментов After Effects.

Дубликаты не найдены

Ну.. ты лох. Ещё наверное жалкий твинк. Некоторые учатся, не усложняя простые вещи, а не страдают хуйней.

@moderator,забаньте эту женщину!

@sc0lopendra, прекратите провокации в адрес тс и других пользователей, это не приведет ни к чему хорошему.

@DigyZem, Вы можете добавить пользователя в игнор-лист.

Он учит азам на 20 минут.. Я просто не могу молчать, это можно показать и объяснить за 2 минуты. Потом появляются мамкины монтажеры, для которых край гринскрин. Он из тех кто кеинг называет гламурно хромакей, будто это что-то сложное.

@moderator, и проверьте на твинк

Вот блин исчезновение через трапкод на партиклы. Я не понимаю что там в видео на 20 минут вышло, русские туториалы специально такие длинные? А если на какой нибудь сложный проект сразу гайд сделать, уйдет 20 уроков по часу?

Посмотрел немного. Маску ты не правильно делаешь, вместо того чтоб не морочиться с краями, они более ровные были, проще нажать alt+w, обвести деда.

Как сделать исчезновение в after effects

Визуальный обман

Забавно, как благодаря небольшому наклону досок цвет дороги на набережной меняется. По классике, все зависит от точки зрения.

Думаю, помните прикол с кубом и клеточками, где один и тот же цвет кажется то белым, то серым?

Как сделать исчезновение в after effects

Как сделать исчезновение в after effects

Магия шейдеров 19: ASCII Art Шейдер а-ля Watch dogs от Мэтта Старка

Я возвращаюсь к Магии шейдеров и сегодня хочу, как обычно, не вдаваясь в детали, рассказать как бы я сделал шейдер для такого post-эффекта.

Но, давайте, сначала вспомним: что это за ASCII-арт такой. Как сообщает нам Википедия: ASCII-графика — это форма изобразительного искусства, использующая символы ASCII на моноширинном экране компьютерного терминала или принтера для представления изображений.

Так как бы я сделал?

Сделаем fullscreen post-эффект: 1) Вычисляем Luminance 2) Сжимаем картинку до размеров нашей ASCII-картинки в символах. Сколько символов мы хотим чтобы у нас было на экране? 3) Делаем 1D LUT-текстуру с, отсортированными по количеству белого, символами 4) В последнем пассе используем картинку из шага 2 и LUT-текстуру из шага 3 чтобы отрисовать символы в экранную текстуру.

Простор для применения

— Можно блендиться между исходной текстурой и полученной в результате такого пост-эффекта, чтобы сделать какой-то красивый fade-эффект.

— Можно затенять пиксели символов, я предполагаю будет гораздо более объемная картинка

— Можно сделать цветной и добавить какую-то палитру

Как всегда любые вопросы в ЛС или в предложку можно задавать вконтакте, и мы, наконец, завели канал в телеграме: https://t.me/coremission

Всем гектаров в имениях и легкости в движениях!

Смотрите остальные посты про магию шейдеров по тегам ниже.

Источник

After Effects: создаём вау-эффект для главной страницы

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

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

Как сделать исчезновение в after effects

Как сделать исчезновение в after effects

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

Анимация, которая получится в итоге:

Как сделать исчезновение в after effects

Как сделать исчезновение в after effects

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

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

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

Как всегда, начнём с создания проекта и композиции: File — New — New Project.

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

В окне настроек композиции укажите параметры, как показано ниже. Частоту кадров выставите 25, длительность — 16 секунд.

Как сделать исчезновение в after effects

Назовите композицию Travel-interface. После создания композиции добавьте новый слой. Щёлкните правой кнопкой мыши по панели слоев и выберите New — Solid, цвет #111F20.

Как сделать исчезновение в after effects

Подготовка к переносу макета

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

Если у вас уже есть наработанный скилл по инструментарию, можете воспользоваться прекрасным конвертером, который перенесёт ваш макет из Figma в After Effects автоматически, и сразу перейти к созданию анимации.

Фотографии я переношу «один в один» либо использую оригинал большего разрешения, чем в макете, чтобы фото можно было уменьшить уже в After Effects. При переносе не использую никакой другой софт, кроме Figma и After Effects. Текст набираю в самом After Effects — никаких JPG-экспортов, иначе к тексту нельзя будет применить эффекты.

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

Для этого выделите Frame в Figma и экспортируйте его в формат JPG или PNG. Для подложки это не принципиально, JPG весит немного меньше, поэтому я использую его.

Как сделать исчезновение в after effects

Теперь импортируйте этот файл в After Effects.

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

Папку назовите Bg и перенесите в неё файл interface-bg.jpg. Чуть позже сюда будет добавлен ещё один файл второго экрана.

Теперь порядок файлов на панели проекта должен быть таким:

Как сделать исчезновение в after effects

Далее перенесите файл подложки interface-bg.jpg на панель Timeline, установите его выше слоя заливки и зафиксируйте по клику на иконку замочка, чтобы случайно не сдвинуть.

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

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

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

Приступаем к переносу элементов макета и подготовке их к анимации. Сначала переносим хедер — логотип, меню и дополнительное бургер-меню.

Начните с логотипа. Перейдите в редактор Figma, выделите логотип и посмотрите параметры текста, которые необходимы для анимации в After Effects.

Как сделать исчезновение в after effects

Теперь переключитесь в After Effects, на панели инструментов выберите Horizontal Type Tool и в рабочей области композиции около логотипа наберите слово Travel.

Как сделать исчезновение в after effects

Настройте значения текста — гарнитуру шрифта, размер и межбуквенный интервал, как в Figma, — и переместите на место логотип.

Как сделать исчезновение в after effects

Обратите внимание: межбуквенный интервал в Figma указывается в процентах, а в After Effects — нет. Интервал вам придётся подбирать на глаз, ориентируясь на размеры в подложке.

Как и логотип, так же перенесите все пункты меню. Бургер-меню нарисуйте инструментом Rectangle Tool, который находится на панели инструментов.

Как сделать исчезновение в after effects

Задаём белый цвет, отключаем обводку. Шапка готова! Отключите видимость подложки и посмотрите, что получилось:

Как сделать исчезновение в after effects

Теперь сделаем так, чтобы работать было удобнее и большое количество слоёв не мешало на панели Timeline. Выделите все пункты меню и нажмите правой клавишей мыши на любом из них; в появившемся контекстном меню выберите Pre-compose.

Как сделать исчезновение в after effects

Композицию назовите Menu; не забудьте отметить пункт, который выделен на скриншоте ниже.

Как сделать исчезновение в after effects

По этому же примеру сделайте Pre-compose для бургер-меню, композицию назовите Burger.

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

Как сделать исчезновение в after effects

Если у вас всё так же, можете приступать к переносу блока фотографий-категорий и надписей к ним.

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

Импортируйте в проект все необходимые фотографии. Создайте для них папку Photo и разместите их там.

Как сделать исчезновение в after effects

Включите видимость слоя с подложкой, если он был выключен; выберите фотографию, с которой хотите начать, и перенесите её на Timeline.

Как сделать исчезновение в after effects

Для лучшей подгонки нажмите

, чтобы развернуть рабочую зону на весь экран:

Как сделать исчезновение в after effects

После того как вы примерно подогнали фотографию (точную подгонку обеспечит маска), выберите инструмент Rectangle Tool и, не снимая с неё выделение, нарисуйте маску так, чтобы она чётко обозначила границы фотографии на подложке и обеспечила максимальную точность по макету.

С маской будет выглядеть так:

Как сделать исчезновение в after effects

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

Не забудьте про боковые фотографии, у которых должна быть прозрачность 10%. Чтобы настроить значение прозрачности, выберите эти фотографии на панели Timeline, нажмите клавишу T на клавиатуре или выберите Opacity из свойств слоя.

Как сделать исчезновение в after effects

Про перенос шрифтовых элементов мы уже проговаривали чуть выше — по аналогии перенесите надписи к фотографиям. Единственное отличие от того же меню — в том, что надписи вертикальные. Чтобы развернуть текст на 90 градусов, точнее на –90, выберите нужный слой на Timeline, нажмите клавишу R, что означает Rotation, и укажите значение –90. Вот так:

Как сделать исчезновение в after effects

Все остальные надписи делаются точно так же.

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

Теперь, когда вы перенесли первый экран, выключите отображение подложки. Кликните на иконку глаза на панели Timeline и посмотрите, что получилось. Должны отображаться все блоки макета и элементы этих блоков: логотип, меню, бургер-меню, пять фотографий и надписи к ним, боковые фотографии должны иметь прозрачность 10%. Если у вас всё так, переходите к следующему шагу.

Вот что должно получиться после переноса первого экрана:

Как сделать исчезновение в after effects

Второй экран будем переносить и формировать после того, как анимируем первый экран. По сути второй экран — это просто добавление двух фотографий и небольшого текстового блока.

Анимация первого экрана

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

Анимация центрального блока с фотографиями

Выберите фотографию с подписью ѕ, раскройте стек свойств и выберите Masks — Mask 1 — Mask Patch. На панели Timeline переместитесь на нулевой кадр и нажмите на иконку секундомера, чтобы поставить ключевой кадр, затем переместите индикатор текущего времени на двадцать первый кадр и также поставьте ключевой кадр.

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

Теперь нужно сделать так, чтобы вторая фотография, которая находится справа, начинала движение именно тогда, когда первая почти прекратила своё. Анимироваться второе фото будет не снизу вверх, а слева направо.

Как сделать исчезновение в after effects

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

Выберите фотографию Switzerland на панели Timeline, в свойствах выберите Masks — Mask 1 — Mask Patch, перейдите на двадцатый кадр. Это на один кадр меньше, чем окончание движения анимации первой фотографии. Благодаря этому у зрителя возникнет ощущение, что первая фотография как бы создаёт предпосылки для движения второй.

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

Как сделать исчезновение в after effects

Третью фотографию анимируйте самостоятельно. Как и в предыдущих примерах, по двум ключевым кадрам сдвигайте вершины маски у первого кадра в нужную сторону и настраивайте Easy Ease.

Как сделать исчезновение в after effects

Теперь нужно анимировать текст и две оставшиеся фотографии.

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

Текст должен появляться постепенно, не перетягивать на себя внимание, а как бы мягко сопровождать движение фотографий.

Наименование страны будет появляться с помощью эффекта Slow Fade On, который находится на панели Effects & Presets — Animation Presets — Text — Animate In. Слой с цифрами анимируем с помощью эффекта Decoder Fade In, который находится там же.

Как сделать исчезновение в after effects

Подробно ознакомиться со стандартными текстовыми эффектами можно в этой статье.

Пример анимации текста для первой фотографии:

Как сделать исчезновение в after effects

Давайте разберём, как сделать такую анимацию и синхронизировать её с движением фотографии.

Выберите текстовый слой Iceland и перейдите на панель Effects & Presets, найдите эффект Slow Fade On в списке Animation Presets — Text. Перенесите этот эффект мышкой на текстовый слой.

Как сделать исчезновение в after effects

Следующим шагом нужно настроить ключевые кадры этого слоя так, чтобы текст появлялся вместе с фотографией. Для этого перейдите в свойства этого слоя, выберите Text — Animator 1 — Range Selector 1 и перенесите первый ключевик на двенадцатый кадр, а второй — на третий кадр второй секунды.

Как сделать исчезновение в after effects

Затем выберите слой с цифрой и примените к нему эффект Decoder Fade In, настройте ключевые кадры свойства Text — Animator 1 — Range Selector 1: первый ключевой кадр на втором кадре второй секунды, второй ключевой кадр на девятнадцатом кадре второй секунды.

Как сделать исчезновение в after effects

Когда вы проделаете эти манипуляции со всеми фотографиями, смещая кадры относительно конкретной фотографии, должно получиться так:

Как сделать исчезновение в after effects

Следующим шагом нужно анимировать боковые фотографии и текст к ним.

Они анимируются по тому же принципу, что и предыдущие фотографии, — с помощью маски. Анимация фотографий начинается по окончании движения последней фотографии основного блока Norway. Левая фотография двигается справа налево, правая — слева направо.

Как сделать исчезновение в after effects

Выберите фотографии Spain и France, переместите индикатор текущего времени на вторую секунду (на этой секунде заканчивается анимация основной композиции, состоящая из трёх фотографий), нажмите клавишу T (Opacity) на клавиатуре и поставьте ключевой кадр со значением 0%. Затем перейдите на девятнадцатый кадр третьей секунды и установите ключевой кадр там со значением прозрачности 10%. Получилась анимация прозрачности по двум ключевым кадрам от 0% к 10%.

Как сделать исчезновение в after effects

Анимация прозрачности боковых фотографий готова.

Как сделать исчезновение в after effects

Теперь нужно настроить анимацию маски. Выделите фотографию France, в свойствах выберите Masks — Mask 1 — Mask Patch, перейдите на вторую секунду и установите ключевой кадр. Затем передвиньте индикатор текущего времени на двадцатый кадр третьей секунды и поставьте ещё один ключевой кадр.

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

Не забудьте настроить Easy Ease: выделите ключевые кадры и нажмите F9, чтобы анимация была более плавной.

Тоже самое проделайте с фотографией Spain. Настройте появление текста самостоятельно, его анимация делается точно так же, как мы делали ранее.

Напомню последовательность действий для анимации текста: перейдите на панель Effects & Presets, раскройте список Animation Presets — Text — Animate In и выберите эффект Slow Fade On. Мышкой перенесите эффект на текст, затем перейдите в свойство текста Text — Animator 1 — Range Selector 1 и настройте ключевые кадры так, чтобы эффект появления текста совпадал с появлением фотографии.

Вот что получилось.

Как сделать исчезновение в after effects

Следующим шагом создадим курсор мыши, его анимацию и траекторию движения для перехода на второй экран.

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

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

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

Как сделать исчезновение в after effects

Напомню, что композицию можно создать четырьмя способами:

1. Через верхнее меню, выберите Composition — New Composition.

Как сделать исчезновение в after effects

2. Через контекстное меню на панели проекта, нажмите правой кнопкой мыши и выберите New Composition.

Как сделать исчезновение в after effects

3. Через иконку внизу панели проекта Create a New Composition.

Как сделать исчезновение в after effects

4. Через сочетание горячих клавиш, нажмите Ctrl + N.

Вернемся к созданию курсора мыши. После того как вы создали композицию с рабочей зоной 80 px, перейдите на панель инструментов, выберите Ellipse Tool и нарисуйте круг.

Как сделать исчезновение в after effects

Обводку поставьте 10 px, цвет белый, цвет заливки #799CC4, прозрачность заливки 40%.

Как сделать исчезновение в after effects

Теперь сделаем симуляцию нажатия. Для этого нажмите клавишу S, тем самым выбрав свойство Scale. Переместите индикатор текущего времени на нулевой кадр и установите там ключевой кадр, на втором и шестом кадре также установите ключевики. На втором кадре задайте значение 60%. Выделите все ключевые кадры и нажмите F9 Easy Ease.

Как сделать исчезновение в after effects

Переставьте индикатор текущего времени на двадцатый кадр и нажмите клавишу N; тем самым вы отсечёте неиспользованные кадры. Это поможет при тестировании не выжидать весь промежуток времени, указанный в композиции.

Как сделать исчезновение в after effects

Теперь нажмите пробел, чтобы протестировать анимацию курсора мыши.

Как сделать исчезновение в after effects

Следующим шагом настроим траекторию перемещения курсора на второй экран.

Для этого перейдите в композицию Travel-interface и переместите композицию Cursor с панели проекта на панель Timeline выше всех слоёв.

Как сделать исчезновение в after effects

Переключаться на второй экран будем через фотографию France — это полупрозрачная фотография справа.

Как сделать исчезновение в after effects

Идея такая: когда наводим курсор на фотографию, она становится ярче, текст исчезает, на некоторое время курсор замирает, а затем происходит симуляция нажатия курсора.

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

Сначала настроим яркость фотографии, симулируя наведение на неё курсора.

Выберите слой France и нажмите клавишу T для активации свойства Opacity, перейдите на двадцать пятый кадр пятой секунды, затем на шестую секунду и установите там ключевые кадры. Укажите значение 100% для кадра на шестой секунде. Получилась анимация яркости по двум ключевым кадрам.

Как сделать исчезновение в after effects

Затем настроим исчезновение текста. Выберите слой с нужным текстом, перейдите к свойству Text — Animator 1 — Range Selector 1, скопируйте ключевые кадры, которые отвечают за появление текста (Ctrl + C), и вставьте их (Ctrl + V) на двадцать втором кадре пятой секунды.

Как сделать исчезновение в after effects

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

Как сделать исчезновение в after effects

Смотрим на результат.

Как сделать исчезновение в after effects

С этим разобрались, идём дальше.

Траектория курсора

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

Как сделать исчезновение в after effects

Не снимая выделение со слоя курсора, нажмите клавишу P, чтобы активировать свойство Position. Поставьте ключевой кадр на двадцать втором кадре пятой секунды (я провел несколько пробных тестов, пока понял, что именно с этого кадра нужно начинать).

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

Траектория движения курсора:

Как сделать исчезновение в after effects

Теперь курсор движется так:

Как сделать исчезновение в after effects

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

Expressions — язык выражений After Effects. Нужны выражения для автоматизации и ускорения работы. Все доступные выражения можно посмотреть в официальном справочнике.

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

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

Как сделать исчезновение в after effects

Подготовка анимации второго экрана

Чтобы анимировать второй экран, его нужно сначала перенести из редактора Figma. Но по сути второй экран — это две дополнительные фотографии и два слоя с текстом, поэтому я не стал создавать для них отдельную композицию, а разместил в той же композиции, где находится первый экран, — Travel-interface. Перед тем как добавлять новые элементы, давайте разберёмся с переходом и элементами первого экрана.

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

Выберите фотографию Norway и нажмите клавишу M, тем самым вы активируете свойство Mask Path. Скопируйте ключевые кадры появления фотографии (Ctrl + C), переместите индикатор текущего времени на шестнадцатый кадр седьмой секунды и вставьте эти кадры (Ctrl + V).

Как сделать исчезновение в after effects

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

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

Как сделать исчезновение в after effects

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *