Easing

Mit Easing können Sie die Beschleunigung und Verzögerung eines Animationsübergangs ändern. Google Web Designer umfasst die fünf standardmäßigen Easing-Funktionen gemäß CSS3-Spezifikation sowie schrittweise Übergänge und eine benutzerdefinierte Easing-Option im erweiterten Modus.

Hinweis: Für Texteffekte sind andere Easing-Optionen verfügbar.

Easing im Schnellmodus

Im Schnellmodus wird dasselbe Easing auf alle animierten Elemente zwischen Miniaturansichten angewendet.

Wenn Sie das Easing im erweiterten Modus bearbeiten, wird beim Umschalten in den Schnellmodus als Easing-Typ eventuell "Gemischt" angezeigt.

So ändern Sie das Easing im Schnellmodus:

1. Klicken Sie zwischen den Miniaturansichten auf die Schaltfläche Keyframe-Optionen .
2. Der Übergangseditor wird geöffnet.
   

3. Klicken Sie im Übergangseditor auf die Pfeile, um die Standard-Easing-Voreinstellungen zu durchsuchen. Sie können die Dauer eines Easings auch ändern, indem Sie eine Zeitspanne in Sekunden eingeben oder indem Sie auf das Zeitfeld klicken und dies nach links oder rechts ziehen.

Standard-Easing-Voreinstellungen

Easing-Voreinstellung	Beschreibung
Linear	Animationen ändern sich mit konstanter Geschwindigkeit.
Ease	Animationen starten bei mittlerer Geschwindigkeit und werden gegen Ende langsamer.
Ease-Out	Animationen starten schnell und werden gegen Ende langsamer.
Ease-In	Animationen starten langsam und enden schnell.
Ease-In-Out	Animationen starten und enden langsam, sind in der Mitte jedoch schnell.
Step-End	Animationen bleiben während der Ease-Zeit auf der Startposition und springen dann sofort auf die Endposition.
Step-Start	Animationen springen sofort auf die Endposition.

Easing im erweiterten Modus

Im erweiterten Modus stehen zusätzliche Easing-Optionen zur Verfügung:

• Ändern des Easings zeitgleich für mehrere Zeitspannen
• Benutzerdefiniertes Easing festlegen
• Benutzerdefiniertes Easing als neue Voreinstellung speichern und für andere Zeitspannen wiederverwenden

So ändern Sie das Easing im erweiterten Modus:

1. Klicken Sie mit der rechten Maustaste auf eine Zeitspanne mit Animation, deren Easing Sie ändern möchten. Um mehrere Easings gleichzeitig zu bearbeiten, wählen Sie zusammenhängende Zeitachsen aus, indem Sie bei gedrückter Umschalttaste klicken, oder wählen Sie nicht zusammenhängende Zeitachsen aus, indem Sie beim Klicken unter Windows auf "Strg" oder auf einem Mac auf die Befehlstaste drücken und dann mit der rechten Maustaste eine der ausgewählten Zeitachsen anklicken. Easings werden nur bei Zeitspannen mit Animation geändert.

2. Wählen Sie eine der Easing-Voreinstellungen aus dem Pop-up-Menü aus oder wählen Sie Easing-Optionen... für Visualisierungen der Easing-Kurven oder zur Vorgabe von benutzerdefiniertem Easing aus.

So erstellen Sie ein benutzerdefiniertes Easing:

1. Klicken Sie mit der rechten Maustaste auf eine Zeitspanne und wählen Sie Easing-Optionen... aus, um das Dialogfeld "Easing" zu öffnen.
2. Wenden Sie eines der folgenden Verfahren an, um das Easing zu ändern:
   • Ziehen Sie an den Ziehpunkten, um die Form der Easing-Kurve anzupassen. Der Winkel des Zugpunkts bestimmt die Krümmung der Kurve und die Länge des Zugpunkts bestimmt die Stärke der Beschleunigung oder Verzögerung.
   • Geben Sie im Feld Kubische Bézierkurve die mathematische Notation cubic-bezier() der gewünschten Bézierkurve ein. Wenn Sie einen ungültigen Wert eingeben, wird das Feld rot unterstrichen.
3. Sie können das benutzerdefinierte Easing auch als Voreinstellung speichern, indem Sie auf Als neue Voreinstellung speichern klicken.
4. Klicken Sie auf Übernehmen, um dieses benutzerdefinierte Easing für die ausgewählte(n) Zeitspanne(n) zu verwenden.
   

Benutzerdefinierte Easing-Voreinstellungen

Wenn Sie ein bestimmtes benutzerdefiniertes Easing für mehrere Zeitspannen wiederverwenden möchten, speichern Sie es als Voreinstellung. Voreinstellungen haben die folgenden Vorteile:

• Schneller Zugriff. Easing-Voreinstellungen werden als Optionen im Pop-up-Menü angezeigt, wenn Sie mit der rechten Maustaste auf eine Zeitspanne klicken.
• Einfache Identifikation. Die Namen von Voreinstellungen werden auf der Zeitachse des erweiterten Modus angezeigt.

Benutzerdefinierte Voreinstellungen werden für Ihre persönliche Instanz von Google Web Designer gespeichert und können in verschiedenen Dokumenten verwendet werden. Wenn Sie ein Dokument mit der benutzerdefinierten Voreinstellung eines anderen Nutzers öffnen, ist anstelle des Namens der Voreinstellung die Angabe "benutzerdefiniert" zu sehen. Die Easing-Kurve selbst wird nicht geändert.

Um eine neue benutzerdefinierte Voreinstellung zu speichern, erstellen Sie im Dialogfeld "Easing-Optionen" ein benutzerdefiniertes Easing, klicken Sie anschließend auf Als neue Voreinstellung speichern und vergeben Sie einen Namen. Die Namen von Voreinstellungen und kubische Bézierkurven müssen eindeutig sein. Wenn vorhandene Zeitspannen denselben benutzerdefinierten Wert haben, sind sie nun mit dem Namen der benutzerdefinierten Voreinstellung gekennzeichnet.

Um eine benutzerdefinierte Voreinstellung umzubenennen, doppelklicken Sie darauf oder bewegen Sie sie im Dialogfeld "Easing-Optionen" den Mauszeiger darauf und klicken Sie dann neben dem Namen der Voreinstellung auf das Stiftsymbol. Bearbeiten Sie den Namen und drücken Sie anschließend die Eingabetaste. Alle Zeitspannen, für die diese Voreinstellung verwendet wird, sind jetzt mit dem neuen Namen gekennzeichnet.

Um eine benutzerdefinierte Voreinstellung zu löschen, bewegen Sie im Dialogfeld "Easing-Optionen" den Mauszeiger darauf und klicken Sie dann neben dem Namen der Voreinstellung auf das Papierkorbsymbol. Alle Zeitspannen, für die diese Voreinstellung verwendet wird, werden nun als benutzerdefiniert angezeigt. Ansonsten bleiben sie unverändert.

Sie können die Kurve einer vorhandenen Voreinstellung nicht bearbeiten. Erstellen Sie stattdessen eine neue benutzerdefinierte Voreinstellung und wenden Sie diese auf die Zeitspanne(n) an, die Sie ändern möchten.