Ścieżki przyciemniane

3 min read

Ścieżki przyciemniające pozwalają animować, jak dużo udaru jest widoczne, tworząc efekt “draw-on”, gdzie linie wydają się rysować w czasie rzeczywistym. Jest to jedna z najbardziej popularnych technik grafiki ruchu do ujawniania tekstu, ilustracji i diagramów.

Path with partial trim visible Ścieżka
A z trymEndem ustawionym na 0.5, pokazująca tylko pierwszą połowę stroke

Jak to działa

Każda ścieżka ma trzy właściwości wykończeniowe:

Własność Zakres Opis
trimStart 0 - 1 Gdzie zaczyna się widoczna część (0 = początek ścieżki)
trimEnd 0 - 1 Jeżeli widoczna część kończy się (1 = koniec ścieżki)
trimOffset 0 - 1 Przesuwa widoczne okno wzdłuż ścieżki

Kiedy trimStart = 0 i trimEnd = 1, pełna ścieżka jest widoczna (domyślnie). Zmiana tych wartości ujawnia lub ukrywa części udaru.

Rysunka - na skutek

Najczęstsze zastosowanie: udar, który wydaje się rysować.

  1. Utwórz ścieżkę lub kształt z widocznym pociągnięciem
  2. Dodaj animację ramki klawiszy:
    • W czasie 0: trimEnd = 0 (nic widocznego)
    • W czasie 2: trimEnd = 1 (w pełni narysowane)
  3. Zagraj w linię czasu, aby zobaczyć ścieżkę rysować się

Działa to szczególnie dobrze z:

      • Cursive text * * created with the Cursive Font system
      • Ilustracje ręcznie rysowane * * wykonane z narzędzia rysującego
      • Złącza diagramowe * * dla animowanych wykresów

Częściowe objawienie

Pokaż tylko część ścieżki:

  • Ustaw trimStart = 0.2 i trimEnd = 0.8, aby pokazać środek 60%
  • Animować obie wartości do rozszerzenia lub zawarcia widocznej sekcji
  • Ukryte porcje są całkowicie niewidoczne (nie tylko przezroczyste)

Przesuwane okno

Tworzenie segmentu, który porusza się wzdłuż ścieżki:

  1. Ustaw stały rozmiar okna: trimStart = 0, trimEnd = 0.3
  2. Animować trimOffset od 0 do 1
  3. Widoczny odcinek przesuwa się wzdłuż całej długości ścieżki

Powoduje to takie efekty jak:

  • Wskaźniki obciążenia
  • Animacje skanowania / śledzenia
  • Efekty toru wyścigowego lub linii postępu

Kompatybilne elementy

Ścieżki przycinania działają z:

Rodzaj pozycji Uwagi
Ścieżki Linie, krzywe, rysunki
Składane Ścieżki Złożone kształty z wieloma podścieżkami
Grupy Dotyczy wszystkich ścieżek wewnątrz grupy
Grupy zamaskowane Działa z przedmiotami, które mają maski stosowane
    • Tip: * * Aby uzyskać najlepsze efekty z tekstem, użyj systemu * * Cursive Font * *. Tworzy ścieżki tekstowe, które są idealne do animacji ścieżki wykończenia.

Połączenie z innymi funkcjami

      • Keyframe Editor * * - Animate właściwości wykończenia w czasie z niestandardowym luzowania
      • Relacje * * - Użyj driven_by, aby połączyć wartości wykończenia z innymi właściwościami elementów
      • Time Expressions * * - Użyj wyrażeń matematycznych, aby stworzyć złożone wzory wykończenia

Wskazówki

      • Use easeOut * * for draw-on effects - daje naturalne spowolnienie na końcu
      • Keep sumps visible * * - Ścieżki przyciemniane wpływają tylko na ścieżki głaskane, nie wypełnia
      • Sprawdź szerokość udaru * * - Grubsze pociągnięcia wyglądają lepiej dla ciągnących animacji
      • Stagger wiele ścieżek * * - Użyj przesunięcia czasu, aby narysować ścieżki w kolejności
      • Preview at full speed * * - Trim animations can feel different at slow vs normal speed
    • Related: * * [Keyframe Editor] (/features/keyframes) Related 124; [Font Studio] (/features/font-studio) Related 124; [Animations] (/features/animations)