Trimmwege

3 min read

Mit Trimmpfaden können Sie animieren, wie viel von einem Strich sichtbar ist, wodurch “Zeichnungseffekte” entstehen, bei denen Linien in Echtzeit gezeichnet werden. Dies ist eine der beliebtesten Techniken in Bewegungsgrafiken zum Aufdecken von Text, Illustrationen und Diagrammen.

Path with partial trim visible
A Pfad mit trimEnd auf 0,5 gesetzt, zeigt nur die erste Hälfte des Strichs

Wie es funktioniert

Jeder Pfad hat drei trim Eigenschaften:

Eigentum Reichweite Beschreibung
trimStart 0 - 1 Wo der sichtbare Teil beginnt (0 = Pfadbeginn)
trimEnde 0 - 1 Wo der sichtbare Teil endet (1 = Pfadende)
trimOffset 0 - 1 Verschiebt das sichtbare Fenster entlang des Pfades

Bei trimStart = 0 und trimEnd = 1 ist der vollständige Pfad sichtbar (Standard). Das Ändern dieser Werte zeigt oder verbirgt Teile des Strichs.

Draw-On-Effekt

Die häufigste Verwendung: ein Strich, der sich selbst zu zeichnen scheint.

  1. Erstellen Sie einen Weg oder eine Form mit einem sichtbaren Strich
  2. Keyframe-Animation hinzufügen:
    • Zum Zeitpunkt 0: trimEnd = 0 (nichts sichtbar)
    • Zum Zeitpunkt 2: trimEnd = 1 (vollständig gezogen)
  3. Spielen Sie die Timeline, um zu sehen, wie sich der Pfad selbst zieht

Dies funktioniert besonders gut mit:

  • Cursive text erstellt mit dem Cursive Font System
  • Handgezeichnete Illustrationen mit dem Zeichenwerkzeug
  • Diagrammverbinder für animierte Flussdiagramme

Teilweise Offenlegung

Zeigen Sie nur einen Teil eines Pfades:

  • Setzen Sie trimStart = 0.2 und trimEnd = 0.8, um die mittleren 60% anzuzeigen
  • Animieren beider Werte, um den sichtbaren Abschnitt zu erweitern oder zu kontrahieren
  • Die versteckten Teile sind völlig unsichtbar (nicht nur transparent)

Schiebefenster

Erstellen Sie ein Segment, das sich entlang des Pfades bewegt:

  1. Feste Fenstergröße: trimStart = 0, trimEnd = 0.3
  2. Animate trimOffset von 0 bis 1
  3. Das sichtbare Segment gleitet entlang der gesamten Weglänge

Dies erzeugt Effekte wie:

  • Ladeanzeiger
  • Scanning/Tracing Animationen
  • Rennstrecke oder Progress Line Effekte

Kompatible Elemente

Trim Paths arbeiten mit:

Art der Position Anmerkungen
Wege Linien, Kurven, Freihandzeichnungen
Verbundpfade Komplexe Formen mit mehreren Teilpfaden
Gruppen Gilt für alle Pfade innerhalb der Gruppe
Maskierte Gruppen Funktioniert mit Elementen, die Masken angewendet haben

Tipp: Für die besten Draw-on-Effekte mit Text verwenden Sie das Cursive Font-System. Es erstellt Single-Stroke-Textpfade, die sich ideal für die Trimmpfadanimation eignen.

Kombination mit anderen Features

  • Keyframe Editor - Animate trimmen Eigenschaften im Laufe der Zeit mit benutzerdefinierten Lockerung
  • Beziehungen - Verwenden Sie driven_by, um Trimmwerte mit anderen Objekteigenschaften zu verknüpfen
  • Zeitausdrücke - Verwenden Sie mathematische Ausdrücke, um komplexe Trimmmuster zu erstellen

Tipps

  1. Verwenden Sie easeOut für Draw-on-Effekte - es gibt eine natürliche Verzögerung am Ende
  2. Halten Sie Striche sichtbar - Trimmpfade betreffen nur Strichpfade, nicht Füllungen
  3. Hinweis auf Strichbreite - Dickere Striche sehen für Draw-On-Animationen besser aus
  4. Stagger mehrerer Pfade - Verwenden Sie Zeitversätze, um Pfade nacheinander zu zeichnen
  5. Vorschau bei voller Geschwindigkeit - Trimm-Animationen können sich bei langsamer vs. normaler Geschwindigkeit anders anfühlen

Related: Keyframe Editor | Font Studio | Animationen