Создайте текстовый слой и примените меняющийся шрифт из панели Символ.
Подробнее о работе с осями меняющегося шрифта в After Effects, включая способы доступа к ним, добавления в качестве аниматоров текста, использования инструментов выбора и многое другое.
На этой странице:
- Для установки меняющегося шрифта найдите файлы с расширениями .ttf, .otf или .woff2. Многие шрифты Adobe Fonts включают меняющиеся версии (отмеченные как «Меняющиеся»), и вы можете использовать фильтр Технология шрифтов для их быстрого поиска. Вы также можете найти бесплатные меняющиеся шрифты через такие ресурсы, как Шрифты Google и другие репозитории с открытым исходным кодом.
- Изучите рекомендуемые практики для дизайна с осями меняющихся шрифтов, эффективной настройки анимации текста и оптимизации технологического процесса анимации.
-
Когда вы открываете выпадающее меню Шрифт, можно использовать значок Показать меняющиеся шрифты , чтобы отфильтровать список и отобразить только шрифты с переменными осями.
Используйте фильтр «Показать переменные шрифты» в меню «Шрифт», чтобы отображались только переменные шрифты. Используйте фильтр «Показать переменные шрифты» в меню «Шрифт», чтобы отображались только переменные шрифты. -
Выберите текстовый слой, затем на панели Свойства в разделе Текст выберите значок Меняющийся шрифт , чтобы открыть всплывающее окно со всеми доступными осями для текущего шрифта.
Используйте значок «Меняющийся шрифт» для отображения всех доступных осей выбранного шрифта. Используйте значок «Меняющийся шрифт» для отображения всех доступных осей выбранного шрифта. -
Всплывающее окно отобразит следующее для настройки значения с помощью элемента управления скраббингом:
- Название оси: Описательное название. Например, Толщина и Ширина.
- Текущее значение: Текущее значение оси.
Настройте значение оси с помощью элемента управления скраббингом для работы с толщиной, шириной или другими переменными свойствами. Настройте значение оси с помощью элемента управления скраббингом для работы с толщиной, шириной или другими переменными свойствами. Если у вас выделен текст (в режиме редактирования текста), оси показывают значения для выделенных символов, а если ничего не выделено, оси показывают значения для первого символа. Смешанные значения в выделении покажут диапазон или укажут вариацию
-
Перетащите влево или вправо числовые значения для их настройки и предварительно просмотрите изменения на панели Композиция. Кроме того, можно выбрать значение для входа в режим ввода, ввести нужное число и нажать ENTER для применения.
Каждая ось имеет минимальное и максимальное значение, определенное шрифтом, и перетаскивание или ввод ограничены допустимыми диапазонами. Можно навести курсор на активный текст для просмотра диапазона.
При наведении курсора на активный текст отображается минимальное и максимальное значение, определенное шрифтом. При наведении курсора на активный текст отображается минимальное и максимальное значение, определенное шрифтом. -
Предварительно просмотрите изменения, которые немедленно отражаются на панели Композиция. Когда изменения ширины или интервалов влияют на макет, текст автоматически подстраивается.
Если вы хотите сделать первую букву слова жирнее, создайте вариации толщины в пределах одного слова или разработайте пользовательские лигатуры или комбинации символов, меняющиеся шрифты позволяют вам это сделать.
-
Дважды щелкните текстовый слой для входа в режим редактирования текста.
-
Выберите конкретные символы, которые хотите изменить, и откройте всплывающее окно Меняющийся шрифт на панели Свойства, выбрав значок .
Используйте значок «Меняющийся шрифт» для отображения всех доступных осей выбранного шрифта. Используйте значок «Меняющийся шрифт» для отображения всех доступных осей выбранного шрифта. -
Настройте значения осей так, чтобы они применялись только к выбранным символам.
ПримечаниеЕсли не выбрать конкретный символ, значения будут применены только к первому символу.
Текстовые аниматоры позволяют создавать ключевые кадры значений осей во времени и применять их к определенным диапазонам символов с помощью инструментов выбора. Существует несколько способов добавления аниматоров осей.
- Использование меню Текстовый слой при редактировании текста
- Использование функции Добавить аниматор на временной шкале
- Использование панели Свойства
Использование меню текстового слоя при редактировании текста
-
Дважды щелкните текстовый слой для входа в режим редактирования.
-
Выберите и выделите символы, которые хотите анимировать, или не выбирайте ничего для всех символов.
-
Щелкните правой кнопкой мыши на выделенном тексте на панели Композиция, затем выберите Анимировать текст > Оси меняющегося шрифта > [Название оси].
Выделите текст на панели «Композиция» и используйте меню «Анимировать текст» для просмотра доступных осей меняющегося шрифта. Выделите текст на панели «Композиция» и используйте меню «Анимировать текст» для просмотра доступных осей меняющегося шрифта. -
Создается новый текстовый аниматор с выбранным свойством оси.
Использование Add Animator на временной шкале
-
Выберите текстовый слой на панели Таймлайн и разверните ее, чтобы отобразить кнопку Анимировать.
-
Выберите кнопку Анимировать , затем выберите Оси меняющегося шрифта > [Имя оси].
Параметр «Оси меняющегося шрифта» в разделе «Анимировать» позволяет анимировать свойства шрифта, такие как толщина или ширина. Параметр «Оси меняющегося шрифта» в разделе «Анимировать» позволяет анимировать свойства шрифта, такие как толщина или ширина. -
Автоматически создается новый аниматор с селектором диапазона.
Используйте панель «Свойства»
-
Выберите текстовый слой на панели Временная шкала и перейдите на панель Свойства.
-
Перейдите в раздел Анимация текста и выберите Добавить аниматор > Оси меняющегося шрифта > [Имя оси].
Кнопка «Добавить аниматор» выбрана на панели «Свойства», чтобы применить элементы управления анимацией к свойствам текста. Кнопка «Добавить аниматор» выбрана на панели «Свойства», чтобы применить элементы управления анимацией к свойствам текста. -
Добавляется новый аниматор с инструментом выбора диапазона.
При добавлении нового аниматора After Effects создает новую группу Аниматор текста, которая включает свойство Ось шрифта и Инструмент выбора диапазона, при этом начальное значение устанавливается равным текущему значению оси выбранных символов.
При добавлении аниматора оси меняющегося шрифта After Effects создает следующую иерархию:
Создание ключевых кадров для значений осей
-
Переместите индикатор текущего времени (CTI) на нужное время на панели временной шкалы.
-
Выберите значок секундомера рядом со свойством оси, чтобы создать первый ключевой кадр с текущим значением.
-
Переместите индикатор текущего времени на новое время и используйте скраббинг или ручной ввод, чтобы изменить значение для оси и создать новый ключевой кадр.
Добавьте ключевые кадры для свойства «Ширина оси шрифта» текстового слоя, чтобы анимировать изменения толщины со временем. Добавьте ключевые кадры для свойства «Ширина оси шрифта» текстового слоя, чтобы анимировать изменения толщины со временем.
Примеры анимации
Попробуйте эти примеры, если работаете с отдельными осями:
|
Пример |
Изменения времени и значений |
Результат |
|---|---|---|
|
Плавный переход насыщенности |
|
Текст постепенно становится жирнее |
|
Эффект сжатия по ширине |
|
Текст сжимается, а затем возвращается |
|
Анимация наклона или курсива |
|
Текст набран курсивом |
Вы можете добавить несколько аниматоров осей к одному текстовому слою, добавив сначала первую ось, например Толщина, затем вторую ось, например Ширина, и третью ось, например Наклон, и создать ключевые кадры для каждой независимо или вместе. Попробуйте следующие примеры для комбинирования нескольких осей:
|
Пример |
Изменения времени и значений |
Результат |
|---|---|---|
|
Анимация динамического логотипа |
Аниматор 1 — Ось шрифта «Толщина»
Аниматор 2 — Ось шрифта «Ширина»
|
Текст одновременно становится жирным и широким |
Свойство Интервалы меняющегося шрифта управляет тем, как After Effects настраивает межбуквенные интервалы при анимации осей шрифта, таких как толщина или ширина.
При анимации настроек шрифта, таких как толщина или ширина, буквы могут становиться шире или уже. After Effects может автоматически настраивать интервалы между буквами, чтобы все выглядело аккуратно, и эта настройка позволяет выбрать, когда и как происходят эти исправления интервалов.
-
Разверните группу свойств Текст вашего текстового слоя.
-
Добавьте ось меняющегося шрифта для выполнения анимации.
-
В разделе Дополнительные параметры используйте раскрывающееся меню Интервалы меняющегося шрифта, чтобы выбрать один из следующих вариантов:
- Адаптивный: Применяет компенсацию трекинга для каждого символа при необходимости для сохранения естественных интервалов при изменении осей шрифта.
- Для каждого символа: Всегда применяет компенсацию трекинга для каждого символа.
- По умолчанию: Полностью отключает компенсацию отслеживания для каждого символа. Символы сохраняют исходные интервалы, несмотря на изменения оси шрифта. Полезно для творческих эффектов, когда вы хотите, чтобы естественные изменения ширины шрифта влияли на общий макет текста.
Селекторы управляют тем, какие символы затрагивает аниматор и насколько сильно. Аниматоры осей меняющегося шрифта работают со всеми типами селекторов.
Селектор диапазона (по умолчанию)
Инструмент выбора диапазона определяет непрерывный диапазон символов для выполнения анимации. Вот некоторые из ключевых свойств:
|
Свойство |
Описание |
Значения |
|---|---|---|
|
Начало и конец |
Определяет, какие символы затрагиваются |
0% – 100% (или на основе индекса/единиц)
|
|
Смещение |
Сдвигает диапазон вдоль текста, и анимируя его создает эффекты «перемещения» |
Значения: -∞ до +∞ |
|
Величина |
Управляет силой эффекта |
0% – 100%
|
Вот несколько примеров, которые можно попробовать:
|
Пример |
Настройка оси шрифта |
Инструмент выбора диапазона |
Ключевые кадры |
Результат |
|---|---|---|---|---|
|
Эффект стирания толщины |
Толщина: 900 (Черный) |
|
Конец с ключевыми кадрами от 0% до 100% |
Толщина полужирного шрифта «рисует» по тексту слева направо |
|
Бегущая волна ширины |
Ширина: 150% (Расширенная) |
|
Смещение, анимированное со временем |
Расширенная ширина проходит через текст |
Форма и замедление
|
Свойство |
Параметры |
Описание |
|---|---|---|
|
Форма |
Квадрат |
Четкая граница между затронутыми и незатронутыми символами |
|
Форма |
Нарастание |
Постепенное увеличение в диапазоне |
|
Форма |
Спад |
Постепенное уменьшение из диапазона |
|
Форма |
Треугольник |
Плавнее и прерывистее |
|
Форма |
Скругленные |
Плавная колоколообразная кривая |
|
Форма |
Плавно |
Очень плавные переходы |
|
Плавность |
Высокий уровень замедления |
Очень плавные переходы |
|
Плавность |
Низкий уровень замедления |
Более резкие переходы |
Вот пример, который можно попробовать:
|
Пример |
Настройка оси шрифта |
Инструмент выбора диапазона |
Дополнительные настройки |
Результат |
|---|---|---|---|---|
|
Плавный градиент толщины |
Толщина оси шрифта: 900 |
|
|
Текст начинается с полужирного шрифта и постепенно становится светлее до базовой толщины |
Инструмент выбора «Волнистый»
Применяет случайные вариации к значениям осей для каждого символа. Вот некоторые из ключевых свойств:
|
Свойство |
Описание |
Результаты |
|---|---|---|
|
Максимальная величина / Минимальная величина |
Максимальное и минимальное отклонение от базового значения |
Создает случайные колебания для каждого символа |
|
Волнения/с |
Скорость изменения случайных значений |
Более высокие значения означают более хаотичное движение |
|
Корреляция |
Степень связи соседних символов |
|
|
Временная фаза |
Произвольно выбирает смещение синхронизации для каждого символа |
Добавляет вариант в синхронизацию |
Вот несколько примеров, которые можно попробовать:
|
Пример |
Настройка оси шрифта |
Настройки инструмента выбора «Волнистый» |
Дополнительные настройки |
Результат |
|---|---|---|---|---|
|
Эффект дрожащей толщины |
Насыщенность: 400 (обычная) |
|
|
Вес каждого символа случайно колеблется независимо |
|
Дышащая ширина |
Ширина: 100% (нормальная) |
|
Текст плавно расширяется и сжимается волнами |
Инструмент выбора выражения
Обеспечивает точное математическое управление тем, какие символы затрагиваются, с помощью выражений JavaScript. Величина — это ключевые свойства:
- Выражение возвращает значение, управляющее силой эффекта для каждого символа
- Может получать доступ к индексу символа, позиции, времени и многому другому
Вот несколько примеров, которые можно попробовать:
|
Пример |
Выражение (Количество) |
Ось аниматора |
Результат |
|---|---|---|---|
|
Толщина на основе позиции символа |
// В свойстве Amount селектора выражений: linear(textIndex, 1, textTotal, 0, 100) |
|
Первый символ самый светлый, последний символ самый жирный, линейный градиент |
|
Колеблющийся наклон |
// В свойстве Amount селектора выражений: Math.sin(time * 3 + textIndex * 0.5) * 50 + 50 |
|
Волны наклона проходят через текст по синусоидальному паттерну |
Ниже приведены некоторые часто используемые переменные выражений, а также многие другие, доступные в After Effects:
- textIndex — Индекс текущего символа (начиная с 1)
- textTotal — Общее количество символов
- время - Текущее время композиции
Можно добавить несколько селекторов к одному аниматору для создания сложных эффектов.
-
Разверните аниматор на панели Временная шкала.
-
Выберите раскрывающийся список Add рядом с именем аниматора.
-
Выберите тип инструмента выбора из следующих доступных вариантов:
- Инструмент выбора диапазона
- Инструмент выбора «Волнистый»
- Инструмент выбора выражения
Новый селектор добавляется и объединяется с существующими селекторами. Скорректированные значения Величина перемножаются. Например, Инструмент выбора диапазона на 50%, умноженный на Инструмент выбора «Волнистый» на 80%, дает 40% финального эффекта, обеспечивая плавные переходы между слоями со случайными вариациями.
Вот пример, который можно попробовать для создания плавной волны с вариантами, который объединяет Инструмент выбора диапазона и Инструмент выбора «Волнистый» для создания полужирного волнового эффекта с тонкими случайными колебаниями.
|
Компонентный |
Настройки |
|---|---|
|
Аниматор 1 |
|
|
Инструмент выбора диапазона 1 |
|
|
Инструмент выбора «Волнистый» 1 |
|
Создавайте различные эффекты для разных диапазонов символов. Вот два таких примера:
|
Пример |
Настройки аниматора |
Настройки селектора |
|---|---|---|
|
Первая буква жирная, остальные обычные |
Толщина оси шрифта: 900 (черный) |
Инструмент выбора диапазона:
|
|
Чередующаяся толщина |
Аниматор 1 (Нечетные символы):
Аниматор 2 (Четные символы):
|
Два селектора выражений управляют нечетными/четными символами |
Используйте выражения для связи значений осей с другими свойствами анимации. Вот два примера, которые можно рассмотреть:
1. Толщина, управляемая позицией, создает изменения толщины текста на основе вертикального положения слоя.
// В свойстве «Ось шрифта Толщина»: linear(transform.position[1], 0, thisComp.height, 300, 900)
2. Ширина реагирует на аудио создает толщину текста, ширина реагирует на амплитуду аудио.
// В свойстве «Ось шрифта Ширина»: audioLevel = thisComp.layer("Audio Layer").audio.audioLevels; linear(audioLevel[0], -48, 0, 75, 150)
Когда текстовый Слой содержит несколько шрифтов (смешанное форматирование). В аниматорах текста:
- Аниматор применяет изменения оси для каждого символа на основе шрифта каждого символа
- Если в шрифте символа нет оси, этот символ остается неизменным
- Инструменты выбора диапазона по-прежнему нацелены на диапазоны символов, но эффект зависит от шрифта
Вот простой пример:
- Text: «Hello» (смешанные шрифты)
- «He» использует VariableFont A (имеет ось толщины)
- «llo» использует VariableFont B (нет оси толщины)
- Аниматор: толщина оси шрифта - 900
- Результат: «He» становится полужирным, «llo» без изменений