Easing-Funktionen

Mit Easing-Funktionen können Sie die Beschleunigung und Verzögerung bei Animationsübergängen ä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.

Easings im Schnellmodus

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

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

So ändern Sie Easings 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.

Easings im erweiterten Modus

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

So ändern Sie Easings 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 markieren Sie sie im Dialogfeld "Easing-Optionen" 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, markieren Sie diese im Dialogfeld "Easing-Optionen" 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.
War das hilfreich?
Wie können wir die Seite verbessern?