Trim stier

4 min read

Trim stier lade dig animere, hvor meget af et slagtilfælde er synlig, skabe “draw-on” effekter, hvor linjer synes at blive trukket i realtid. Dette er en af de mest populære teknikker i bevægelse grafik til at afsløre tekst, illustrationer og diagrammer.

Path with partial trim visible
A sti med trimEnd sat til 0,5, viser kun den første halvdel af stroke

Sådan virker det

Hver sti har tre trim egenskaber:

Ejendom Område Varebeskrivelse
trimStart 0 - 1 Hvor den synlige del begynder (0 = stiens start)
trimEnd 0 - 1 Hvor den synlige del slutter (1 = sti ende)
trimOffset 0 - 1 Skifter det synlige vindue langs stien

Når trimStart = 0 og trimEnd = 1, er den fulde sti synlig (standard). Ændring af disse værdier afslører eller skjuler dele af slagtilfælde.

Træk - på effekt

Den mest almindelige brug: et slagtilfælde, der synes at tegne sig selv.

  1. Opret en sti eller form med et synligt slagtilfælde
  2. Tilføj keyframe animation:
    • Til tiden 0: trimEnd = 0 (intet synligt)
    • På tidspunkt 2: trimEnd = 1 (fuldt tegnet)
  3. Afspil tidslinjen for at se stien trække sig selv

Dette virker især godt med:

      • Kursiv tekst * * oprettet med kursiv skrifttype system
      • Håndtegnede illustrationer * * lavet med tegneværktøjet
      • Diagram stik * * for animerede flowdiagrammer

Delvis tilbagetrækning

Vis kun en del af en sti:

  • Sæt trimStart = 0.2 og trimEnd = 0.8 for at vise de midterste 60%
  • Animér begge værdier for at udvide eller trække det synlige afsnit
  • De skjulte portioner er helt usynlige (ikke bare gennemsigtige)

Skydevindue

Opret et segment, der bevæger sig langs stien:

  1. Sæt en fast vinduesstørrelse: trimStart = 0, trimEnd = 0.3
  2. Animér trimOffset fra 0 til 1
  3. Det synlige segment glider langs hele stiens længde

Dette skaber effekter som:

  • Indlæsningsindikatorer
  • Scanning / sporing af animationer
  • Race spor eller statuslinje effekter

Kompatible elementer

Trim stier arbejde med:

Varetype Bemærkninger
Stier Linjer, kurver, frihåndstegninger
Kompound Plaths Komplekse former med flere sub-stier
Grupper Gælder for alle stier i gruppen
Maskede grupper Arbejder med emner, der har anvendt masker
    • Tip: * * For de bedste træk- på effekter med tekst, bruge * * Cursive Font * * system. Det skaber enkelt-slagtilfælde tekst stier, der er ideelle til trim sti animation.

Kombination med andre funktioner

      • Keyframe Editor * * - Animere trim egenskaber over tid med brugerdefinerede lempelse
      • Relationer * * - Brug driven_by til at linke trimværdier til andre elementegenskaber
      • Time Udtryk * * - Brug matematiske udtryk til at skabe komplekse trim mønstre

Tips

      • Brug easeOut * * for træk- on effekter - det giver en naturlig deceleration i slutningen
      • Hold strøgene synlige * * - Trim stier kun påvirke strøg stier, ikke fylder
      • Check stroke bredde * * - Thicker slagtilfælde ser bedre for træk- på animationer
      • Stagger flere stier * * - Brug tid forskudt til at tegne stier i rækkefølge
      • Forhåndsvisning ved fuld hastighed * * - Trim animationer kan føle sig anderledes ved langsom vs. normal hastighed
    • Relateret: * * [Keyframe Editor] (/features/keyframes)