Trim Paths

3 min read

Trim vägar låter dig animera hur mycket av en stroke är synlig, skapa “draw-on” effekter där linjer verkar dras i realtid. Detta är en av de mest populära teknikerna i rörelsegrafik för att avslöja text, illustrationer och diagram.

Path with partial trim visible
A väg med trimEnd inställd på 0,5, visar endast den första halvan av stroke

Hur det fungerar

Varje väg har tre trimma egenskaper:

Fastighet Range Beskrivning
trimStart 0 - 1 Där den synliga delen börjar (0 = banstart)
trimEnd 0 - 1 Där den synliga delen slutar (1 = vägen slut)
trimOffset 0 - 1 Skift det synliga fönstret längs vägen

När trimStart = 0 och trimEnd = 1 är hela vägen synlig (standard). Ändra dessa värden avslöjar eller döljer delar av stroke.

Draw-On Effect

Den vanligaste användningen: en stroke som verkar dra sig själv.

  1. Skapa en väg eller form med en synlig stroke
  2. Lägg till keyframe animation:
    • Vid tidpunkten 0: trimEnd = 0 (inget synligt)
    • Vid tidpunkten 2: trimEnd = 1 (fullt dragen)
  3. Spela tidslinjen för att se vägen dra sig själv

Detta fungerar särskilt bra med:

  • Cursive text skapad med Cursive Font-systemet
  • Handdragna illustrationer gjorda med ritverktyget
  • Diagramkontakter* för animerade flödesscheman

Partiell reveal

Visa bara en del av en väg:

  • Ange trimStart = 0.2 och trimEnd = 0.8 för att visa mitten 60%
  • Animera båda värdena för att expandera eller kontraktera det synliga avsnittet
  • De dolda delarna är helt osynliga (inte bara transparenta)

Skjutfönster

Skapa ett segment som rör sig längs vägen:

  1. Ange en fast fönsterstorlek: trimStart = 0, trimEnd = 0.3
  2. Animera trimOffset från 0 till 1
  3. Det synliga segmentet glider längs hela vägen längd

Detta skapar effekter som:

  • Loading indikatorer
  • Scanning/tracing animationer
  • Race track eller progress line effekter

Kompatibla objekt

Trim vägar arbetar med:

Föremålstyp Anteckningar
Vägen Linjer, kurvor, frihandsritningar
Compound Paths Komplexa former med flera undervägar
Grupper Gäller alla vägar inom gruppen
Maskerade grupper Fungerar med föremål som har masker tillämpade

*Tips:*****Tips:*För bästa dragningseffekter med text, användCursive Font-systemet. Det skapar enstaka textvägar som är idealiska för trimbananimation.

Kombinera med andra funktioner

  • Keyframe Editor - Animera trim egenskaper över tiden med anpassad lättnad
  • Relationer - Använd driven_by för att länka trimvärden till andra objektegenskaper
  • Time Expressions - Använd matematiska uttryck för att skapa komplexa trimmönster

Tips

  1. Använd easeOut* för dragningseffekter - det ger en naturlig nedbrytning i slutet
  2. Hålla stroke synliga - Trim vägar påverkar bara stroke vägar, inte fyllningar
  3. Check stroke width - Tjockare stroke ser bättre ut för dragning animationer
  4. *Stagger flera vägar - Använd tidskompensationer för att dra vägar i sekvens
  5. Förhandsgranskning med full fart - Trim animationer kan känna sig annorlunda med långsam vs. normal hastighet

*Related: Keyframe Editor | Font Studio | Animationer