Animații mască

5 min read

Creați efecte profesionale dezvăluie folosind măști animate. Măştile clip conţinut şi poate anima pentru a dezvălui elemente de-a lungul timpului - perfect pentru secvenţe de titlu, tranziţii şi efecte cinematice.

Animații mască disponibile

Animație Efect Cel mai bun pentru
Ștergere/jos Conținutul dezvăluie de sus sau de jos Titluri text, citate
Ştergeţi stânga/dreapta Dezvăluire orizontală Tranziții, dezvăluie
Iris Cercul se extinde de la centru Dezvăluiri dramatice, concentrare
Iris out Cercul se micşorează spre centru Ieșiri, tranziții
Masca stelară Forma stelei dezvăluie conținut Dezvăluiri jucăuşe
Mască pentru inimă Forma inimii dezvăluie conţinut Valentine, teme romantice
Cortina Deschide de la centru Efectele etapei/teatrului
Șervețel diagonal Dezvăluire unghiulară Tranziții dinamice
Cinematică Litere bare animate Intro-uri în stil film

Folosind șabloane mască

Cel mai simplu mod de a folosi animații masca este prin șabloane:

  1. Deschideți panoul Templates (clic pe șabloane sau apăsați T)
  2. Filtru de Categoria: Masking
  3. Faceți clic pe un șablon pentru a-l previzualizare
  4. Click Folosiți șablonul pentru a-l aplica

Modele de mascare disponibile

Șablon Descriere
Dezvăluire text Liniile aluneca unul câte unul
Dezvăluie text Liniile alunecă în jos
Ştergere orizontală Șervețele de conținut din stânga
Iris Reveal Cercul se extinde pentru a dezvălui
Masca stelară Forma stelei dezvăluie
Mască pentru inimă Forma inimii dezvăluie
Șervețel diagonal Tranziție unghiulară
Introducere cinematografică Cutie poştală în stil film

Cum funcționează Animații Masca

Măști animate funcționează prin tăierea conținutului cu o formă care se schimbă în timp:

  1. Mask Shape - Limita clipului (rectangle, cerc, stea, inima)
  2. Tip de animaţie - Cum se mişcă masca (ştergere, iris, scară)
  3. Timing - Timp de pornire, durată, și relaxare
    • În ce fel se întâmplă dezvăluirea

Parametrii de sincronizare

  • Start Time - Când începe dezvăluirea (în secunde)
    • Cât durează dezvăluirea
  • Easing - Curba animării (liniar, usurintaIn, usurinta, usurintaInOut)

Dezvăluiri de text stagnate

Pentru mai multe linii text, clatina timpii de începere pentru un efect de cascadă:

Linie Timp de pornire Efect
Linia 1 0.2s Arată mai întâi
Linia 2 0.35s Dezvăluie al doilea
Linia 3 0.5s Dezvăluie al treilea

Acest lucru creează clasicul “line-by-line releve” văzut în grafica de mișcare profesională.

Combinarea cu alte efecte

Animații mască funcționează bine cu:

  • Animații Keyframe - Mutați elementele în timp ce ele dezvăluie
  • Animații simple - Adăugați puls sau se estompează după dezvăluire
  • Generatoare de fundal - Dezvăluie conținut peste fundaluri animate

Masking imagine (Static)

Pentru mascarea formei statice pe imagini:

  1. Alegeți o imagine importată
  2. În panoul Proprietăți, faceți clic pe Mask
  3. Alege o formă (cerc, stea, inimă, hexagon etc.)
  4. Reglați dimensiunea și poziția măștii
  5. Click Applicy Mask

Acest lucru creează o cultură permanentă pentru forma (nu animate).

Sfaturi pentru cele mai bune rezultate

  1. Keep releases short - 0.4-0.8 secunde works best
  2. Use easyOut - Se simte mai natural pentru dezvăluiri
  3. Stagger constant - 0,1-0,2s între linii
  4. Match your content - Utilizați iris pentru dramatic, ștergeți pentru profesional
  5. Previzualizare la viteză maximă - Timpul de testare se simte bine

Moduri mască

Controlați modul în care forma masca interacționează cu conținutul dumneavoastră:

Mod Efect Folosește cazul
Clip (default) Conținutul vizibil numai în interiorul formei masca Standard dezvăluie, înscenează
Scădere Conținut vizibil peste tot * cu excepția * în interiorul formei masca Efecte de separare, găuri
Intersectează Conținutul vizibil numai atunci când masca se suprapune Efectele diagramei vent

Pentru a schimba modul masca:

  1. Alegeți elementul mascat
  2. În panoul Proprietăți, găsi modul masca dropdown
  3. Alegeți Clip, Subtract, sau Intersect

Stivuire mască

Aplicați măști multiple pe un singur element pentru efecte complexe de mascare:

  1. Aplicați o mască inițială (de exemplu, cerc)
  2. Adaugă un al doilea strat masca cu un mod diferit:
    • Adăugaţi - Uneşte ambele forme de mască (vizibile în oricare)
    • Sutrage - taie a doua formă din prima
    • Intersect - Doar zona suprapusă este vizibilă

Exemplu: Cerc cu Star Cutout

  1. Aplicaţi o mască cerc (modul clip)
  2. Adaugă un strat de mască star (mod de scădere)
  3. Rezultat: cadru circular cu o gaură în formă de stea în centru
Multiple masks stacked
Măști multiple combinate: o mască cerc cu o stea scăzut

Puteți stiva cât mai multe straturi masca, după cum este necesar. Îndepărtaţi straturile individuale fără a le afecta pe altele.

Animație Vertex

Animează masca însăşi transformându-şi verticele între două stări:

  1. Defineşte forma de mască de pornire (poziţii de rotaţie)
  2. Definește forma măștii finale (poziții pe verticală)
  3. Masca se transformă fără probleme între forme în timpul redarea

Acest lucru creează tranziții organice, curg masca care merg dincolo de scară simplă și animații de poziție.

Mask modes comparison
Același element cu Clip, Scădere, și moduri masca Intersect

Note tehnice

  • Măștile folosesc grupuri tăiate Paper.js intern
  • Scala măștilor pe scară de la centru
  • Măștile rectangle schimba dimensiunile pentru a șterge efectele
  • Măștile sunt reconstruite la încărcarea șabloanelor
  • Pentru control programatic complet, consultați documentația API pentru applyCustomMask()

Related: Animații