Maskenanimationen

5 min read

Erstellen Sie professionelle Enthüllungseffekte mit animierten Masken. Masken Clip-Inhalte und können animieren, um Elemente im Laufe der Zeit zu offenbaren - perfekt für Titelsequenzen, Übergänge und filmische Effekte.

Verfügbare Maskenanimationen

Animation Wirkung Am besten für
Abwischen/Abwischen Inhalt enthüllt von oben oder unten Texttitel, Zitate
Links/rechts abwischen Horizontale Enthüllung Übergänge, enthüllt
Iris Kreis erweitert sich vom Zentrum Dramatische Enthüllungen, Fokus
Iris out Kreis schrumpft zur Mitte Ausblenden, Übergänge
Sternmaske Star Shape enthüllt Inhalt Verspielte Enthüllungen
Herzmaske Herzform enthüllt Inhalt Valentinstag, romantische Themen
Vorhang Öffnet vom Zentrum Bühne/Theater-Effekte
Diagonaltücher Verwinkelte Enthüllung Dynamische Übergänge
Film Letterbox Bars Animate Film-Stil Intros

Verwendung von Mask Templates

Der einfachste Weg, Maskenanimationen zu verwenden, ist durch Vorlagen:

  1. Öffnen Sie das Templates Panel (klicken Sie auf die Registerkarte Vorlagen oder drücken Sie T)
  2. Filter nach Kategorie: Maskierung
  3. Klicken Sie auf eine Vorlage, um eine Vorschau
  4. Klicken Sie auf Verwenden Sie Template, um es anzuwenden

Verfügbare Maskenvorlagen

Meldebogen Beschreibung
Text enthüllt Up Linien rutschen eine nach der anderen
Text Reveal Down Leitungen nach unten rutschen
Horizontalwisch Inhalt wischt von links
Iris Reveal Circle erweitert sich, um zu enthüllen
Sternmaske Sternform enthüllt
Herzmaske Herzform enthüllt
Diagonaltücher Verwinkelter Übergang
Cinematisches Intro Briefkasten im Filmstil

Wie Maskenanimationen funktionieren

Animierte Masken arbeiten, indem sie Inhalte mit einer Form beschneiden, die sich im Laufe der Zeit ändert:

  1. Maskenform - Die Clipgrenze (Rechteck, Kreis, Stern, Herz)
  2. Animationstyp - Wie sich die Maske bewegt (Wischen, Iris, Skala)
  3. Timing - Startzeit, Dauer und Lockerung
  4. Richtung - Auf welche Weise die Enthüllung geschieht

Zeitparameter

  • Startzeit - Wenn die Enthüllung beginnt (in Sekunden)
  • Dauer - Wie lange dauert die Enthüllung
  • Easing - Animationskurve (linear, easeIn, easeOut, easeInOut)

Staggered Text enthüllt

Bei mehrzeiligem Text gestaffelt die Startzeiten für einen Kaskadierungseffekt:

Linie Startzeit Wirkung
Linie 1 0.2s Erste Enthüllungen
Linie 2 0.35s Zweite Enthüllungen
Linie 3 0.5s Dritte Enthüllung

Dadurch entsteht die klassische “Zeilen-für-Zeilen-Enthüllung”, die in professionellen Bewegungsgrafiken zu sehen ist.

Kombination mit anderen Effekten

Maskenanimationen funktionieren gut mit:

  • Keyframe-Animationen - Verschieben Sie Elemente, während sie enthüllt werden
  • Einfache Animationen - Puls hinzufügen oder nach der Enthüllung verblassen
  • Hintergrundgeneratoren - Zeigen Sie Inhalte über animierte Hintergründe

Bildmaskierung (statisch)

Für statische Formmasken auf Bildern:

  1. Wählen Sie ein importiertes Bild
  2. Klicken Sie im Properties Panel auf Maske
  3. Wählen Sie eine Form (Kreis, Stern, Herz, Sechseck, etc.)
  4. Anpassung der Maskengröße und -position
  5. Klicken Maske anwenden

Dies erzeugt eine dauerhafte Ernte in die Form (nicht animiert).

Tipps für die besten Ergebnisse

  1. Keep verrät kurz - 0,4-0,8 Sekunden funktionieren am besten
  2. Use easeOut - Fühlt sich natürlicher für Enthüllungen an
  3. Stagger konsequent - 0,1-0,2s zwischen den Zeilen
  4. Match your content - Verwenden Sie Iris für dramatische, wischen Sie für professionelle
  5. Vorschau mit voller Geschwindigkeit - Test Timing fühlt sich richtig an

Maskenmodi

Kontrollieren Sie, wie die Maskenform mit Ihren Inhalten interagiert:

Modus Wirkung Use Case
Clip (Standard) Inhalt nur innerhalb der Maskenform sichtbar Standard enthüllt, Framing
Subtraktion Inhalt überall sichtbar außer in Maskenform Ausschnitteffekte, Löcher
Kreuzung Inhalt nur sichtbar, wenn sich die Maske überschneidet Venn-Diagrammeffekte

Um den Maskenmodus zu ändern:

  1. Wählen Sie das maskierte Element
  2. Im Bereich Eigenschaften finden Sie die Dropdown-Liste im Maskenmodus
  3. Wählen Sie Clip, Subtract oder Interect

Maskenstapel

Tragen Sie mehrere Masken auf ein einzelnes Element für komplexe Maskierungseffekte auf:

  1. Anwenden einer anfänglichen Maske (z. B. Kreis)
  2. Fügen Sie eine zweite Maskenschicht mit einem anderen Modus hinzu:
    • Add - Vereinigt beide Maskenformen (sichtbar in beiden)
    • Subtract - Schneidet die zweite Form aus der ersten
    • Interface - Nur der überlappende Bereich ist sichtbar

Beispiel: Kreis mit Sternausschnitt

  1. Tragen Sie eine Kreis-Maske auf (Clip-Modus)
  2. Hinzufügen einer star Maskenschicht (Subtraktionsmodus)
  3. Ergebnis: kreisförmiger Rahmen mit einem sternförmigen Loch in der Mitte
Multiple masks stacked
Multiple Masken kombiniert: eine Kreismaske mit einem Stern subtrahiert

Sie können so viele Maskenschichten wie nötig stapeln. Entfernen Sie einzelne Schichten, ohne andere zu beeinflussen.

Vertex Animation

Animieren Sie die Maskenform selbst, indem Sie ihre Eckpunkte zwischen zwei Zuständen morphieren:

  1. Definieren Sie die Form der Startmaske (Vertex-Positionen)
  2. Definieren Sie die Endungsmaskenform (Vertex-Positionen)
  3. Die Maske morphs glatt zwischen den Formen während der Wiedergabe

Dadurch entstehen organische, fließende Maskenübergänge, die über einfache Skalierungs- und Positionsanimationen hinausgehen.

Mask modes comparison
Das gleiche Element mit Clip, Subtract und Interect Mask Modes

Technische Anmerkungen

  • Masken verwenden intern Paper.js-geschnittene Gruppen
  • Skala-basierte Masken (Stern, Herz) Skala von der Mitte
  • Rechteckmasken ändern Abmessungen für Wischeffekte
  • Masken werden beim Laden von Vorlagen wieder aufgebaut
  • Zur vollständigen programmatischen Steuerung siehe API-Dokumentation für applyCustomMask()

Related: Animationen | Keyframe Editor | Vorlagen