Trim Paths

3 min read

Trim utak lehetővé teszi animálni, hogy mennyi a stroke látható, létrehozva “vonás-on” hatások, ahol a vonalak úgy tűnik, hogy a rajzolt valós időben. Ez az egyik legnépszerűbb technikák a mozgás grafika felfedésére szöveg, illusztrációk, és ábrák.

Path with partial trim visible
A útvonal a trimEnd 0,5-re állítva, a stroke
-nak csak az első felét mutatva

Hogyan működik

Minden út három szerkezeti tulajdonságokkal rendelkezik:

Tulajdonság Tartomány Leírás
trimStart 0 - 1 Ahol a látható rész elkezdődik (0 = útvonal indítása)
trimEnd 0 - 1 Ahol a látható rész véget ér (1 = útvonal vége)
trimOffset 0 - 1 A látható ablak eltolása az út mentén

Ha trimStart = 0 és trimEnd = 1, a teljes útvonal látható (alapértelmezés). Ezen értékek megváltoztatása felfedi vagy elrejti a stroke részeit.

Draw- on effect

A leggyakoribb használat: egy stroke, amely úgy tűnik, hogy húzza magát.

  1. Útvonal vagy alakzat létrehozása látható szélütéssel
  2. Keyframe animáció hozzáadása:
    • A 0 időpontban: trimEnd = 0 (semmi látható)
    • A 2. időpontban: trimEnd = 1 (teljesen kihúzva)
  3. Lejátssza az idővonalat, hogy az útvonal húzza magát

Ez különösen jól működik:

      • Cursive text * * created with the Cursive Font system
      • Kézzel rajzolt illusztrációk * * a rajzoló eszközzel készítve
      • Diagram csatlakozók * * animációs folyamatábrák

Részleges felfedés

Az útvonalnak csak egy része látható:

  • trimStart = 0.2 és trimEnd = 0.8 beállítása a középső 60%
  • Mindkét érték animációja a látható szakasz bővítéséhez vagy összehúzásához
  • A rejtett részek teljesen láthatatlanok (nem csak átlátszó)

Csúsztató ablak

Hozzon létre egy szegmenst, amely az út mentén halad:

  1. Rögzített ablak mérete: trimStart = 0, trimEnd = 0.3
  2. Animate trimOffset 0 és 1 között
  3. A látható szegmens a teljes útvonalhossz mentén halad

Ez olyan hatásokat eredményez, mint:

  • Tárolókijelzők
  • Szkennelés / nyomon követés animációk
  • Versenypálya vagy haladási vonal hatásai

Kompatibilis tételek

Trim utak működik:

Tételtípus Megjegyzések
Paths Vonalak, ívek, szabadkézi rajzok
Tömegpástétom Komplex formák több részútvonallal
Csoportok A csoporton belüli összes útvonalra vonatkozik
Maszkos csoportok Maszkkal ellátott tárgyakkal működik
    • Tip: * * A legjobb szöveges hatásokhoz használja a * * Cursive Font * * rendszert. Együtemű szöveges útvonalakat hoz létre, amelyek ideálisak a szerelési útvonalanimációhoz.

Más jellemzők kombinálása

      • Keyframe Editor * * - Animate trim ingatlanok idővel egyéni könnyítéssel
      • Relations * * - Használja az driven_by-t, hogy linkre díszítési értékeket más elem tulajdonságait
      • Time Expressions * * - Matek kifejezések használata komplex kárpitminták létrehozásához

Tippek

      • Használja az easeOut * * a vontatási hatásokra - ez ad egy természetes lassulást a végén
      • Tartsa stroke látható * * - Trim utak csak befolyásolja stroked utak, nem kitöltések
      • Check stroke width * * - Thicker stroke look better for trraw- on animations
      • Stagger multiple paths * * - Használjuk az idő kompenzációkat, hogy rajzoljunk ösvényeket sorrendben
      • Preview at full speed * * - Trim animations can feel different at slow vs. normal speed
    • Kapcsolódó: * * [Keyframe Editor] (/features/keyframes)