Обрезать пути

3 min read

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

Q Path with partial trim visibleQ Путь
A с комплектацией trimEnd установлен на 0,5, показывая только первую половину хода
Q

Как это работает

Каждый путь имеет три свойства отделки:

Собственность Диапазон Описание
тримстарт 0 - 1 Где начинается видимая часть (0 = начало пути)
отделка 0 - 1 Где заканчивается видимая часть (1 = конец пути)
трим-оффсет 0 - 1 Сдвинет видимое окно по тропинке

Когда trimStart = 0 и trimEnd = 1, весь путь виден (по умолчанию). Изменение этих значений выявляет или скрывает части инсульта.

Эффект рисования

Наиболее распространенное использование: инсульт, который, кажется, рисует сам себя.

  1. Создайте путь или форму с видимым ходом
  2. Добавить анимацию Keyframe:
    • Время 0: trimEnd = 0 (ничего не видно)
    • Время 2: trimEnd = 1 (полностью нарисовано)
  3. Играйте временную шкалу, чтобы увидеть, как путь рисует себя

Особенно хорошо это работает с:

  • Курсивный текст, созданный с помощью системы Cursive Font
  • Нарисованные вручную иллюстрации, выполненные с помощью инструмента рисования
  • Разъемы диаграмм для анимированных блок-схем

Частичное раскрытие

Покажите только часть пути:

  • Установите trimStart = 0.2 и trimEnd = 0.8, чтобы показать средние 60%
  • Оживить оба значения для расширения или сокращения видимого участка
  • Скрытые части полностью невидимы (не только прозрачны)

Раздвижное окно

Создайте сегмент, который движется по пути:

  1. Установите фиксированный размер окна: trimStart = 0, trimEnd = 0.3
  2. Анимированный trimOffset от 0 до 1
  3. Видимый сегмент скользит по всей длине пути

Это создает такие эффекты, как:

  • Показатели нагрузки
  • Сканирование / отслеживание анимации
  • Следы гонки или эффекты линии прогресса

Совместимые элементы

Трассы Trim работают с:

Тип элемента Заметки
Пути Линии, кривые, рисунки от руки
Сложные пути Сложные формы с несколькими подпутьями
Группы Применяется ко всем путям внутри группы
Маскированные группы Работает с предметами, на которые нанесены маски
Q

Совет: Для лучших эффектов рисования с текстом используйте систему Cursive Font. Он создает однотактные текстовые дорожки, которые идеально подходят для анимации пути отделки.

Q

Сочетание с другими функциями

  • Keyframe Editor - анимированные свойства отделки с течением времени с пользовательским смягчением
  • Связи - Используйте driven_by для привязки значений отделки к другим свойствам элемента
  • Time Expressions - Используйте математические выражения для создания сложных шаблонов

Советы

  1. Использовать easyOut для притягивающих эффектов - это дает естественное замедление в конце
  2. Держите штрихи видимыми - Обрезные пути влияют только на пройденные пути, а не заполняются
  3. Проверьте ширину хода - более толстые ходы выглядят лучше для рисования анимации
  4. Установка нескольких путей - использование смещения времени для последовательного рисования путей
  5. Превью на полной скорости ** - анимация Trim может чувствовать себя по-другому на медленной и нормальной скорости

Связанный: [Keyframe Editor] (/features/keyframes) | [Font Studio] (/features/font-studio) | [Animations] (/features/animations)