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!