Animationen im erweiterten Modus erstellen

Die Zeitachse im erweiterten Modus

Im erweiterten Modus können Sie jedes Element animieren, indem Sie Keyframes zur Zeitachse hinzufügen, die Beginn und Ende der Animation angeben. Sie bearbeiten die Elemente in bestimmten Keyframes und Google Web Designer erstellt den Übergang dazwischen.

Der Abstand zwischen den Keyframes wird Spanne genannt und bestimmt die Dauer der einzelnen Animationen. Wenn Sie beispielsweise eine Animation schneller abspielen lassen möchten, sollten Sie den Abstand zwischen den Keyframes verkleinern. Mit Easing-Funktionen können Sie die Beschleunigung und Verzögerung eines Übergangs ändern.

So animieren Sie ein Element im erweiterten Modus:

1. Fügen Sie einen Keyframe hinzu. Klicken Sie dazu mit der rechten Maustaste auf die Zeitachse und wählen Sie Keyframe einfügen aus.
2. Ändern Sie die Eigenschaften des Elements und geben Sie an, wie sie am Ende der Animation aussehen sollen. Sie können beispielsweise die Position, Farbe oder Deckkraft des Elements oder sogar alle drei Eigenschaften ändern.

Außerdem können Sie weitere Keyframes hinzufügen, um mehrere Spannen für dasselbe Element aneinanderzureihen. Wenn das Element eine Zeit lang unverändert bleiben und anschließend wieder animiert werden soll, fügen Sie einen Keyframe hinzu, aber ändern Sie dessen Eigenschaften nicht.

Beispiel

Für die Animation des Bildes oben, das eingeblendet, angehalten und dann nach links verschoben wird, wurden vier Keyframes verwendet.

1. Mit dem ersten Keyframe werden die Einstellungen des Elements am Anfang der Animation festgelegt. In diesem Fall wurde für die Deckkraft des Bildes "0" ausgewählt, sodass es nicht sichtbar ist.
2. Im zweiten Keyframe wurde für die Deckkraft des Elements „1“ ausgewählt (100 %). Das Bild wird während der vorangehenden Spanne von einer Sekunde eingeblendet.
3. Im dritten Keyframe wurden die Eigenschaften des vorherigen Keyframes beibehalten und nicht geändert. Während dieser halben Sekunde ist keine Animation zu sehen. Das Bild bleibt unverändert.
4. Im letzten Keyframe wurde die Position des Elements geändert, sodass die rechte Hälfte des Bildes im Anzeigebereich sichtbar ist. Das Bild wird nach links auf diese Position verschoben. Das dauert eine Sekunde.

Wenn Sie sich die ausgewählten Eigenschaften für einen bestimmten Keyframe ansehen möchten, klicken Sie mit der rechten Maustaste auf den Keyframe und wählen Sie im Pop-up-Menü Animierte Eigenschaften aus.

So fügen Sie einen Keyframe hinzu

Sie haben mehrere Möglichkeiten, um einen Keyframe hinzuzufügen. Wählen Sie auf der Zeitachse die Ebene des Elements aus, das animiert werden soll, und verschieben Sie den Abspielkopf an die Stelle, an der Sie den Keyframe einfügen möchten. Sie können auch mehrere Ebenen auswählen, wenn Sie während der Auswahl Strg bzw. ⌘ drücken. Führen Sie dann einen der folgenden Schritte durch:

• Klicken Sie mit der rechten Maustaste auf die Zeitachse und wählen Sie im Pop-up-Menü Keyframe einfügen aus.
• Drücken Sie F6.
• Wählen Sie im Menü "Bearbeiten" die Option Zeitachse > Keyframe hinzufügen aus.

Wenn Sie die Eigenschaften eines animierten Elements ändern, der Abspielkopf sich aber nicht in einem Keyframe befindet, fügt Google Web Designer automatisch einen Keyframe an der Position des Abspielkopfs hinzu.

Dauer im Arbeitsbereich der Zeitachse

Wenn Sie einen Keyframe über das Ende der Zeitachse hinaus hinzufügen möchten, können Sie den Arbeitsbereich verlängern. Beispiel: Die Standardlänge beträgt 12 Sekunden, Sie möchten aber einen Keyframe nach 15 Sekunden hinzufügen. So verlängern Sie den Arbeitsbereich der Zeitachse:

1. Klicken Sie oberhalb der Zeitachse auf die Längenangabe.

   

2. Geben Sie einen neuen Wert für die Länge der Zeitachse in Sekunden ein. Der Mindestwert beträgt 12 Sekunden.
3. Drücken Sie die Eingabetaste.

Der Arbeitsbereich der Zeitachse muss lang genug sein, um Platz für Ihre Animationen zu bieten. Eine überschüssige Länge hat keinen Einfluss auf die Wiedergabezeit Ihrer Animation.

Die Zeitachsen von Videoanzeigen können maximal 5 Minuten lang sein.

Zeitachsenskalierung

Ziehen Sie den Schieberegler für den Zoom rechts oben auf der Zeitachse, um die Skalierung der Zeitachse anzupassen. Das Heranzoomen kann nützlich sein, wenn Keyframes eng nebeneinander positioniert wurden. Der Zoomfaktor ändert nur die Ansicht der Zeitachse und beeinflusst nicht das Timing der Animationen.

Wenn Sie die Länge einer aus mehreren Keyframes bestehenden Animation ändern möchten, können Sie mehrere Spannen skalieren, um sie proportional länger oder kürzer zu machen.