Timeline Advanced Mode Overview - Google Web Designer

Hallo! Ich heiße Natalie und bin
Entwicklerin für Google Web Designer.

In diesem Video geht es darum,

wie man Animationen mithilfe des
erweiterten Zeitachsen-Modus erstellt.

Der Zeitachsenbereich
befindet sich standardmäßig unten.

Übrigens ist dies eines
von zwei Zeitachsen-Tools.

Das andere ist der
einfache Zeitachsen-Modus.

Viele Dateien werden
im einfachen Modus geöffnet.

Über diese Schaltfläche rechts oben
kann man den Modus wechseln.

Das ist also der einfache Modus
und das der erweiterte Modus.

Zum einfachen Modus
gibt es eine eigene Anleitung.

Hier geht es nur
um den erweiterten.

Er ist zwar komplexer, dafür hat man
damit aber auch mehr Möglichkeiten.

Zur Übung habe ich hier
diese kleine animierte Werbeanzeige.

Sie besteht aus einem
sich bewegenden Bild,

zwei Textfeldern, die ein- und
ausgeblendet werden, und einem Logo.

In diesem Video zeige ich Ihnen,
wie man die Anzeige

mit Google Web Designer erstellt.

Zuerst beschäftigen wir uns
mit dem animierten Bild.

Wir ziehen es in den Anzeigebereich

und positionieren es so, wie es zu Beginn
der Animation erscheinen soll – also dort.

Später wird es sich dann
auf diese Weise verschieben.

Hier ist jetzt eine Spur
auf der Zeitachse zu sehen.

Das ist eine Zeitachsen-Ebene
und das die UI,

auf der wir die Animation für das Objekt
zeitlich gestalten.

Bei Animationen geht es darum,
Keyframes festzulegen.

Das sind Zeitpunkte, an denen ein Element
bestimmte Eigenschaftswerte hat.

Danach legen wir fest, wie lange der
Übergang zwischen diesen Werten sein soll.

Damit sich das Bild verschiebt,
erstellen wir mehrere Keyframes.

Es soll etwa eine Sekunde stillstehen.

Also setze ich einen Keyframe
nach einer Sekunde.

Dazu klicke ich mit der rechten Maustaste
und wähle "Keyframe einfügen".

Eine halbe Sekunde später dann
einen weiteren, bei dem ich das Bild

an die Position verschiebe, wo es
zu diesem Zeitpunkt stehen soll.

Dann soll es noch einmal
eine Sekunde stillstehen.

Und wieder eine halbe Sekunde später
soll es komplett verschwinden.

Wenn man jetzt den Abspielknopf zieht,
erhält man mit Scrubbing

eine Vorschau der Animation.

Man kann auch links auf die
Schaltfläche "Wiedergabe" klicken

und sich die Vorschau
direkt im Anzeigebereich ansehen.

Das sieht gut aus.

Nächster Schritt: In der fertigen Anzeige
wird das Bild ganz am Anfang eingeblendet

und verschiebt sich dann später.

Also beschäftigen wir uns jetzt
mit dieser Einblende-Animation.

Ich wähle mit dem Laufrahmen-Tool
alle Keyframes aus,

verschiebe sie, um für die Einblendung
am Anfang Platz zu schaffen,

und füge dann bei "0"
einen neuen Keyframe ein.

An diesem Keyframe soll
der Deckungsgrad des Elements "0" sein.

An allen anderen Keyframes
soll er bei 100 % liegen.

Als Nächstes kommt der Text.

Es gibt zwei Textfelder,

die nacheinander eingeblendet werden,
während sich das Bild verschiebt.

Also erstelle ich das erste Textfeld.

Das erste Textfeld soll
eingeblendet werden,

sich in dieser Zeitspanne hier nicht
verändern und dann ausgeblendet werden,

wenn sich das Bild verschiebt.

Als Erstes stelle ich den Deckungsgrad
dieses Textfelds auf "0",

denn das ist der Ausgangspunkt.

Dann setze ich nach einer halben Sekunde
einen Keyframe

und stelle den Deckungsgrad auf 100 %.

Nach eineinhalb Sekunden
sollen es noch 100 % sein

und nach zwei Sekunden wieder 0 %.

Man kann einen Keyframe also
so wie bisher einfach einfügen.

Man kann Keyframes aber auch duplizieren.

Wenn Sie die Alt-Taste gedrückt halten,
können Sie ein solches Duplikat erstellen

und an einen anderen Zeitpunkt ziehen.

Dadurch können Sie
bei einigen Animationen Zeit sparen.

Jetzt füge ich noch
den letzten Keyframe hinzu,

wo das Textfeld verschwindet.

Jetzt kann man sich alles
in der Vorschau ansehen.

Perfekt.

Das zweite Textfeld stimmt
mit dem ersten überein.

Nur der Text ist anders
und das Feld ist erst zu sehen,

wenn das erste ausgeblendet ist.

Deshalb spare ich etwas Zeit
und dupliziere diese Ebene

zusammen mit der Animation,
indem ich mit der rechten Maustaste klicke

und "Ebene duplizieren" auswähle.

Dann kann ich wieder den Laufrahmen
verwenden, um alle Keyframes auszuwählen

und dorthin zu verschieben,
wo die Animation einsetzen soll.

Ich verschiebe die Keyframes
an die Stelle, wo das erste Textfeld

aus- und das zweite eingeblendet wird,
damit kein Überblenden entsteht.

Wenn Keyframes so dicht beieinander sind,
kann man den Zoom-Schieberegler nutzen,

um die Ansicht der Animation zu vergrößern.

Nun aktualisiere ich noch den Text.

Jetzt habe ich hier diese
zwei Textfelder übereinander.

Wenn ich jetzt hierhin klicke,
bearbeite ich eventuell das obere.

Deshalb sperre ich es, damit ich es
nicht versehentlich aktiviere.

So kann ich das untere bearbeiten.

Jetzt ist die Animation quasi fertig.

Sehen wir uns noch an,
was zwischen den Keyframes passiert.

Zwischen zwei Keyframes
steht jetzt jeweils "Linear".

Das bezieht sich auf
die CSS-Easing-Funktion,

mit der Werte zwischen zwei
Keyframes berechnet werden.

"Linear" bedeutet also, dass sich
die Werte gleichmäßig verändern.

Weitere Optionen: Wenn man
mit der rechten Maustaste klickt,

sind alle
Standard-Easing-Funktionen nutzbar,

die in den CSS-Spezifikationen
angegeben sind.

Vor allem bei diesem Übergang,

wo sich das Bild von einer Hälfte
zur anderen verschiebt,

ist es ratsam, eine andere Easing-Funktion
zu wählen, z. B. "Ease-in-out".

Dabei wird die Bewegung zuerst schneller

und kurz vor dem Stillstand
wieder langsamer.

Das erinnert an Bewegungen
in realer Umgebung.

Jetzt begrenze ich meinen Vorschaubereich
mit diesen gelben Ziehpunkten

auf diesen Übergang hier.

Dann stelle ich für die Vorschau
eine Endlosschleife ein

und sehe mir nur diesen Bereich an,

um Fehler bei diesem Übergang zu beheben.

Das sieht gut aus.

Statt vordefinierte Funktionen zu nutzen,
kann man auch eigene erstellen.

Dazu klicke ich mit der rechten Maustaste
und wähle "Easing-Optionen…" aus.

Dann kann ich diese Bézierkurve
so anpassen, wie ich möchte,

eine eigene Voreinstellung speichern

und zum Übernehmen auf "OK" klicken.

So viel zu dieser Anleitung.
Wer mehr wissen möchte,

kann sich detailliertere
Anleitungen zu Animationen ansehen.

Das wars. Vielen Dank fürs Zusehen!