Bewegungspfade

Mithilfe von Bewegungspfaden können Sie Objekte animieren, die sich an Kurven und komplexen Formen entlangbewegen. Ähnlich wie bei Linien, die mit dem Stifttool gezeichnet wurden, können Sie Bewegungspfade definieren, indem Sie Ankerpunkte festlegen, die durch gerade oder kurvenförmige Linien miteinander verbunden sind.

Die Bewegungspfad-Animation wird mittels CSS näherungsweise umgesetzt, sodass animierte Elemente nicht unbedingt genau ihren Bewegungspfaden folgen. Im Allgemeinen sollte der Unterschied nicht wahrnehmbar sein. Standardmäßig beträgt er weniger als ein Pixel. Sie können die Größe der Abweichung in den Bewegungspfadeigenschaften begrenzen.

Bewegungspfade

Themen in diesem Artikel:

• Bewegungspfade ansehen
  • Ankerpunkte
  • Ziehpunkte
• Bewegungspfade bearbeiten
  • Form von Bewegungspfaden bearbeiten
  • Bewegungspfade umwandeln
  • Animationsgeschwindigkeit bearbeiten
• Optimierung
• Eigenschaften von Bewegungspfaden
• Beschränkungen

Bewegungspfade ansehen

Wählen Sie ein einzelnes Element oder eine Gruppe aus, um die Linien für den Bewegungsverlauf während der Animation sowie die Ankerpunkte zu sehen.

Es kann nur ein Bewegungspfad auf einmal angezeigt werden.

Ankerpunkte

Es gibt zwei Möglichkeiten zum Festlegen von Ankerpunkten:

• Bei Verwendung von Miniaturansichten oder Keyframes, durch die eine neue x- oder y-Position für das Element angegeben wird, werden Ankerpunkte automatisch generiert. Der Start- und der Endankerpunkt befinden sich immer bei Keyframes.
• Mithilfe des Tools Bewegungspfad können Sie Ankerpunkte entlang des Bewegungspfads hinzufügen.

Ziehpunkte

Ziehpunkte sind sichtbar, wenn das Tool Bewegungspfad  ausgewählt ist. Jedes Segment zwischen Ankerpunkten hat zwei Ziehpunkte, die jeweils mit einem der Ankerpunkte verknüpft sind. Durch die Länge und die Richtung eines Ziehpunkts wird der Krümmungsgrad des Bewegungspfads angegeben. Bei geraden Linien liegen die Ziehpunkte genau auf dem Segment oder sind minimiert.

Bewegungspfade bearbeiten

Form von Bewegungspfaden bearbeiten

Bewegungspfade können einfache Kurven, geschlossene Formen wie Polygone und Kreise oder komplexe Umrisse anderer Objekte sein. So ändern Sie die Form eines Bewegungspfads:

Ankerpunkt hinzufügen

• Fügen Sie eine Miniaturansicht oder einen Keyframe hinzu, durch die bzw. den die Position des Elements geändert wird. Dadurch wird ein Ankerpunkt hinzugefügt, über den Sie das Easing ändern können.
• Mit der Option Ankerpunkt hinzufügen  im Tool „Bewegungspfad“  können Sie auf einen Punkt des Bewegungspfads klicken, um einen Ankerpunkt hinzuzufügen und den Bewegungspfad an dieser Stelle zu fixieren. Wenn Sie einen Ankerpunkt auf diese Weise hinzufügen, wird keine Miniaturansicht und kein Keyframe hinzugefügt.

Krümmung anpassen

• Wenn das Tool Auswahl oder die Standardoption  im Tool „Bewegungspfad“  ausgewählt ist, können Sie die Form des Bewegungspfads durch Ziehen eines beliebigen Punkts auf dem Pfad ändern. Auch Ankerpunkte können dann gezogen werden.
• Wenn das Tool Bewegungspfad  ausgewählt ist, lässt sich die Krümmung des Pfads mithilfe der Ziehpunkte verändern. Ziehen Sie diese einfach auf die gewünschte Länge und den gewünschten Winkel. Wenn mit demselben Ankerpunkt ein weiterer Ziehpunkt verknüpft ist, wird dessen Winkel automatisch entsprechend angepasst, sofern Sie nicht die Alt-Taste gedrückt halten.
• Klicken Sie doppelt auf einen Ankerpunkt, um die verknüpften Ziehpunkte zu minimieren. Wenn Sie noch einmal doppelt klicken, werden die Ziehpunkte maximiert.

  Ein Doppelklick auf beide Ankerpunkte begradigt den Bewegungspfad.

Ankerpunkt löschen

• Mit der Option Ankerpunkt löschen  im Tool „Bewegungspfad“  können Sie vorhandene Ankerpunkte durch Anklicken entfernen. Hat ein mit einer Miniaturansicht oder einem Keyframe verknüpfter Ankerpunkt keine anderen Animationseigenschaften als den Bewegungspfad, wird beim Löschen des Ankerpunkts auch die Miniaturansicht bzw. der Keyframe gelöscht.
• Durch das Löschen einer Miniaturansicht oder eines Keyframes wird das Segment des Bewegungspfads gelöscht, das an dieser Miniaturansicht bzw. diesem Keyframe endet.

Bewegungspfade umwandeln

Sie können Bewegungspfade verschieben, sie drehen oder kippen und ihre Größe ändern. Wählen Sie dazu das Tool „Bewegungspfad“  aus und klicken Sie in den Tooloptionen auf das Kästchen Umwandlungssteuerung. Ist diese Option aktiviert, werden die Steuerelemente zur Umwandlung angezeigt, sobald Sie ein Element mit einem Bewegungspfad auswählen.

Bewegungspfad verschieben

Ziehen Sie den Bewegungspfad an eine neue Position im Anzeigebereich.

Größe des Bewegungspfads ändern

• Durch das Feld zum Anpassen der Größe erhält der Bewegungspfad eine blaue Umrandung mit Ziehpunkten in den Ecken und an den Seiten. Ziehen Sie einen Ziehpunkt, um die Größe des Bewegungspfads zu ändern.
• Halten Sie beim Ziehen die Umschalttaste gedrückt, damit das ursprüngliche Seitenverhältnis erhalten bleibt.
• Halten Sie beim Ziehen die Alt-Taste gedrückt, damit der Bewegungspfad an der selben Stelle zentriert bleibt.
• Wenn Sie die Größe des Bewegungspfads in einer anderen Richtung ändern möchten, können Sie das Feld zum Anpassen der Größe drehen. Dazu geben Sie in den Tooloptionen in das Feld  einfach die gewünschte Drehung in Grad ein. Sie können auch die Alt-Taste (Windows) oder die Optionstaste (Mac) gedrückt halten und gleichzeitig die linke oder rechte Pfeiltaste drücken, um das Feld zum Anpassen der Größe um 5° zu drehen. Das Feld wird immer wieder auf 0° zurückgesetzt, daher sollten Sie die gewünschte Drehung anhand der aktuellen Ausrichtung einstellen. Durch das Drehen des Felds zum Anpassen der Größe wird die Ausrichtung des Bewegungspfads selbst nicht geändert.
• Um die Ausrichtung des Felds zum Anpassen der Größe zurückzusetzen, klicken Sie doppelt auf das innere Rotationssteuerelement – den kleineren Kreis. Dadurch wird auch die Drehpunktposition zurückgesetzt.

Bewegungspfad kippen

• Ziehen Sie einen Ziehpunkt über den Ziehpunkt auf der entgegengesetzten Seite.

Bewegungspfad drehen

• Ziehen Sie das äußere Rotationssteuerelement – den größeren Kreis – im Uhrzeigersinn oder gegen den Uhrzeigersinn, um den Bewegungspfad zu drehen.
• Halten Sie beim Ziehen die Umschalttaste gedrückt, um die Drehung auf 45°-Schritte zu beschränken.
• Um den Drehpunkt für die Rotation zu verschieben, ziehen Sie das innere Rotationssteuerelement – den kleineren Kreis – an eine andere Stelle. Setzen Sie die Position des Drehpunkts zurück, indem Sie doppelt auf das innere Rotationssteuerelement klicken. Dadurch wird auch die Ausrichtung des Felds zum Anpassen der Größe zurückgesetzt.

Bewegungspfad bearbeiten

Animationsgeschwindigkeit bearbeiten

Sie können die Geschwindigkeit eines Objekts entlang seines Bewegungspfads anpassen, indem Sie die Zeitangaben für die Miniaturansichten oder Keyframes und das Easing zwischen ihnen ändern. Sie können Bewegungspfadanimationen auch als Schleife wiedergeben.

Ankerpunkte, die mit dem Bewegungspfadtool hinzugefügt wurden, haben keinen Einfluss auf die Animationsgeschwindigkeit. Fügen Sie stattdessen eine Miniaturansicht oder einen Keyframe hinzu.

Optimierung

Immer wenn Sie einen Bewegungspfad erstellen oder bearbeiten, wird die Animation von Google Web Designer automatisch optimiert. Dadurch verringert sich die Menge an CSS-Code für das Rendering. Gleichzeitig werden die Toleranzen eingehalten, die Sie in den Bewegungspfadeigenschaften angegeben haben. Je geringer die Toleranzen, desto genauer folgt die Animation dem Bewegungspfad, aber desto weniger Optimierung ist möglich.

Um eine zusätzliche Komprimierung zu erreichen, können Sie in den Bewegungspfadeigenschaften auf Kurve optimieren  klicken. Dieser Vorgang kann mehr Zeit als die automatische Optimierung in Anspruch nehmen.

Google Web Designer zeigt im Steuerfeld „Eigenschaften“ an, wie viel Speicherplatz der Bewegungspfad des ausgewählten Elements schätzungsweise erfordert, nachdem das Dokument veröffentlicht wurde.

Bewegungspfadeigenschaften

Die Bewegungspfadeigenschaften erscheinen im Steuerfeld „Eigenschaften“, sobald Sie einen Ankerpunkt mithilfe des Tools Bewegungspfad hinzugefügt oder eine Krümmung für den Bewegungspfad festgelegt haben.

Eigenschaft	Beschreibung
Auf den Pfad ausrichten	Bei Aktivierung dieser Option wird das Element während der Animation in Richtung des Bewegungspfads gedreht. Wenn die Kurve eines Bewegungspfads z. B. nach unten verläuft, wird das Element nach unten geneigt. Sie können die Genauigkeit der Rotation über die Eigenschaft Winkeltoleranz festlegen.
Lagetoleranz	Hiermit wird festgelegt, wie weit das Element vom Bewegungspfad abweichen darf. Standardeinstellung: 0,5 px Minimum: 0,1 px Maximum: 100 px
Winkeltoleranz	Hiermit wird festgelegt, wie stark die Ausrichtung des Elements von der Ausrichtung des Bewegungspfads abweichen darf. Dies gilt nur bei Auswahl der Option Auf den Pfad ausrichten. Standardeinstellung: 1° Minimum: 1° Maximum: 360°
Kurve optimieren	Klicken Sie auf die Schaltfläche , um den Umfang des CSS-Codes zu verringern, durch den die Animation des Bewegungspfads umgesetzt wird. Nach der Optimierung wird die Schaltfläche deaktiviert, bis der Bewegungspfad wieder geändert wird.
Geschätzte Größe	Hier wird angezeigt, wie viel Speicherplatz der Bewegungspfad schätzungsweise erfordert. Klicken Sie auf die Schaltfläche Kurve optimieren, um eine zusätzliche Komprimierung zu erreichen.

Beschränkungen

• Oben-links-Positionierung: Bei Bewegungspfaden wird keine Oben-links-Positionierung unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft transform (Standardeinstellung).
• 3D-Animation: Google Web Designer unterstützt keine 3D-Bewegungspfade. Sie können aber 3D-Verschiebungen separat auf das Element anwenden.
• CSS-Steuerfeld: Das CSS-Steuerfeld hat keinen Einfluss auf Bewegungspfade, obwohl Stile auf das Element selbst angewendet werden.
• Codeansicht: In der Codeansicht können Sie Bewegungspfade weder sehen noch bearbeiten.
• Bildanzeigen: In Bildanzeigen steht das Tool „Bewegungspfad“ nicht zur Verfügung.