Animations de masques

6 min read

Créer des effets de révélation professionnels à l’aide de masques animés. Masques clip contenu et peut animer pour révéler des éléments au fil du temps - parfait pour les séquences de titres, transitions, et effets cinématographiques.

Animations de masque disponibles

Animation Effet Meilleur pour
Essuyez vers le haut/vers le bas Le contenu se révèle en haut ou en bas Titres textuels, citations
Essuyez à gauche/à droite Dévoilement horizontal Transitions, révélations
Iris Le cercle s’étend du centre Dramatique révèle, focus
Iris dehors Le cercle se rétrécit au centre Défauts, transitions
Masque de l’étoile La forme de l’étoile révèle le contenu Des révélations ludiques
Masque cardiaque La forme du cœur révèle le contenu Valentine, thèmes romantiques
Rideau Ouvre depuis le centre Effets du stade/théâtre
Essuyage diagonal Dévoilement en angle Transitions dynamiques
Cinématique Barres à lettres animées Intros de cinéma

Utilisation de modèles de masque

La façon la plus facile d’utiliser les animations masque est à travers des modèles:

  1. Ouvrez le panneau Templates (cliquez sur l’onglet Modèles ou appuyez sur T)
  2. Filtrer par Catégorie : Masquage
  3. Cliquez sur un modèle pour le prévisualiser
  4. Cliquez sur Utiliser le modèle pour l’appliquer

Modèles de masquage disponibles

Modèle Désignation des marchandises
Texte révélé Les lignes glissent un par un
Texte révélé vers le bas Lignes glisser vers le bas
Essuyage horizontal Des lingettes de contenu de gauche
Iris Reveal Le cercle s’étend pour révéler
Masque de l’étoile La forme de l’étoile révèle
Masque cardiaque La forme du cœur révèle
Essuyage diagonal Transition en angle
Intro cinématique Boîte à lettres de style film

Comment fonctionnent les animations de masque

Les masques animés fonctionnent en coupant du contenu avec une forme qui change au fil du temps :

  1. Forme du masque - La limite du clip (rectangle, cercle, étoile, cœur)
  2. Type d’animation - Comment le masque se déplace (wipe, iris, échelle)
  3. Timing - Heure de début, durée et assouplissement
  4. Direction - De quelle façon la révélation se produit

Paramètres de calendrier

  • Heure de début - Quand la révélation commence (en secondes)
  • Durée - Combien de temps la révélation prend
  • Easing - Courbe d’animation (linéaire, aisance, facilité d’accès, facilité d’accès)

Le texte stagné révèle

Pour les textes multilignes, décaler les heures de début d’un effet de cascade :

Ligne Heure de début Effet
Ligne 1 0.2s Révèle d’abord
Ligne 2 0.35s Révèle deuxième
Ligne 3 0.5s Révèle troisième

Cela crée le classique “line-by-line discover” vu dans les graphiques de mouvement professionnels.

La combinaison avec d’autres effets

Les animations de masque fonctionnent bien avec :

  • Animations Keyframe - Déplacer les éléments pendant qu’ils révèlent
  • Animations simples - Ajouter un pouls ou un fondu après la révélation
  • Générateurs de fond - Reveal content over animation backgrounds

Masquage d’images (statique)

Pour masque statique sur les images:

  1. Sélectionnez une image importée
  2. Dans le panneau des propriétés, cliquez sur Masque
  3. Choisissez une forme (cercle, étoile, coeur, hexagone, etc.)
  4. Régler la taille et la position du masque
  5. Cliquez sur Appliquer le masque

Cela crée une culture permanente à la forme (non animée).

Conseils pour les meilleurs résultats

  1. Keep révèle courte - 0,4-0,8 secondes fonctionne mieux
  2. Utilisez la facilité - Se sent plus naturel pour les révélations
  3. Stagger régulièrement - 0,1-0,2s entre les lignes
  4. Match votre contenu - Utilisez l’iris pour dramatique, essuie pour professionnel
  5. Prévisualisation à pleine vitesse - Le timing des tests semble correct

Modes de masque

Contrôlez comment la forme du masque interagit avec votre contenu :

Mode Effet Cas d’utilisation
Clip (par défaut) Contenu visible uniquement à l’intérieur du masque La norme révèle, cadrage
Soustraire Contenu visible partout sauf forme de masque intérieur Effets de coupure, trous
Intersecte Contenu visible uniquement lorsque le masque se chevauche Effets du diagramme de Venn

Pour changer le mode masque :

  1. Sélectionnez l’élément masqué
  2. Dans le panneau Propriétés, trouvez le menu déroulant du mode masque
  3. Choisir Clip, Subtract ou Intersect

Masque

Appliquer plusieurs masques à un seul objet pour des effets de masque complexes :

  1. Appliquer un masque initial (par exemple, un cercle)
  2. Ajouter un deuxième calque masque avec un mode différent :
    • Add - Unit les deux formes de masque (visible dans l’un ou l’autre)
    • Sous-tract - Coupe la deuxième forme du premier
    • Intersect - Seule la zone de chevauchement est visible

Exemple : Cercle avec coupe étoilée

  1. Appliquer un masque cercle (mode clip)
  2. Ajouter une couche de masque star (mode de sous-traction)
  3. Résultat: cadre circulaire avec un trou en forme d’étoile au centre
Multiple masks stacked
Masques multiples combinés: un masque de cercle avec une étoile soustraite

Vous pouvez empiler autant de couches de masque que nécessaire. Supprimer les couches individuelles sans affecter les autres.

Animation Vertex

Animer le masque lui-même en transformant ses sommets entre deux états :

  1. Définir la forme du masque de départ (positions verticales)
  2. Définir la forme du masque de fin (positions verticales)
  3. Le masque se transforme en douceur entre les formes pendant la lecture

Cela crée des transitions de masques organiques et fluides qui vont au-delà de simples animations d’échelle et de position.

Mask modes comparison
Le même article avec les modes masques Clip, Subtract et Intersect

Notes techniques

  • Les masques utilisent des groupes clippés Paper.js en interne
  • Masques à base d’échelle (étoile, coeur) échelle du centre
  • Les masques rectangle changent les dimensions pour les effets d’essuie-glaces
  • Les masques sont reconstruits lors du chargement des modèles
  • Pour le contrôle complet des programmes, voir la documentation API pour applyCustomMask()

Related: Animations=" Éditeur d’images clés=" Modèles