Animazione della maschera

5 min read

Creare effetti rivelatori professionali utilizzando maschere animate. Maschere clip contenuti e può animare per rivelare oggetti nel tempo - perfetto per sequenze titolo, transizioni e effetti cinematici.

Animazioni a mascherina disponibili

Animazione Effetto Migliore per
Condividi su Facebook I contenuti si rivelano dall’alto o dal basso Titolo testo, citazioni
Wipe Sinistra/Right Rivelazione orizzontale Transizioni, rivela
Iris Cerchio si espande dal centro Dramatic rivela, focus
Iris Out Cerchio si restringe al centro Fade outs, transizioni
Maschera stellare La forma della stella rivela il contenuto Rivelazioni giocose
Maschera di cuore La forma del cuore rivela il contenuto San Valentino, temi romantici
Tenda Aperto dal centro Effetti di fase/teatro
Wipe diagonale Rivelazione angolare Transizioni dinamiche
Cinematografico Letterbox bar animate Intros in stile cinematografico

Utilizzo di modelli di maschera

Il modo più semplice per usare le animazioni della maschera è attraverso i modelli:

  1. Aprire il pannello Templates (clicca Template scheda o premi T)
  2. Filtra per Category: Masking
  3. Fare clic su un modello per visualizzarlo in anteprima
  4. Fare clic su Utilizza Template per applicarlo

Modelli disponibili per Masking

Template Descrizione
Rivelazione del testo Linee scorrere uno per uno
Rivelazione del testo Linee scorrere verso il basso
Wipe orizzontale Pulizie di contenuto da sinistra
Iris Reveal Cerchio si espande per rivelare
Maschera stellare Forma stellare rivelare
Maschera di cuore La forma del cuore rivela
Wipe diagonale Transizione angolare
Introduzione al cinema Letterbox in stile cinematografico

Come funzionano le animazioni della maschera

Le maschere animate funzionano tagliando il contenuto con una forma che cambia nel tempo:

  1. Mask Shape - Il bordo clip (rectangle, cerchio, stella, cuore)
  2. Animation Type - Come si muove la maschera (wipe, iris, scale)
  3. Timing - Tempo di inizio, durata e facilitazione
  4. Direzione In che modo succede la rivelazione

Parametri di sincronizzazione

  • Quando inizia la rivelazione (in secondi)
  • Quanto tempo ci vuole il rivelatore
  • Easing - Curva dell’animazione (linear, easyIn, easyOut, easyInOut)

Rivelazioni di testo

Per il testo multi-linea, pugnalare i tempi di inizio per un effetto cascading:

Linea Tempo di inizio Effetto
Linea 1 0.2s Rivela prima
Linea 2 0.35s Rivelazione secondo
Linea 3 0.5s Rivela terza

Questo crea il classico “line-by-line rivelare” visto in grafica di movimento professionale.

Combinando con altri effetti

Le animazioni di maschera funzionano bene con:

  • Le animazioni dei fotogrammi - Sposta gli oggetti mentre rivelano
  • Animazioni semplici - Aggiungi polso o dissolvenza dopo rivelare
  • Generatori di Background - Contenuto di rivelazione su sfondi animati

Immagine Masking (Static)

Per la mascheratura di forma statica su immagini:

  1. Selezionare un’immagine importata
  2. Nel Pannello Proprietà, fare clic su Maschera
  3. Scegli una forma (circolo, stella, cuore, esagono, ecc.)
  4. Regolare la dimensione della maschera e la posizione
  5. Clicca su “Apply Mask”

Questo crea un raccolto permanente alla forma (non animato).

Consigli per i migliori risultati

  1. Keep rivela corto - 0,4-0,8 secondi funziona meglio
  2. Usa facilitàOut - Si sente più naturale per rivela
  3. Stagger costantemente - 0.1-0.2s tra linee
  4. Conserva i tuoi contenuti - Utilizzare iris per una pulizia drammatica e professionale
  5. Revisione: Tempo di prova si sente giusto

Modalità di maschera

Controlla come la forma della maschera interagisce con il tuo contenuto:

Modalità Effetto Utilizzare il caso
Clip (default) Contenuto visibile solo all’interno della maschera Standard rivela, inquadratura
Sottratto Contenuto visibile ovunque eccetto nella forma della maschera Effetti di taglio, fori
Intersect Contenuto visibile solo dove sovrapposizioni maschera Effetti del diagramma di Venn

Per cambiare la modalità maschera:

  1. Selezionare l’elemento mascherato
  2. Nel pannello Proprietà, trovare la modalità maschera a discesa
  3. Scelga "Clip**, “Subtract” o “Intersect”

Maschera Stacking

Applicare maschere multiple a un singolo elemento per effetti di mascheramento complessi:

  1. Applicare una maschera iniziale (ad esempio, cerchio)
  2. Aggiungere un secondo strato di maschera con una modalità diversa:
    • Add - Unire entrambe le forme di maschera (visibile in entrambi)
    • Subtract - Taglia la seconda forma dalla prima
    • Intersect - Solo l’area sovrapposta è visibile

Esempio: Cerchio con Star Cutout

  1. Applicare una maschera circle (modalità clip)
  2. Aggiungere un star strato maschera (modalità sottrarre)
  3. Risultato: telaio circolare con foro a stella nel centro
Multiple masks stacked
Maschere multiple combinate: una maschera cerchio con una stella sottratta

È possibile impilare come molti strati di maschera come necessario. Rimuovere i singoli strati senza influenzare gli altri.

Vertex Animation

Animare la maschera forma stessa mordendo i suoi vertici tra due stati:

  1. Definire la forma della maschera di partenza (posizione verticale)
  2. Definire la forma della maschera finale (poste invertex)
  3. La maschera morbide tra forme durante la riproduzione

Questo crea transizioni di maschere organiche e fluide che vanno oltre la semplice scala e animazioni di posizione.

Mask modes comparison
The stesso elemento con Clip, Subtract e modalità maschera Intersect

Note tecniche

  • Le maschere utilizzano gruppi clipped Paper.js internamente
  • Maschere a base di scala (star, cuore) scala dal centro
  • Le maschere rettangolo cambiano le dimensioni per gli effetti del tergicristallo
  • Le maschere vengono ricostruite quando i modelli di caricamento
  • Per il controllo programmatico completo, vedere la documentazione API per applyCustomMask()

Relato: Animations | Keyframe Editor | Template