Trim Paths

3 min read

Trim cesty vám umožní animovat, kolik mrtvice je vidět, což vytváří “tag-on” efekty, kde řádky se zdají být kresleny v reálném čase. To je jedna z nejpopulárnějších technik v pohybu grafiky pro odhalování textu, ilustrace, a diagramy.

Path with partial trim visible
A cesta s trimEnd nastavena na 0,5, ukazuje pouze první polovinu stroke

Jak to funguje

Každá cesta má tři vlastnosti:

Vlastnost Rozsah Popis
trimStart 0 - 1 Kde začíná viditelná část (0 = začátek cesty)
trimEnd 0 - 1 Pokud viditelná část končí (1 = konec cesty)
trimoffset 0 - 1 Přesune viditelné okno podél cesty

Když trimStart = 0 a trimEnd = 1, celá cesta je viditelná (přednastaveno). Změna těchto hodnot odhalí nebo skryje části zdvihu.

Odsávání na efekt

Nejčastější použití: mrtvice, která se zdá čerpat sám.

  1. Vytvořit cestu nebo tvar s viditelným zdvihem
  2. Přidat animaci klíčového rámce:
    • V čase 0: trimEnd = 0 (nic viditelného)
    • V čase 2: trimEnd = 1 (plně nakresleno)
  3. Přehrát časovou osu vidět cestu čerpat sám

To funguje zejména dobře s:

      • Cursive text * * created with the Cursive Font system
      • Hand- drawn ilustrations * * made with the Drawing tool
      • Konektory diagramu * * pro animované grafy

Částečné objevení

Zobrazit pouze část cesty:

  • Nastavit trimStart = 0.2 a trimEnd = 0.8 ukázat střední 60%
  • Animujte obě hodnoty pro rozšíření nebo uzavření viditelné sekce
  • Skryté porce jsou zcela neviditelné (nejen průhledné)

Posuvné okno

Vytvořit segment, který se pohybuje podél cesty:

  1. Nastavit pevnou velikost okna: trimStart = 0, trimEnd = 0.3
  2. Animace trimOffset od 0 do 1
  3. Viditelný segment sklouzne po celé délce cesty

To vytváří efekty jako:

  • Ukazatele zatížení
  • Snímání / sledování animací
  • Race track nebo progress line efekty

Kompatibilní položky

Trim cesty pracují s:

Typ položky Poznámky
Cesty Čáry, křivky, freehand výkresy
Skládací cesty Komplexní tvary s více podcestami
Skupiny Platí pro všechny cesty v rámci skupiny
Maskované skupiny Pracuje s předměty, které mají masky

Tip: Pro nejlepší efekty s textem použijte * * Cursive Font * *. Vytváří jednotaktní textové cesty, které jsou ideální pro animaci cestiček.

Kombinace s dalšími funkcemi

      • Keyframe Editor * * - Animate trim vlastnosti v průběhu času s vlastní uvolňování
      • Relations * * - Použijte driven_by pro spojení hodnot trim s jinými vlastnostmi prvku
      • Time Expressions * * - Pomocí matematických výrazů vytvořte komplexní vzory trimů

Tipy

      • Použít easeOut * * pro sage-on efekty - to dává přirozené zpomalení na konci
      • Keep tags visible * * - Trim pages only affect stroked steps, not fills
      • Zkontrolovat šířku zdvihu * * - Silnější tahy vypadají lépe pro sage-on animace
      • Stagger multiple steps * * - Použít časové posuny kreslit cesty v pořadí
      • Náhled při plné rychlosti * * - Trim animace se mohou cítit jinak při pomalé vs normální rychlosti
    • Související: * * [Editor klávesnice] (/features/keyframes)