Animacje maski

6 min read

Tworzenie profesjonalnych efektów odkrywania za pomocą animowanych masek. Maski clip zawartość i może animować, aby ujawnić elementy z czasem - idealne dla sekwencji tytułu, przejścia i efekty filmowe.

Dostępne animacje maski

Animacja Wpływ Najlepsze dla
W górę / w dół Zawartość ujawnia się od góry lub od dołu Tytuły tekstu, cytaty
Wytrzyj w lewo / w prawo Poziome ujawnianie Przejścia, ujawnia
Iris Koło rozszerza się od środka Dramatyczne objawienia, skupienie
Iris Out Koło kurczy się do środka Zanikające, przemijające
Maska gwiazd Kształt gwiazdy ujawnia zawartość Playful ujawnia
Maska serca Kształt serca ujawnia zawartość Valentine, motywy miłosne
Kurtyna Otwiera się od środka Efekty sceniczne / teatralne
Przezroczyste chusteczki Angled display Przejścia dynamiczne
Film Skrzynka na listy animate Film- style intros

Używanie szablonów maskujących

Najprostszym sposobem użycia animacji maski jest poprzez szablony:

  1. Otwórz panel szablonów * * (kliknij zakładkę szablonów lub naciśnij T)
  2. Filtr według * * Kategoria: Maskowanie * *
  3. Kliknij szablon do podglądu
  4. Kliknij * * Użyj szablonu * *, aby go zastosować

Dostępne szablony maskujące

Szablon Opis
Rozwiń tekst Linie przesuwają się jeden po drugim
Tekst w dół Linie zjeżdżają w dół
Szczoteczka pozioma Zawartość chusteczek z lewej strony
Iris Reveral Krąg rozszerza się, aby ujawnić
Maska gwiazd Kształt gwiazdy ujawnić
Maska serca Kształt serca ujawnić
Przezroczyste chusteczki Przejście kątowe
Intro kinematyczne Skrzynka na listy w stylu filmowym

Jak działają animacje maskujące

Maski animowane działają poprzez przycinanie zawartości o kształcie zmieniającym się w czasie:

      • Mask Shape * * - Granica klipu (prostokąt, okrąg, gwiazda, serce)
      • Typ animacji * * - Jak maska porusza się (wycierać, tęczówka, skala)
      • Czas * * - Czas rozpoczęcia, czas trwania i złagodzenie
      • Direction * * - What way the reveal happens

Parametry czasowe

      • Start Time * * - Kiedy zaczyna się objawienie (w sekundach)
      • Czas trwania * * - Jak długo trwa objawienie
      • Easing * * - Krzywa animacji (liniowa, easeIn, easeOut, easeInOut)

Oznaki tekstowe

Dla tekstu wieloliniowego, ustaw czasy rozpoczęcia dla efektu kaskadowego:

Linia Czas rozpoczęcia Wpływ
Linia 1 0.2s Najpierw odkryj
Linia 2 0.35s Ujawnia drugi
Linia 3 0.5s Ujawnia trzeci

Tworzy to klasyczną “line- by- line reveal” widzianą w profesjonalnej grafice ruchu.

Połączenie z innymi efektami

Animacje maski działają dobrze z:

      • Keyframe animations * * - Przenieś elementy podczas gdy one ujawniają
      • Simple animations * * - Dodaj puls lub zanikaj po objawieniu
      • Generatory tła * * - Ujawnienie treści na animowanym tle

Maskowanie obrazu (statyczne)

Do maskowania kształtów statycznych na obrazach:

  1. Wybierz importowany obrazek
  2. W panelu właściwości kliknij * * Maska * *
  3. Wybierz kształt (koło, gwiazda, serce, sześciokąt itp.)
  4. Ustaw rozmiar i położenie maski
  5. Kliknij * * Zastosuj maskę * *

Tworzy to trwałe uprawy do kształtu (nie animowane).

Porady dla najlepszych wyników

      • Keep displays short * * - 0.4- 0.8 sekundy działa najlepiej
      • Use easeOut * * - Feels more natural for exels
      • Stagger konsekwentnie * * - 0,1-0,2s między wierszami
      • Match your content * * - Użyj tęczówki dla dramatyczne, wycierać dla profesjonalistów
      • Podgląd z pełną prędkością * * - Czas badania wydaje się właściwy

Tryby maskowania

Kontrola jak kształt maski oddziałuje z treścią:

Tryb Wpływ Use Case
* * Clip * * (domyślnie) Zawartość widoczna tylko wewnątrz kształtu maski Standard ujawnia, kadruje
Odjąć Zawartość widoczna wszędzie * z wyjątkiem * kształtu maski wewnętrznej Efekty cięcia, otwory
Intersekt Zawartość widoczna tylko w przypadku pokrywania się maski Efekty diagramu Venn

Aby zmienić tryb maski:

  1. Wybierz element maskowany
  2. W panelu Właściwości, znajdź tryb zrzutu maski
  3. Wybierz * * Clip * *, * * Odjąć * *, lub * * Intersekt * *

Zestaw masek

Nałożyć wiele masek na jeden element dla złożonych efektów maskujących:

  1. Nałożyć maskę początkową (np. koło)
  2. Dodaj drugą warstwę maski z innym trybem:
        • Add * * - jednoczy obydwa kształty maski (widoczne w obu)
        • Odjąć * * - Wycina drugi kształt z pierwszego
        • Intersekt * * - Widoczny jest tylko pokrywający się obszar

Przykład: Circle with Star Cutout

  1. Zastosuj maskę * * okrąg * * (tryb klipu)
  2. Dodaj warstwę maski * * * * * (tryb odejmowania)
  3. Wynik: okrągła rama z otworem w kształcie gwiazdy w środku
Multiple masks stacked
Maski wielokrotne połączone: maska koła z odjętą gwiazdą

Można stos jak najwięcej warstw maski, jak trzeba. Usunąć poszczególne warstwy bez wpływu na inne.

Animacja Vertex

Animować sam kształt maski, zmieniając wierzchołki między dwoma stanami:

  1. Zdefiniuj kształt maski startowej (pozycje wierzchołkowe)
  2. Zdefiniuj końcowy kształt maski (pozycje wierzchołkowe)
  3. Maska płynnie morfuje między kształtami podczas odtwarzania

Tworzy to organiczne, płynne przejścia maski, które wykraczają poza prostą skalę i animacje pozycji.

Mask modes comparison
Ten sam element z Clip, Odjąć i Intersect maski modes

Uwagi techniczne

  • Maski używają wewnętrznych grup Paper.js
  • Maski (gwiazda, serce) skala od centrum
  • Prostokątne maski zmieniają wymiary dla efektu wycierania
  • Maski są przebudowywane podczas wczytywania szablonów
  • Pełna kontrola programowa, patrz dokumentacja API dla applyCustomMask()
    • Powiązane: * * [Animacje] (/features/animations) 124; [Edytor klawiszy] (/features/keyframes) 124; [Szablony] (/panels/templates)