Komponente "Bildeffekt"

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

Mit der Komponente „Bildeffekt“ können Sie eine Vielzahl von JavaScript-basierten visuellen Effekten auf ein Bild anwenden (und in einigen Fällen auf zwei Bilder): Vorher und Nachher, Atmen, Einblenden und Welle.

Image Effect component - Google Web Designer

So verwenden Sie die Komponente „Bildeffekt“:

1. Öffnen Sie das Steuerfeld Komponenten und dann den Ordner Grafiken und Effekte.

2. Doppelklicken Sie auf die Komponente Bildeffekt  oder ziehen Sie sie in den Anzeigebereich.

3. Klicken Sie im Anzeigebereich doppelt auf die Komponente oder klicken Sie auf die Schaltfläche Einstellungen… im Steuerfeld Eigenschaften. Das Dialogfeld „Bildeffekt“ wird geöffnet.

4. Ziehen Sie ein Bild in das Dialogfeld oder klicken Sie auf Bilder auswählen und wählen Sie ein Bild aus.

5. Wählen Sie im Bereich Eigenschaften aus dem Drop-down-Menü den gewünschten Bildeffekt-Typ aus.

6. Bei einigen Effekttypen werden zwei Bilder verwendet. Sie können das zusätzliche Bild in der Fotogalerie auswählen oder im Dateisystem nach einer Bilddatei suchen, die importiert werden soll.

7. Personalisieren Sie den Effekt. Passen Sie dazu seine Eigenschaften wie unten beschrieben an.

Eigenschaften

Zusammen mit den Eigenschaften der gesamten Komponente können Sie auch Eigenschaften für jeden in ihr enthaltenen Effekt konfigurieren.

Eigenschaften der Komponente "Bildeffekt"

Eigenschaft	Beschreibung
Name	Legt den Namen der Komponente "Bildeffekt" fest.
Skalierung	Bestimmt, wie Bilder verschiedener Größe innerhalb der Komponente dargestellt werden. Weitere Informationen Größe an Frame anpassen Auf Frame zuschneiden Keine Bild strecken, um Frame zu füllen
Zeitlimit für die Animation festlegen	Wenn diese Option aktiviert ist, wird die automatische Wiedergabe der Animation nach der angegebenen Dauer in Sekunden beendet.

Eigenschaften der einzelnen Effekttypen

Im Dialogfeld „Bildeffekt“ können Sie auf die Eigenschaften der einzelnen Effekttypen zugreifen. Sie öffnen das Dialogfeld, indem Sie im Anzeigebereich auf die Komponente „Bildeffekt“ doppelklicken oder auf Einstellungen… im Steuerfeld „Eigenschaften“ klicken. Wählen Sie dann den Effekttyp aus, um dessen Eigenschaften zu sehen.

Kein

Auf das Bild wird kein Effekt angewendet.

Vorher und Nachher

Beim Effekt "Vorher und Nachher" wird ein Wischübergang zwischen zwei Bildern angewendet. Nach einem Durchlauf wird die Richtung umgekehrt und der Vorgang wiederholt.

  

Eigenschaft	Beschreibung
Bilder
Basis	Das Bild, das oberhalb oder links von der Trennlinie angezeigt wird. Mit der Schaltfläche Bilder austauschen  können Sie zwischen dem Basisbild und dem sichtbaren Bild wechseln.
Sichtbar	Das Bild unterhalb oder rechts von der Trennlinie. Mit der Schaltfläche Bilder austauschen  können Sie zwischen dem sichtbaren Bild und dem Basisbild wechseln.
Trennlinie
Winkel	Der Winkel der Trennlinie zwischen den beiden Bildern zwischen 0 und 180 Grad. Der Standardwert ist 90. Das entspricht einer vertikalen Linie.
Weiche Kante	Die Weichheit der Bildränder entlang der Trennlinie. 1 bewirkt einen scharfen Übergang, während größere Werte die Ränder weichzeichnen.
Interaktion	Wenn das Kästchen Maus folgen angeklickt ist, folgt die Trennlinie dem Mauszeiger.
Animation
Automatische Wiedergabe	Wenn das Kästchen Autoplay angeklickt ist, beginnt die Animation beim Laden der Komponente.
Anfänglicher Zustand
Position	Die Startposition der Trennlinie, wenn die Animation beginnt.
Verzögerung	Der Zeitraum in Sekunden, nach dem die automatische Wiedergabe beginnt.

Atmen

Beim Effekt "Atmen" wird das Bild auseinander- und dann wieder zusammengezogen.

   

Eigenschaft	Beschreibung
Bilder
Basis	Das Bild, auf das der Effekt angewendet werden soll.
Atmen
Geschwindigkeit	Die Geschwindigkeit der Animation. Bei 0 gibt es keine Animation. Je höher der Wert ist, desto schneller läuft die Animation ab.
Horizontaler Effekt
Expansion	Das Ausmaß der horizontalen Ausdehnung des Bilds.
Kontraktion	Das Ausmaß der horizontalen Kontraktion des Bilds.
Vertikaler Effekt
Expansion	Das Ausmaß der vertikalen Ausdehnung des Bilds.
Kontraktion	Das Ausmaß der vertikalen Kontraktion des Bilds.
Dauer
Expansion	Die Dauer in Sekunden, während der das Bild vollständig auseinandergezogen bleibt.
Kontraktion	Die Dauer in Sekunden, während der das Bild vollständig zusammengezogen bleibt.
Kurven
Horizontal	Die Anzahl der durch die horizontale Verzerrung entstehenden Kurven.
Vertikal	Die Anzahl der durch die vertikale Verzerrung entstehenden Kurven.

Einblenden

Beim Effekt "Einblenden" wird der entsprechende Teil eines zweiten Bilds in einem elliptischen Fokusbereich dargestellt.

  

Eigenschaft	Beschreibung
Bilder
Basis	Das Bild außerhalb des Fokusbereichs. Mit der Schaltfläche Bilder austauschen  können Sie zwischen dem Basisbild und dem sichtbaren Bild wechseln.
Sichtbar	Das im Fokusbereich sichtbare Bild. Mit der Schaltfläche Bilder austauschen  können Sie zwischen dem sichtbaren Bild und dem Basisbild wechseln.
Fokus
Radius	Der Radius des Fokusbereichs entlang der X- und Y-Achse. Mit der Schaltfläche Radiusverhältnis sperren  wird das Seitenverhältnis beibehalten, wenn Sie einen Radius ändern.
Weiche Kante	Die Weichheit des Rands des Fokusbereichs. Bei 0 erhält der Fokusbereich einen scharfen Rand. Bei größeren Werten wird der Rand des Fokusbereichs zunehmend unschärfer.
Effekt	Wenn das Kästchen Sichtbar bleiben angeklickt ist, bleibt das eingeblendete Bild auch nach dem Verschieben des Fokusbereichs sichtbar.
Animation
Automatische Wiedergabe	Das Bewegungsmuster für den Fokusbereich: Wandern (Standard): Der Fokusbereich bewegt sich nach dem Zufallsprinzip über das Bild. Umlaufendes Wandern: Der Fokusbereich bewegt sich nach dem Zufallsprinzip über das Bild und erscheint auf der gegenüberliegenden Seite des Bilds, wenn er den Rand erreicht. Kreis: Der Fokusbereich bewegt sich in einem Kreis. Ohne
Geschwindigkeit	Die Geschwindigkeit des Fokusbereichs. Bei 0 gibt es keine Animation. Je höher der Wert ist, desto schneller läuft die Animation ab.
Interaktion	Wenn das Kästchen Maus folgen angeklickt ist, folgt der Fokusbereich dem Mauszeiger.

Welle

Teile des Bilds werden in einem Wellenmuster animiert.

   

Eigenschaft	Beschreibung
Bilder
Basis	Das Bild, auf das der Effekt angewendet werden soll.
Welle
Typ	Die bei dem Effekt verwendete Wellenform: Standard: Durch die Animation wird das Bild wellenförmig. Linse: Durch die Animation wird das Bild in einem symmetrischen Wellenmuster auseinander- und zusammengezogen.
Ausrichtung	Die Richtung der Wellenanimation: Horizontal Vertikal
Geschwindigkeit	Die Geschwindigkeit der Wellenanimation. Bei 0 gibt es keine Animation. Je höher der Wert ist, desto schneller läuft die Animation ab.
Größe	Die Stärke der Wellenform. Bei 0 entsteht keine Wellenform. Je größer der Wert ist, desto ausgeprägter ist die Wellenbildung.
Länge	Der Abstand zwischen den Wellenkuppen. Je kürzer der Abstand ist, desto mehr Wellen entstehen.
Rückwärts	Wenn das Kästchen Rückwärts angeklickt ist, verlaufen die Wellen bei der horizontalen Ausrichtung von links nach rechts bzw. bei der vertikalen Ausrichtung von unten nach oben.
Zuschneiden	Wenn das Kästchen Zuschneiden angeklickt ist, wird das Bild für jeden Frame der Animation neu gezeichnet, sodass kein Nachzieheffekt entsteht.
Erweitert
Wellenbereich	Der Teil des Bilds, auf den sich der Welleneffekt auswirkt.
Volle Stärke	Der Teil des Bilds, in dem der Welleneffekt in maximaler Stärke auftritt. Der Effekt wird in den anderen Teilen des Wellenbereichs schwächer.

Ereignisse und Aktionen

Von der Komponente "Bildeffekt" ausgelöste Ereignisse

Sie können basierend auf dem folgenden Ereignis der Komponente "Bildeffekt" andere Aktionen auslösen:

Ereignis	Beschreibung
Automatische Wiedergabe beendet	Wird ausgelöst, wenn bei der automatischen Wiedergabe der Animation das Zeitlimit erreicht wurde.

Von der Komponente "Bildeffekt" und den einzelnen Effekten ausgeführte Aktionen

Die folgenden Aktionen der Komponente "Bildeffekt" können als Reaktion auf andere Ereignisse ausgelöst werden:

• Wiedergabe
• Pause

Wenn Sie eine dieser Aktionen im Dialogfeld "Ereignis" auswählen, legen Sie die Komponente "Bildeffekt" oder den jeweiligen Effekt als Empfänger fest.

Informationen zum Konfigurieren von Ereignissen

Vorschau

Während Sie im Dialogfeld "Bildeffekt" arbeiten, sehen Sie im Anzeigebereich, wie die Komponente animiert dargestellt wird. Wenn Sie Eigenschaften ändern, wird die Animation an den Anfang zurückgesetzt.

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