Komponente „Übergangsgalerie“

Diese Komponente wird nicht für AMPHTML-Anzeigen, Videoanzeigen und Bildanzeigen unterstützt.

Mithilfe der Komponente „Übergangsgalerie“ können Sie Bilder nacheinander einblenden und den Übergang zwischen Bildern animieren.

Die richtige Galerie auswählen

Google Web Designer hat vier Galeriekomponenten:

In der 360°-Galerie werden Bilder der verschiedenen Seiten eines Objekts gezeigt. Sie können mit dem Finger vor- und zurückwischen, um das Objekt zu drehen. In der 360°-Galerie werden keine Gruppen oder Navigationselemente dargestellt.
Die Swipe-Galerie bietet eine einfache, zweidimensionale Darstellung. Sie können vertikal oder horizontal durch Bilder oder Gruppen wischen.
Die Karussell-Galerie ist mit der Swipe-Galerie vergleichbar, allerdings wird der Bildwechsel mit einem dreidimensionalen Effekt durchgeführt, als ob die Bilder sich auf einem rotierenden Display befänden.
Die Übergangsgalerie bietet verschiedene Animationseffekte für den Wechsel von einem Bild zum nächsten.

So verwenden Sie die Übergangsgalerie:

Öffnen Sie das Steuerfeld Komponenten und dann den Ordner Galerien.
Klicken Sie doppelt auf die Komponente Übergangsgalerie oder ziehen Sie sie in den Anzeigebereich.
Klicken Sie doppelt auf die Komponente oder klicken Sie auf die Schaltfläche Einstellungen… im Steuerfeld Eigenschaften. Das Dialogfeld „Übergangsgalerie“ wird geöffnet.
Auf der linken Seite werden im Steuerfeld Bibliothek Bilder angezeigt, die Sie in die Galerie aufnehmen können. Wenn Sie Bilder hinzufügen möchten, klicken Sie unten im Steuerfeld auf Assets importieren oder ziehen Sie Bilder aus einem anderen Fenster in das Steuerfeld.
Ziehen Sie die Bilder, die in der Galerie enthalten sein sollen, am unteren Rand des Dialogfelds in das Steuerfeld Frames oder in den Anzeigebereich. Wenn Sie mehrere Bilder aus der Bibliothek hinzufügen möchten, können Sie auch alle auswählen. Klicken Sie dann mit der rechten Maustaste auf die Auswahl und anschließend auf Hinzufügen.
Wählen Sie im Steuerfeld Übergang den Übergangstyp aus.
Sie können Dauer, Easing und weitere Eigenschaften des Übergangs anpassen. Weitere Informationen dazu finden Sie unten.

So ordnen Sie Galeriebilder neu an:

Öffnen Sie das Dialogfeld „Übergangsgalerie“. Klicken Sie dazu doppelt auf die Komponente im Anzeigebereich oder klicken Sie auf Einstellungen… im Steuerfeld Eigenschaften.
Ziehen Sie unten im Steuerfeld Frames ein Bild an die neue Position.

So entfernen Sie ein Galeriebild:

Öffnen Sie das Dialogfeld „Übergangsgalerie“. Klicken Sie dazu doppelt auf die Komponente im Anzeigebereich oder klicken Sie auf Einstellungen… im Steuerfeld Eigenschaften.
Wählen Sie unten im Steuerfeld Frames die Bilder aus, die Sie entfernen möchten.
Drücken Sie entweder die Taste Entf oder klicken Sie mit der rechten Maustaste auf die Auswahl und anschließend im Pop-up-Menü auf Löschen.

So tauschen Sie ein Galeriebild aus:

Öffnen Sie das Dialogfeld „Übergangsgalerie“. Klicken Sie dazu doppelt auf die Komponente im Anzeigebereich oder klicken Sie auf Einstellungen… im Steuerfeld Eigenschaften.
Klicken Sie mit der rechten Maustaste auf das Bild im Steuerfeld Frames und wählen Sie im Pop-up-Menü Bild tauschen aus.

Eigenschaften

Im Dialogfeld „Übergangsgalerie“ können Sie die Eigenschaften für diese Komponente aufrufen. Klicken Sie dazu im Anzeigebereich doppelt auf die Übergangsgalerie oder klicken Sie im Steuerfeld „Eigenschaften“ auf Einstellungen… .

Übergangstypen

Je nach Übergangstyp sind verschiedene Eigenschaften verfügbar.

Keiner

Es gibt keinen visuellen Übergangseffekt zwischen den einzelnen Frames.

Ausblenden

Das alte Bild wird ausgeblendet und das neue Bild wird sichtbar.

Eigenschaft	Beschreibung
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out

Eigenschaft

Beschreibung

Dauer

Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.

Easing

Das Easing der Übergangsanimation.

Linear (Standard)
Ease-In
Ease-Out
Ease-In-Out

Schieben

Das alte Bild wird durch das neue Bild aus der Ansicht geschoben.

Eigenschaft	Beschreibung
Stil	Normal	Aufteilen
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out
Richtung _{(verfügbar, wenn für Stil die Option Normal ausgewählt ist)}	Die Richtung des Effekts. Rechtsläufig (Standard) Linksläufig Von oben nach unten Von unten nach oben
Ausrichtung _{(verfügbar, wenn für Stil die Option Aufteilen ausgewählt ist)}	Die Ausrichtung der Animation. Horizontal Vertikal (Standard)

Wischen

Das neue Bild ersetzt nach und nach das alte Bild. Die Wischbewegung erfolgt entlang einer oder mehrerer Linien.

Eigenschaft	Beschreibung
Stil	Normal	Tür	Iris
Stil	Radial	Streifen
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out
Richtung _{(verfügbar, wenn für Stil die Option Normal, Streifen, Tür oder Radial ausgewählt ist)}	Die Richtung des Effekts. Die verfügbaren Optionen hängen vom Stil ab: Normal oder Streifen: Rechtsläufig (Standard) Linksläufig Von oben nach unten Von unten nach oben Tür: Von innen nach außen (Standard) Von außen nach innen Radial: Im Uhrzeigersinn (Standard) Gegen den Uhrzeigersinn
Winkel _{(verfügbar, wenn für Stil die Option Normal ausgewählt ist)}	Der Winkel der Linie, mit der das Bild „weggewischt“ wird, in Grad von -89 bis 89.
Ausrichtung _{(verfügbar, wenn für Stil die Option Tür ausgewählt ist)}	Die Ausrichtung der Animation. Horizontal Vertikal (Standard)
Ursprung _{(verfügbar, wenn für Stil die Option Iris oder Radial ausgewählt ist)}	Der Ursprungspunkt der Iris oder des Wischradius auf der X- und Y-Achse als Prozentwert der Breite bzw. Länge des Galerie-Frames.
Streifen _{(verfügbar, wenn für Stil die Option Streifen ausgewählt ist)}	Die Anzahl der Streifen jeder Farbe von 1 bis 10. Der Standardwert ist 2.
Farbe _{(verfügbar, wenn für Stil die Option Streifen ausgewählt ist)}	Die Farbe jedes Streifens.

Slicen

Das neue Bild wird in Segmenten oder Balken eingeblendet, die nacheinander in die Ansicht geschoben werden.

Eigenschaft	Beschreibung
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out
Richtung	Die Richtung des Effekts. Rechtsläufig (Standard) Linksläufig Von oben nach unten Von unten nach oben
Segmente	Die Anzahl der Segmente von 1 bis 20. Der Standardwert ist 5.
Transparenten Hintergrund einblenden	Klicken Sie dieses Kästchen an, wenn das neue Bild nicht direkt über dem alten Bild eingeblendet, sondern vor dem Übergang ein transparenter Hintergrund sichtbar werden soll.

Jalousien

Das neue Bild wird eingeblendet, als ob es sich hinter Jalousien befände.

Eigenschaft	Beschreibung
Stil	Normal	Lamellen
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out
Richtung _{(verfügbar, wenn für Stil die Option Normal ausgewählt ist)}	Die Richtung des Effekts. Rechtsläufig (Standard) Linksläufig Von oben nach unten Von unten nach oben
Ausrichtung _{(verfügbar, wenn für Stil die Option Lamellen ausgewählt ist)}	Die Ausrichtung der Animation. Horizontal Vertikal (Standard)
Jalousien	Die Anzahl der Jalousien von 1 bis 20. Der Standardwert ist 5.
Transparenten Hintergrund einblenden _{(verfügbar, wenn für Stil die Option Normal ausgewählt ist)}	Klicken Sie dieses Kästchen an, wenn das neue Bild nicht direkt über dem alten Bild eingeblendet, sondern vor dem Übergang ein transparenter Hintergrund sichtbar werden soll.
Gestaffelt _{(verfügbar, wenn für Stil die Option Lamellen ausgewählt ist)}	Klicken Sie dieses Kästchen an, wenn der Übergang der Jalousien nacheinander und nicht gleichzeitig erfolgen soll.

Drehen

Das alte Bild beginnt sich zu drehen und wird herangezoomt. Dann wird das neue Bild herausgezoomt, während die Drehbewegung abgeschlossen wird.

Eigenschaft	Beschreibung
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out
Richtung	Die Richtung des Effekts. Im Uhrzeigersinn (Standard) Gegen den Uhrzeigersinn

Eigenschaft

Beschreibung

Dauer

Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.

Easing

Das Easing der Übergangsanimation.

Linear (Standard)
Ease-In
Ease-Out
Ease-In-Out

Richtung

Die Richtung des Effekts.

Im Uhrzeigersinn (Standard)
Gegen den Uhrzeigersinn

Zickzack

Das neue Bild wird nach und nach in einem sich schlängelnden Rastermuster eingeblendet.

Eigenschaft	Beschreibung
Dauer	Die Dauer der Animation zwischen den einzelnen Frames in Sekunden. Der Standardwert ist 1.
Easing	Das Easing der Übergangsanimation. Linear (Standard) Ease-In Ease-Out Ease-In-Out
Ausrichtung	Die Ausrichtung der Animation. Horizontal (Standard) Vertikal
Zeilen	Die Anzahl der Zeilen von 1 bis 20. Der Standardwert ist 5.
Spalten	Die Anzahl der Spalten von 1 bis 20. Der Standardwert ist 5.

Eigenschaften der Übergangsgalerie

Eigenschaft	Beschreibung
Name	Der Name der Komponente „Übergangsgalerie“.
Bilder	Die Bilder, die in der Galerie angezeigt werden. Sie können im Steuerfeld Frames des Dialogfelds „Übergangsgalerie“ Änderungen vornehmen. Kann an dynamische Daten gebunden werden.
Skalierung	Hier legen Sie fest, wie Bilder verschiedener Größe in Frames mit einer festen Größe angezeigt werden. Weitere Informationen Größe an Frame anpassen Auf Frame zuschneiden Keine Bild strecken, um Frame zu füllen
Start-Frame	Der Frame, der als Erster angezeigt werden soll, wobei 1 der erste Frame ist.
Automatische Wiedergabe
Automatische Wiedergabe	Wenn diese Option aktiviert ist, werden die Frames in der Galerie automatisch wiedergegeben. Außerdem wird die Gesamtzeit, die für die Wiedergabe der gesamten Galerie erforderlich ist, im Steuerfeld Frames angezeigt.
Intervall	Sichtbarkeit der einzelnen Frames in Sekunden. Nur verfügbar, wenn Automatische Wiedergabe aktiviert ist.
Wiederholen	Gibt an, wie oft die Frames in der Galerie abgespielt werden sollen, wobei „0“ für Endlosschleife steht. Nur verfügbar, wenn Automatische Wiedergabe aktiviert ist.
Interaktion
Zusammenfassen	Wenn diese Option aktiviert ist, können Sie vom letzten zum ersten Frame zurückspringen.
Geste	Die Nutzergeste, durch die der aktuelle Frame in der Galerie geändert wird. Keine Klick (Standard) Wischen (nicht für alle Übergangstypen* verfügbar) Sie haben die Möglichkeit, Navigationspunkte zu aktivieren oder mithilfe von Ereignissen benutzerdefinierte Navigationssteuerelemente einzurichten, die die Nutzer zusätzlich zur ausgewählten Geste verwenden können.
Rückwärts wischen ignorieren	Wenn diese Option aktiviert ist, reagiert die Komponente nicht auf Wischgesten in die entgegengesetzte Richtung des Animationseffekts, sodass der Nutzer nicht zum vorherigen Frame gehen kann. Nur verfügbar, wenn die Eigenschaft Geste auf Wischen festgelegt und die Option Interaktiven Übergang aktivieren deaktiviert ist.
Interaktiven Übergang aktivieren	Wenn diese Option aktiviert ist, folgt die Übergangsanimation dem Mauszeiger des Nutzers. Nur verfügbar, wenn für die Eigenschaft Geste die Option Wischen festgelegt werden kann.*
Navigation
Einschließen	Wenn diese Option aktiviert ist, werden in der Galerie Navigationspunkte angezeigt.
Miniaturansichten	Wenn diese Option aktiviert ist, wird in der Galerie eine Miniaturansicht jedes Frames für die Navigation angezeigt.
Markierung	Legt die Markierungsfarbe für den aktuell angezeigten Frame fest.
Erweitert
Exit-URLs	Eine durch Kommas getrennte Liste mit Exit-URLs, eine pro Frame. Kann an dynamische Daten gebunden werden.

* Interaktion „Wischen“ unterstützt

Die Interaktion „Wischen“ wird für die folgenden Übergangstypen und Stile unterstützt:

Schieben – Normal
Slicen
Wischen – Normal
Wischen – Streifen
Jalousien – Normal

Ereignisse und Aktionen

Von der Komponente „Übergangsgalerie“ gesendete Ereignisse

Sie können basierend auf den folgenden Ereignissen der Komponente „Übergangsgalerie“ andere Aktionen auslösen:

Ereignis	Beschreibung
Automatische Wiedergabe beendet	Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis `event.detail.completed` lautet „wahr“, wenn die Wiedergabe wie vorgesehen nach Erreichen der festgelegten Schleifenanzahl endet, ansonsten lautet es „falsch“.
Frame aktiviert	Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
Angezeigter Frame	Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
Frame-Berührung	Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
Nach einmaligem Drehen beenden	Wird ausgelöst, wenn die Rotation aus irgendeinem Grund beendet wurde. Das Ereignis `event.detail.completed` lautet „wahr“, wenn die Rotation wie vorgesehen endet, ansonsten lautet es „falsch“.
Linkes Ende	Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
Rechtes Ende	Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.

Wenn Sie eines dieser Ereignisse im Dialogfeld „Ereignis“ auswählen möchten, legen Sie die Komponente „Übergangsgalerie“ als Ziel fest.

Von der Komponente „Übergangsgalerie“ ausgeführte Aktionen

Folgende Aktionen der Komponente „Übergangsgalerie“ können als Reaktion auf andere Ereignisse ausgelöst werden:

Aktion	Konfigurationsoptionen
Zu Frame springen	Frame-Nummer Animieren
Einmal drehen	Mit dem aktuellen Frame beginnen
Autoplay starten	Mit dem aktuellen Frame beginnen
Stopp	Keine
Vor	Keine
Zurück	Keine

Wenn Sie eine dieser Aktionen im Dialogfeld Ereignis auswählen, legen Sie die Komponente „Übergangsgalerie“ als Empfänger fest.

Informationen zum Konfigurieren von Ereignissen

Vorschau

Im Modus Design des Dialogfelds „Übergangsgalerie“ können Sie im Steuerfeld Frames auf Wiedergabe klicken, um zu sehen, wie der grundlegende Übergang aussieht. Startpunkt ist der aktuell ausgewählte Frame. Sie können während der Wiedergabe der Vorschau Eigenschaften ändern. Die Änderungen werden dabei sofort wirksam.

Wechseln Sie zum Tab Vorschau, um zu sehen, wie die Übergangsgalerie mit den von Ihnen festgelegten Eigenschaften funktioniert, einschließlich der Optionen für die automatische Wiedergabe und Interaktionen.

Außerdem können Sie sich eine Vorschau des Dokuments in Ihrem bevorzugten Browser ansehen. Klicken Sie dazu auf Speichern und dann auf Vorschau.

War das hilfreich?

Wie können wir die Seite verbessern?