Текст по окружности after effects

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

Видео:Вращение текста по кругу в After Effects !Скачать

Где пригодится анимация текста

• Презентация логотипа или сайта.
• Заставка на сайте и в приложении.
• Вступление к видеоролику.
• Анимация интерфейсов.

Если вы заинтересованы прогрессивным дизайном в digital и хотите зарабатывать на своих умениях, обратите внимание на курс «Анимация интерфейсов» от Skillbox.

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

Дальше — пошаговая инструкция по применению и созданию таких эффектов.

• Мы сделаем новый проект и подготовим сцену для анимации.
• Применим несколько стандартных эффектов и посмотрим, что получилось.
• С нуля создадим свой эффект анимации.

Вот что у вас получится в конце урока:

Видео:Как сделать анимацию текста по кругу в After EffectsСкачать

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

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

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

Видео:Как сделать текст по кругу в Adobe After Effects / Цикл анимации текста по окружности (траектории)Скачать

Текстовый слой

Выберите на панели инструментов Type Tool. Также вы можете использовать горячие клавиши Ctrl+T или кликнуть правой кнопкой мыши по панели слоев и в контекстном меню выбрать пункт New — Text.

Наберите текст, к которому будете применять эффекты.

С помощью инструментов выравнивания расположите текстовый слой по центру.

Текстовые эффекты из коробки

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

Decoder Fade In

Это эффект «перебора букв», вот такой:

Перейдите на панель Effects & Presets и выберите категорию Animation Presets, подкатегорию Animate In и эффект Decoder Fade In.

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

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

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

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

Видео:Вращение текста вокруг человека |After Effects Tutorial 2020Скачать

Блог о моушн-дизайне

Собрал список выражений для АЕ, которые упрощают мне работу. Совсем простых в стиле loopOut() или wiggle (.4,6) здесь не будет, но и ничего экстрасложного тоже.

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

Видео:Ae: движение текста по путиСкачать

Плашка за текстом

Создать шейповый квадратик, а сверху отдельным слоём добавить текст;
Применить к параметру size у шейпа:

Если текст в несколько строк, то к position у шейпа добавьте этот экспрешн. Без него тоже всё будет работать, но придётся вручную подгонять позицию плашки за текстом.

К остальным экспрешнам

Видео:Текст по окружности Как сделать анимацию текста по кругу в After Effects | TutorialСкачать

Анимируемый wiggle

Простой способ заанимировать wiggle. Используем для этого два слайдера: первый отвечает за частоту, второй за амплитуду. Анимировать лучше только амплитуду.

Добавить эффект Slider Control на слой с экспрешном и продублировать его. Применить к любому параметру:

Видео:Базовый Курс Adobe After Effects. Движение текста по кругу. Урок №35.Скачать

Цикличный wiggle

Благодаря этому экспрешну, wiggle начинается и заканчивается в одной и той же точке.

Если вдруг цикл не работает, то это скорей всего из-за того, что луп не успевает прийти в изначальное состояние за отведённое время. Просто сделайте loopTime побольше или freq почаще

Видео:Анимация текста по кругу вокруг объекта.Скачать

Прикрепить шейп к одной стороне

Применить к position, изменять size у шейпа:

Видео:ПРОСТАЯ АНИМАЦИЯ ТЕКСТА В ADOBE AFTER EFFECTS #shortsСкачать

Риг для катящегося круга и квадрата

Катящийся круг

Применить к rotation, анимировать position:

Катящийся квадрат

Работает как с шейпами, так и со слоями и композициями. Если квадрат катится неправильно — изменить значение Slider Control.

Добавить на слой с экспрешном эффект Slider Control;
Применить к position, анимировать rotation:

На основе экспрешна от Mikey Borup

Видео:анимация растягивания текста в after effects / моушн дизайнСкачать

Ежесекундные ступенчатые повороты

Замена time*n. Только вместо плавного поворота — ступенчатый. Чаще всего пригождается, чтобы сделать анимацию секундной стрелки, шестерёнок или других похожих механизмов.

Применить к rotation:

Видео:Объект по кругу в after effects | Текст по кругу в after effects | Анимация по линии After effectsСкачать

Управляемые ступенчатые повороты

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

Применить к rotation:

Видео:Текст по кругу (окружности) в After Effects. Размещаем и анимируем.Скачать

Постоянный масштаб при скейле

Если привязать один объект к другому и начать скейлить родительский, то оба слоя будут увеличиваться. Этот экспрешн не даёт дочернему слою изменять масштаб, он просто будет двигаться по позишну.

Применить к scale слоя, у которого должен быть постоянный масштаб:

Видео:Объект по кругу в After Effects Как по кругу пустить объект и анимация по пути | TutorialСкачать

Переключатель по чекбоксу

Меняет одно значение параметра на другое по нажатию на чекбокс.

Добавить эффект Checkbox Control на слой с экспрешном;
Применить к любому параметру:

Видео:5 красивых и простых анимаций текста в After Effects, которые сможет повторить каждый.Скачать

Луп для шейпов

Обычный loopOut() не работает с шейпами, но зато работает этот экспрешн.

Применить к path у шейпа:

Видео:Движение Текста 3D По Окружности в After Effects!!!Скачать

Range Mapper

Добавить эффект Slider Control на слой с экспрешном;
Применить к любому параметру:

Видео:Как создать кинетическую типографику-цилиндр в After Effects? #aftereffects #афтерэффектс #шортсСкачать

Обводка независимая от скейла

Сохраняет постоянную обводку у шейпов при изменении масштаба.

Применить к «Stroke Width» у шейпа:

Видео:Как превратить горизонтальный текст в вертикальный в After EffectsСкачать

Счётчики

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

1) Обычный счётчик

toFixed(1) — количество цифр после запятой;
Добавить эффект Slider Control на слой с экспрешном;
Применить к «Source Text» у текста:

2) Счётчик с запятыми вместо точек

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

3) Счётчик с дополнительными знаками

4) Счётчик с заменой 1 на 001

При zerosAmount = 3 счёт будет идти вот так: 000, 001 … 011 … 111.

5) Счётчик с разрядами

Заменяет 500000 на 500 000.

6) Счётчик для больших чисел

Счётчик, привязанный к Slider Control, не идёт дальше 1 000 000. Поэтому если нужны большие числа — приходится использовать эффект Angle Control.

Добавить эффект Angle Control на слой с экспрешном;
Применить к «Source Text» у текста:

Видео:Фишки и Лайфхаки в After Effects: Движение объекта по заданному пути #aftereffects #афтерэффектсСкачать

Пара мелочей

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

1) Привязка к слою выше или ниже

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

index+1 — если нужна привязка к слою ниже

2) Постоянно ускоряющиеся повороты

Попробуйте добавить к rotation:

3) Ключи для time*n

Добавляет постоянное движение, но оставляет возможность ставить ключи.

4) Привязка эффекта к слою

Чтобы Gradient Ramp не слетал при перемещении слоя, добавьте этот экспрешн на Start и End:

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

Видео:Авто Размер Шейпа под Текст в After EffectsСкачать

Создание фигур

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Слои-фигуры создаются рисованием на панели «Композиция» с использованием инструмента фигур или инструмента «Перо». Затем к существующим фигурам можно добавлять атрибуты фигур или создавать фигуры в пределах этого слоя-фигуры. По умолчанию при выделении слоя-фигуры и рисовании на панели «Композиция» в этом слое-фигуре создается фигура над выделенными фигурами или группой фигур. Рисование на панели «Композиция» с помощью инструмента фигур или инструмента «Перо», когда выбран слой изображения, не являющийся слоем-фигурой, приводит к созданию маски. Дополнительные сведения см. в разделе Создание масок в After Effects.

Комбинация клавиш инструмента «Фигура» — Q, а комбинация клавиш инструмента «Перо» — G.

Перед тем как начать рисовать на панели «Композиция», чтобы создать слой-фигуру, нажмите клавишу F2 и отмените выделение всех слоев.

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

Преобразование видеоряда векторной графики в фигуру

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

Чтобы преобразовать слой векторной графики видеоряда в слой фигуры, выберите Слой > Создать > Создать фигуры из векторного слоя . Соответствующий слой-фигура отображается поверх слоя видеоряда, который будет отключен.

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

• В настоящее время сохранены не все функции файлов Illustrator. Примеры включают непрозрачность, изображения и градиенты.
• Преобразованные фигуры игнорируют переопределения PAR, заданные в диалоговом окне «Интерпретация видеоряда».
• Градиенты и неподдерживаемые типы могут отображаться как фигуры с уровнем серого 50 %.
• Файлы с тысячами контуров могут импортироваться медленно и без обратной связи.
• Команда меню за один раз срабатывает только на одном выделенном слое.
• При импорте файла Illustrator в качестве композиции (нескольких слоев) невозможно преобразовать все эти слои одновременно. Однако, можно импортировать файл в качестве видеоряда, а затем использовать команду для преобразования слоя видеоряда в фигуры.

Создание фигуры перетаскиванием с помощью инструментов фигур

К инструментам фигур относятся инструменты «Прямоугольник» , «Прямоугольник со скругленными углами» , «Эллипс» , «Многоугольник» , и «Звезда» .

Для активации инструментов фигур и переключения между ними используйте клавишу Q.

Многоугольник представляет собой звезду без свойств «Внутренний радиус» или «Внутренняя округлость», поэтому имена фигур, созданных инструментами «Многоугольник» и «Звезда», одинаковые: polystar.

Маску можно создать с помощью инструмента фигур путем перетаскивания на выбранный слой на панели «Композиция» или панели «Слой». Фигуру можно создать с помощью инструмента фигур путем перетаскивания на выбранный слой на панели «Композиция». Если слой не выбран, перетаскивание с помощью инструмента фигур на панель композиции, создает фигуру на новом слое-фигуре.

Чтобы нарисовать маску в слое-фигуре, нажмите активным инструментом фигур кнопку «Инструмент создания маски» на панели «Инструменты».

При создании фигуры путем перетаскивания на панель «Композиция» с помощью инструмента фигур создается параметрический контур фигуры. Чтобы вместо этого создать контур фигуры кривой Безье, перед началом перетаскивания нажмите клавишу ALT (Windows) или OPTION (Mac OS). Клавишу можно отпустить до окончания операции перетаскивания. Все контуры маски являются контурами кривой Безье. (См. раздел Сведения о фигурах и слоях-фигурах.)

Перетаскивание начинается со щелчка панели «Композиция» или панели «Слой» для рисования и заканчивается при отпускании кнопки мыши. Нажатие клавиш-модификаторов в различное время в ходе одной операции перетаскивания приводит к различным результатам.

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

Для масштабирования круга, эллипса, квадрата, квадрата со скругленными углами, прямоугольника или прямоугольника со скругленными углами вокруг его центра в процессе рисования удерживайте клавишу CTRL (Windows) или COMMAND (Mac OS) после начала перетаскивания. Не отпускайте клавишу до тех пор, пока не отпустите кнопку мыши для завершения рисования.

Для отмены операции рисования нажмите клавишу ESC.

Каждый инструмент фигур сохраняет настройки самой последней операции рисования, выполненной с использованием этого инструмента. Например, если нарисовать звезду и изменить количество точек на 10, следующая звезда, также будет иметь 10 точек. Чтобы сбросить значения параметров для инструмента и создать фигуру с настройками по умолчанию, дважды щелкните инструмент на панели «Инструменты». (См. раздел Создание фигуры или маски по размеру слоя).

Рисование прямоугольников, прямоугольников со скругленными углами, квадратов и квадратов со скругленными углами

1. Выберите инструмент «Прямоугольник» или «Прямоугольник со скругленными углами» и выполните одно из приведенных ниже действий.
   • Чтобы нарисовать прямоугольник или прямоугольник со скругленными углами, перетащите курсор по диагонали.
   • Чтобы нарисовать квадрат или квадрат со скругленными углами, перетащите курсор по диагонали, удерживая нажатой клавишу SHIFT.

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

• Для увеличения или уменьшения скругления углов нажмите клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ или прокрутите колесико мыши вперед или назад.
• Чтобы установить скругление углов на минимум или максимум, нажмите клавишу СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО.

3. Завершите рисование, отпустив кнопку мыши. При рисовании квадрата или квадрата со скругленными углами отпустите клавишу SHIFT после отпускания кнопки мыши.

Квадраты создаются в соответствии с попиксельной пропорцией композиции. Если значение пропорций пиксела композиции отлично от 1, квадраты отображаются на панели «Композиция» в квадратной форме, только если кнопка «Вкл./выкл. коррекцию пропорций пиксела» нажата в нижней части панели композиции.

Рисование эллипсов или кругов

1. Выберите инструмент «Эллипс» и выполните одно из указанных ниже действий.
   • Чтобы нарисовать эллипс, перетащите курсор по диагонали.
   • Чтобы нарисовать круг, перетащите курсор по диагонали, удерживая клавишу SHIFT.
2. Отпустите кнопку мыши, чтобы завершить рисование. При рисовании круга отпустите клавишу SHIFT после отпускания кнопки мыши.

Круги создаются в соответствии с пропорциями пиксела композиции. Если значение пропорций пиксела отлично от 1, круги отображаются на панели «Композиция» в форме круга, только если кнопка «Вкл./выкл. коррекцию пропорций пиксела» нажата в нижней части панели композиции.