Gruppen und verschachtelte Ebenen unabhängig animieren

Verschiebe, skaliere, drehe oder blende eine übergeordnete Gruppe ein und aus, während ihre verschachtelten Ebenen eigene Bannerify-Animationen abspielen.

Video-Tutorial: Gruppen und Ebenen mit Group Motion unabhängig animieren
Folge dem Schritt-für-Schritt-Tutorial.

Bannerify kann eine übergeordnete Gruppe und die Ebenen darin gleichzeitig animieren. So kannst du zum Beispiel ein gruppiertes Auto über das Banner fahren lassen und dabei unabhängig davon seine Radebenen drehen.

Das brauchst du ​

  • Einen Figma-Frame der obersten Ebene mit deinem Bannerdesign.
  • Eine übergeordnete Ebene mit einer oder mehreren untergeordneten Ebenen darin.
  • Eigene Namen für alle untergeordneten Ebenen, die du einzeln animieren willst.

Schritte ​

  1. Leg die zusammengehörigen Ebenen in Figma in eine gemeinsame übergeordnete Gruppe. Für eine Auto-Animation könntest du zum Beispiel eine Gruppe Car mit Body, Wheel Left und Wheel Right anlegen.
  2. Sag Bannerify auf eine dieser beiden Arten, dass die übergeordnete Gruppe aufgeklappt werden soll:
    • Ergänze den Namen der übergeordneten Ebene um [expand], etwa Car [expand].
    • Öffne Bannerify, klick oben in der Banner-Zeitleiste auf das Symbol List und dann auf den Pfeil neben der übergeordneten Ebene.
  3. Aktiviere im Bereich für verschachtelte Ebenen neben der aufgeklappten übergeordneten Ebene Keep Parent Animatable. Diese Option ist standardmäßig deaktiviert, damit bestehende Setups mit verschachtelten Ebenen ihr bisheriges Verhalten behalten, bei dem nur die untergeordneten Ebenen animiert werden.
  4. Schließ den Bereich für verschachtelte Ebenen. Bannerify aktualisiert das Banner und fügt die freigelegten untergeordneten Ebenen der Zeitleiste hinzu.
  5. Prüfe, ob die Zeitleiste die untergeordneten Ebenen und eine separate Zeile für die übergeordnete Ebene mit der Bezeichnung (Group Motion) enthält. In diesem Beispiel erscheint die Zeile der übergeordneten Ebene als Car [expand] (Group Motion).
  6. Wende die gemeinsame Bewegung auf die Zeile Group Motion an. Wende zum Beispiel Slide In Left an, um das ganze Auto ins Banner fahren zu lassen.
  7. Wende unabhängige Animationen auf die Zeilen der untergeordneten Ebenen an. Wende zum Beispiel Rotate 360° auf jedes Rad an.
  8. Klick auf Play All Banners oder nutze den Scrubber der Zeitleiste, um dir das kombinierte Ergebnis in der Vorschau anzusehen.
  9. Exportiere das Banner wie gewohnt. Die Animationen der übergeordneten und der untergeordneten Ebenen werden in HTML-, GIF-, MP4-, WebM- und anderen Canvas-basierten Medienexporten zusammengeführt.

Group Motion ​

Wenn Keep Parent Animatable aktiviert ist, markiert Bannerify die übergeordnete Ebene als Animatable und fügt der Zeitleiste eine separate Zeile Group Motion hinzu. Diese Zeile wirkt wie eine Bewegungshülle um die freigelegten untergeordneten Ebenen. Verschiebung, Skalierung, Drehung, Deckkraft und Beschnitt der übergeordneten Ebene werden mit den Animationen der einzelnen untergeordneten Ebenen kombiniert.

Wenn Keep Parent Animatable deaktiviert ist, bleiben die untergeordneten Ebenen aufgeklappt und animierbar, aber Bannerify fügt keine Zeile Group Motion für die übergeordnete Ebene hinzu. Bannerify merkt sich diese Option für jede übergeordnete Ebene.

Verwende klare, einheitliche Namen für untergeordnete Ebenen, wenn dieselbe Struktur in mehreren Bannergrößen vorkommt. Dann kannst du mit Quick Select Layers passende Ebenen auswählen und ihnen gemeinsam Animationen zuweisen.

Ein Foto in einer abgerundeten Maske bewegen ​

So lässt du eine maskierte Gruppe ins Banner gleiten, während sich ihr Foto unabhängig bewegt:

  1. Verwende in Figma ein Rechteck als Maske für die ganze Gruppe. Leg die Maske unter alle Elemente, die sie beschneidet. Du kannst für jede Ecke einen anderen Eckenradius verwenden.
  2. Klapp die Maskengruppe in Bannerify auf und aktiviere Keep Parent Animatable.
  3. Wende Slide In Left auf die Zeile Group Motion der Gruppe an.
  4. Wende eine separate Animation, etwa Zoom Pan Right, auf die Zeile des Fotos an. Verlängere ihre Dauer für einen langsameren Schwenk.
  5. Sieh dir das Banner in der Vorschau an und exportiere es. Das Foto bewegt sich innerhalb der abgerundeten Kontur, während die Animation der übergeordneten Ebene die ganze Gruppe bewegt.

Unterstützt werden nicht gedrehte Rechteckmasken mit normalen Ecken, entweder als deckende Alpha-Maske oder als Vector-Maske. Die Maske selbst wird nicht zu einer Animationszeile. Lass Gruppen mit mehreren Masken, teilweisen Geschwistermasken, weichen oder Luminanzmasken, Eckenglättung, Konturen oder Effekten zugeklappt, damit sie als ein Bild erhalten bleiben.

Figma-Sections verwenden ​

Dasselbe Setup funktioniert, wenn Use Figma sections as multi-scene banners aktiviert ist. Jede freigelegte Zeile enthält ihre Szenennummer, und eine übergeordnete Ebene mit aktivierter Option bleibt in dieser Szene als separate Zeile Group Motion verfügbar.

Slot-Ebenen in Figma ​

Bannerify unterstützt auch Figma-Slot-Ebenen in Banner-Frames. Slot-Container werden wie verschachtelte Ebenengruppen behandelt und sind beim ersten Laden in Bannerify aufgeklappt, sodass ihre untergeordneten Ebenen sofort in der Zeitleiste verfügbar sind.

Wenn du eine Slot-Ebene von Hand zuklappst, merkt sich Bannerify diese Einstellung beim Aktualisieren des Banners.

Wenn die Gruppe oder untergeordnete Ebenen fehlen ​

  • Achte darauf, dass das Banner ein Figma-Frame der obersten Ebene ist oder in einer Section liegt, die im Multi-Szenen-Modus geladen wurde.
  • Prüfe, ob die übergeordnete Ebene untergeordnete Ebenen hat und in Bannerify aufgeklappt ist.
  • Wenn die untergeordneten Ebenen ohne die Zeile Group Motion der übergeordneten Ebene erscheinen, öffne den Bereich für verschachtelte Ebenen und aktiviere neben der übergeordneten Ebene Keep Parent Animatable.
  • Wenn du die übergeordnete Ebene nach dem Laden des Banners mit [expand] umbenannt hast, klick auf Refresh Banner Layers.
  • Lass die untergeordneten Ebenen in Figma sichtbar und achte darauf, dass sie in der aufgeklappten übergeordneten Ebene liegen.