1
00:00:03,285 --> 00:00:07,960
Hallo! Ich heiße Natalie und bin
Entwicklerin für Google Web Designer.

2
00:00:07,960 --> 00:00:09,980
In diesem Video geht es darum,

3
00:00:09,980 --> 00:00:14,098
wie man Animationen mithilfe des
erweiterten Zeitachsen-Modus erstellt.

4
00:00:14,400 --> 00:00:17,830
Der Zeitachsenbereich
befindet sich standardmäßig unten.

5
00:00:17,830 --> 00:00:20,160
Übrigens ist dies eines
von zwei Zeitachsen-Tools.

6
00:00:20,160 --> 00:00:22,480
Das andere ist der
einfache Zeitachsen-Modus.

7
00:00:22,480 --> 00:00:24,900
Viele Dateien werden
im einfachen Modus geöffnet.

8
00:00:24,900 --> 00:00:28,452
Über diese Schaltfläche rechts oben
kann man den Modus wechseln.

9
00:00:28,460 --> 00:00:31,480
Das ist also der einfache Modus
und das der erweiterte Modus.

10
00:00:31,480 --> 00:00:33,810
Zum einfachen Modus
gibt es eine eigene Anleitung.

11
00:00:33,810 --> 00:00:35,880
Hier geht es nur
um den erweiterten.

12
00:00:35,880 --> 00:00:39,850
Er ist zwar komplexer, dafür hat man
damit aber auch mehr Möglichkeiten.

13
00:00:39,850 --> 00:00:44,020
Zur Übung habe ich hier
diese kleine animierte Werbeanzeige.

14
00:00:44,020 --> 00:00:46,020
Sie besteht aus einem
sich bewegenden Bild,

15
00:00:46,020 --> 00:00:49,570
zwei Textfeldern, die ein- und
ausgeblendet werden, und einem Logo.

16
00:00:49,570 --> 00:00:52,100
In diesem Video zeige ich Ihnen,
wie man die Anzeige

17
00:00:52,100 --> 00:00:54,760
mit Google Web Designer erstellt.

18
00:00:54,760 --> 00:00:57,430
Zuerst beschäftigen wir uns
mit dem animierten Bild.

19
00:00:57,430 --> 00:01:01,260
Wir ziehen es in den Anzeigebereich

20
00:01:01,260 --> 00:01:05,530
und positionieren es so, wie es zu Beginn
der Animation erscheinen soll – also dort.

21
00:01:05,530 --> 00:01:08,848
Später wird es sich dann
auf diese Weise verschieben.

22
00:01:10,974 --> 00:01:13,640
Hier ist jetzt eine Spur
auf der Zeitachse zu sehen.

23
00:01:13,640 --> 00:01:16,420
Das ist eine Zeitachsen-Ebene
und das die UI,

24
00:01:16,420 --> 00:01:20,770
auf der wir die Animation für das Objekt
zeitlich gestalten.

25
00:01:20,772 --> 00:01:23,886
Bei Animationen geht es darum,
Keyframes festzulegen.

26
00:01:23,886 --> 00:01:27,870
Das sind Zeitpunkte, an denen ein Element
bestimmte Eigenschaftswerte hat.

27
00:01:27,870 --> 00:01:32,180
Danach legen wir fest, wie lange der
Übergang zwischen diesen Werten sein soll.

28
00:01:32,180 --> 00:01:36,067
Damit sich das Bild verschiebt,
erstellen wir mehrere Keyframes.

29
00:01:36,067 --> 00:01:38,150
Es soll etwa eine Sekunde stillstehen.

30
00:01:38,150 --> 00:01:40,440
Also setze ich einen Keyframe
nach einer Sekunde.

31
00:01:40,440 --> 00:01:43,820
Dazu klicke ich mit der rechten Maustaste
und wähle "Keyframe einfügen".

32
00:01:43,820 --> 00:01:46,960
Eine halbe Sekunde später dann
einen weiteren, bei dem ich das Bild

33
00:01:46,960 --> 00:01:51,760
an die Position verschiebe, wo es
zu diesem Zeitpunkt stehen soll.

34
00:01:51,760 --> 00:01:54,280
Dann soll es noch einmal
eine Sekunde stillstehen.

35
00:01:54,280 --> 00:01:58,820
Und wieder eine halbe Sekunde später
soll es komplett verschwinden.

36
00:02:00,830 --> 00:02:04,400
Wenn man jetzt den Abspielknopf zieht,
erhält man mit Scrubbing

37
00:02:04,400 --> 00:02:05,860
eine Vorschau der Animation.

38
00:02:05,860 --> 00:02:10,100
Man kann auch links auf die
Schaltfläche "Wiedergabe" klicken

39
00:02:10,100 --> 00:02:13,190
und sich die Vorschau
direkt im Anzeigebereich ansehen.

40
00:02:14,152 --> 00:02:15,555
Das sieht gut aus.

41
00:02:15,555 --> 00:02:21,130
Nächster Schritt: In der fertigen Anzeige
wird das Bild ganz am Anfang eingeblendet

42
00:02:21,130 --> 00:02:23,000
und verschiebt sich dann später.

43
00:02:23,010 --> 00:02:26,940
Also beschäftigen wir uns jetzt
mit dieser Einblende-Animation.

44
00:02:29,400 --> 00:02:32,342
Ich wähle mit dem Laufrahmen-Tool
alle Keyframes aus,

45
00:02:32,342 --> 00:02:35,550
verschiebe sie, um für die Einblendung
am Anfang Platz zu schaffen,

46
00:02:35,550 --> 00:02:37,950
und füge dann bei "0"
einen neuen Keyframe ein.

47
00:02:37,950 --> 00:02:44,050
An diesem Keyframe soll
der Deckungsgrad des Elements "0" sein.

48
00:02:48,680 --> 00:02:52,966
An allen anderen Keyframes
soll er bei 100 % liegen.

49
00:03:02,020 --> 00:03:03,360
Als Nächstes kommt der Text.

50
00:03:03,360 --> 00:03:06,880
Es gibt zwei Textfelder,

51
00:03:06,880 --> 00:03:11,990
die nacheinander eingeblendet werden,
während sich das Bild verschiebt.

52
00:03:11,990 --> 00:03:14,080
Also erstelle ich das erste Textfeld.

53
00:03:32,030 --> 00:03:34,200
Das erste Textfeld soll
eingeblendet werden,

54
00:03:34,200 --> 00:03:38,000
sich in dieser Zeitspanne hier nicht
verändern und dann ausgeblendet werden,

55
00:03:38,000 --> 00:03:39,580
wenn sich das Bild verschiebt.

56
00:03:39,580 --> 00:03:43,060
Als Erstes stelle ich den Deckungsgrad
dieses Textfelds auf "0",

57
00:03:43,060 --> 00:03:45,820
denn das ist der Ausgangspunkt.

58
00:03:45,820 --> 00:03:50,220
Dann setze ich nach einer halben Sekunde
einen Keyframe

59
00:03:50,220 --> 00:03:52,170
und stelle den Deckungsgrad auf 100 %.

60
00:03:52,170 --> 00:03:54,690
Nach eineinhalb Sekunden
sollen es noch 100 % sein

61
00:03:54,690 --> 00:03:58,397
und nach zwei Sekunden wieder 0 %.

62
00:03:58,397 --> 00:04:01,860
Man kann einen Keyframe also
so wie bisher einfach einfügen.

63
00:04:01,860 --> 00:04:04,500
Man kann Keyframes aber auch duplizieren.

64
00:04:04,600 --> 00:04:08,700
Wenn Sie die Alt-Taste gedrückt halten,
können Sie ein solches Duplikat erstellen

65
00:04:08,700 --> 00:04:10,680
und an einen anderen Zeitpunkt ziehen.

66
00:04:10,680 --> 00:04:13,700
Dadurch können Sie
bei einigen Animationen Zeit sparen.

67
00:04:14,500 --> 00:04:17,249
Jetzt füge ich noch
den letzten Keyframe hinzu,

68
00:04:17,249 --> 00:04:19,200
wo das Textfeld verschwindet.

69
00:04:19,490 --> 00:04:22,010
Jetzt kann man sich alles
in der Vorschau ansehen.

70
00:04:23,400 --> 00:04:24,630
Perfekt.

71
00:04:25,000 --> 00:04:28,670
Das zweite Textfeld stimmt 
mit dem ersten überein.

72
00:04:28,670 --> 00:04:31,100
Nur der Text ist anders
und das Feld ist erst zu sehen,

73
00:04:31,100 --> 00:04:32,630
wenn das erste ausgeblendet ist.

74
00:04:32,630 --> 00:04:35,380
Deshalb spare ich etwas Zeit
und dupliziere diese Ebene

75
00:04:35,380 --> 00:04:38,670
zusammen mit der Animation,
indem ich mit der rechten Maustaste klicke

76
00:04:38,670 --> 00:04:40,900
und "Ebene duplizieren" auswähle.

77
00:04:42,140 --> 00:04:46,820
Dann kann ich wieder den Laufrahmen
verwenden, um alle Keyframes auszuwählen

78
00:04:46,820 --> 00:04:49,910
und dorthin zu verschieben,
wo die Animation einsetzen soll.

79
00:04:51,700 --> 00:04:54,820
Ich verschiebe die Keyframes
an die Stelle, wo das erste Textfeld

80
00:04:54,820 --> 00:04:58,160
aus- und das zweite eingeblendet wird,
damit kein Überblenden entsteht.

81
00:04:58,170 --> 00:05:01,980
Wenn Keyframes so dicht beieinander sind,
kann man den Zoom-Schieberegler nutzen,

82
00:05:01,980 --> 00:05:04,800
um die Ansicht der Animation zu vergrößern.

83
00:05:11,950 --> 00:05:14,600
Nun aktualisiere ich noch den Text.

84
00:05:15,000 --> 00:05:18,230
Jetzt habe ich hier diese
zwei Textfelder übereinander.

85
00:05:18,230 --> 00:05:21,430
Wenn ich jetzt hierhin klicke,
bearbeite ich eventuell das obere.

86
00:05:21,430 --> 00:05:24,790
Deshalb sperre ich es, damit ich es
nicht versehentlich aktiviere.

87
00:05:24,800 --> 00:05:27,200
So kann ich das untere bearbeiten.

88
00:05:44,420 --> 00:05:46,500
Jetzt ist die Animation quasi fertig.

89
00:05:46,500 --> 00:05:50,100
Sehen wir uns noch an,
was zwischen den Keyframes passiert.

90
00:05:50,100 --> 00:05:53,090
Zwischen zwei Keyframes
steht jetzt jeweils "Linear".

91
00:05:53,090 --> 00:05:55,420
Das bezieht sich auf
die CSS-Easing-Funktion,

92
00:05:55,420 --> 00:05:59,480
mit der Werte zwischen zwei 
Keyframes berechnet werden.

93
00:05:59,480 --> 00:06:02,640
"Linear" bedeutet also, dass sich
die Werte gleichmäßig verändern.

94
00:06:03,530 --> 00:06:06,345
Weitere Optionen: Wenn man
mit der rechten Maustaste klickt,

95
00:06:06,345 --> 00:06:08,600
sind alle
Standard-Easing-Funktionen nutzbar,

96
00:06:08,600 --> 00:06:10,930
die in den CSS-Spezifikationen
angegeben sind.

97
00:06:10,930 --> 00:06:13,500
Vor allem bei diesem Übergang,

98
00:06:13,500 --> 00:06:17,290
wo sich das Bild von einer Hälfte
zur anderen verschiebt,

99
00:06:17,290 --> 00:06:20,760
ist es ratsam, eine andere Easing-Funktion
zu wählen, z. B. "Ease-in-out".

100
00:06:20,760 --> 00:06:22,880
Dabei wird die Bewegung zuerst schneller

101
00:06:22,880 --> 00:06:25,670
und kurz vor dem Stillstand
wieder langsamer.

102
00:06:25,670 --> 00:06:28,700
Das erinnert an Bewegungen
in realer Umgebung.

103
00:06:30,000 --> 00:06:33,780
Jetzt begrenze ich meinen Vorschaubereich
mit diesen gelben Ziehpunkten

104
00:06:33,780 --> 00:06:38,000
auf diesen Übergang hier.

105
00:06:38,000 --> 00:06:41,600
Dann stelle ich für die Vorschau
eine Endlosschleife ein

106
00:06:41,600 --> 00:06:43,900
und sehe mir nur diesen Bereich an,

107
00:06:43,900 --> 00:06:46,800
um Fehler bei diesem Übergang zu beheben.

108
00:06:46,800 --> 00:06:48,390
Das sieht gut aus.

109
00:06:48,390 --> 00:06:52,900
Statt vordefinierte Funktionen zu nutzen,
kann man auch eigene erstellen.

110
00:06:52,900 --> 00:06:56,790
Dazu klicke ich mit der rechten Maustaste
und wähle "Easing-Optionen…" aus.

111
00:06:56,790 --> 00:06:59,600
Dann kann ich diese Bézierkurve
so anpassen, wie ich möchte,

112
00:06:59,600 --> 00:07:01,680
eine eigene Voreinstellung speichern

113
00:07:04,130 --> 00:07:06,890
und zum Übernehmen auf "OK" klicken.

114
00:07:09,000 --> 00:07:12,040
So viel zu dieser Anleitung.
Wer mehr wissen möchte,

115
00:07:12,040 --> 00:07:15,990
kann sich detailliertere
Anleitungen zu Animationen ansehen.

116
00:07:16,000 --> 00:07:18,320
Das wars. Vielen Dank fürs Zusehen!