-
Hallo!
Mein Name ist Nathalie.
-
Ich bin Entwicklerin
im Google Web Designer-Team.
-
In diesem Video zeige ich Ihnen,
-
wie Sie im Schnellmodus der Zeitachse
-
Animationen erstellen können.
-
Der Schnellmodus der Zeitachse
-
ist eins von zwei Animationstools.
-
In diesem Modus lassen sich
viele Dateien standardmäßig öffnen.
-
Das andere Tool ist der erweiterte Modus,
-
den Sie durch Klicken
auf diese Schaltfläche
-
rechts oben im Steuerfeld
"Zeitachse" aktivieren.
-
Zum erweiterten Modus
-
gibt es ein eigenes Video.
-
Hier geht es nur um den Schnellmodus
-
und einige Möglichkeiten, die er bietet.
-
Sehen wir uns ein Beispiel an.
-
Ich habe diese Liste mit Schaltflächen.
-
Angenommen, ich möchte,
dass sie nacheinander
-
von links ins Bild kommen.
-
Als Erstes positioniere ich sie
-
am gewünschten Ausgangspunkt,
-
der sich
außerhalb der Seite links befindet.
-
Dann klicke ich hier unten
im Steuerfeld "Zeitachse"
-
auf das Plus,
um nach einer halben Sekunde
-
eine neue Szene einzufügen.
-
Das können wir später noch anpassen.
-
In dieser Szene ordne ich
meine Elemente dort an,
-
wo sie sich nach einer halben Sekunde
in der Animation befinden sollen.
-
Ich möchte, dass nur die Schaltfläche
"ABOUT" auf der Seite sichtbar ist.
-
Dasselbe noch einmal.
-
Jetzt kommt die Schaltfläche "GALLERY"
-
von links ins Bild.
-
Und zum Schluss
-
die Schaltfläche "CONTACT".
-
Jetzt haben wir eine Animation.
-
Wenn Sie
auf die Miniaturansichten klicken,
-
wird eine Vorschau der Animation
-
zum jeweiligen Zeitpunkt angezeigt.
-
Sie können auch auf "Wiedergabe" klicken,
-
um eine Livevorschau der Animation
auf dem Anzeigebereich zu starten.
-
Mit dieser kleinen Schaltfläche "Schleife"
wird die Vorschau endlos wiederholt,
-
damit Sie Fehler
in der Animation beheben können.
-
Wie wir gesehen haben,
steht die Zahl "0,5"
-
zwischen zwei Miniaturansichten
für den Zeitraum zwischen jedem Übergang,
-
also zwischen zwei Szenen.
-
Wenn Sie darauf klicken,
können Sie den Zeitraum
-
verlängern oder verkürzen.
-
Ich lege hier mal 1 Sekunde fest.
-
Außerdem lässt sich das Easing anpassen.
-
Das ist die Bézierkurve,
-
die zur Berechnung der Werte
zwischen zwei Szenen
-
für alle Animationen verwendet wird.
-
Hier sind alle standardmäßigen
CSS-Easing-Funktionen verfügbar.
-
Klicken Sie doch einfach mal durch.
-
Die Funktion "ease-in-out" ist toll,
weil sie die Bewegungen in der realen Welt
-
ziemlich gut simuliert.
-
In der Vorschau sehen wir,
dass für den Übergang zwischen
-
den Miniaturansichten 3 und 4
"ease-in-out" verwendet wird
-
und der Übergang 1 Sekunde dauert.
-
Ich hoffe, diese Grundlagen
-
helfen Ihnen
beim Erstellen von Animationen
-
im Schnellmodus.
-
Die Verwendung ist einfach,
-
bei sehr komplexen Animationen
-
stoßen Sie jedoch
an die Grenzen des Möglichen.
-
Wenn Sie zum Beispiel
viele Elemente haben,
-
die gleichzeitig animiert werden,
-
und Sie möchten
die Keyframes und Übergänge
-
aller animierten Elemente
einzeln bearbeiten,
-
oder wenn Sie benutzerdefinierte
Easing-Funktionen erstellen
-
oder Ihre Inhalte
interaktiv gestalten möchten,
-
müssen Sie
auf den erweiterten Modus zurückgreifen.
-
Dazu gibt es ein separates Video
-
mit detaillierten Anleitungen.
-
Das wars von mir.
-
Vielen Dank fürs Zusehen!
