1
00:00:00,000 --> 00:00:04,660
[MUSIC]

2
00:00:04,660 --> 00:00:09,853
Lassen Sie uns einen kurzen Überblick über die Animationsunterstützung in Winkel bekommen, bevor wir gehen und

3
00:00:09,853 --> 00:00:15,820
versuchen, unsere Hand bei der Umsetzung einiger Animationen in unserer Winkelanwendung.

4
00:00:17,010 --> 00:00:18,290
Wie Sie erkennen,

5
00:00:18,290 --> 00:00:23,800
fügen Animationen selbst nicht zur Funktionalität Ihrer Angular-Anwendung hinzu.

6
00:00:23,800 --> 00:00:27,210
Dann stellt sich die Frage, warum Animationen verwenden?

7
00:00:27,210 --> 00:00:31,420
Wenn Sie es nun aus der Benutzererfahrung oder aus der

8
00:00:31,420 --> 00:00:36,250
Perspektive des Benutzeroberflächendesigns betrachten, dann beginnen Sie zu sehen, dass Animationen

9
00:00:36,250 --> 00:00:40,860
eine Bedeutung und einen Zweck für ihre Verwendung in einer Anwendung haben.

10
00:00:41,860 --> 00:00:46,360
Die geben visuelles Feedback an den Benutzer über

11
00:00:46,360 --> 00:00:49,560
Dinge, die innerhalb Ihrer Winkelanwendung geschehen.

12
00:00:49,560 --> 00:00:54,920
So können Sie eine Anwendung vollständig frei von Animationen haben und

13
00:00:54,920 --> 00:00:58,050
dass es immer noch die gleichen Funktionen bietet.

14
00:00:58,050 --> 00:01:00,710
Das ist also etwas, das wir beachten müssen,

15
00:01:00,710 --> 00:01:05,280
wenn wir Animationen in unsere Winkelanwendung einführen.

16
00:01:05,280 --> 00:01:12,150
Animationen sind nicht notwendig oder erforderlich, aber

17
00:01:12,150 --> 00:01:18,940
sie fügen diese kleine Würze zu Ihrer Winkelanwendung hinzu. Wenn Sie diese Ansicht im

18
00:01:18,940 --> 00:01:24,090
Kopf behalten, werden Sie sich der Animation aus einer völlig anderen Perspektive nähern.

19
00:01:25,380 --> 00:01:31,890
Es ist, als ob Sie nicht zu viel Salz in Ihre Gerichte geben, nur weil Salz Geschmack hinzufügt.

20
00:01:33,030 --> 00:01:36,340
Zu viel Salz verwöhnt auch Ihr Gericht.

21
00:01:36,340 --> 00:01:38,630
Das gleiche mit Animationen auch.

22
00:01:38,630 --> 00:01:42,370
Zu viele Animationen und Sie enden mit einem verwirrten Benutzer.

23
00:01:43,400 --> 00:01:48,790
Aber Animationen, die subtil hinzugefügt werden, um den Benutzern Vorschläge zu

24
00:01:48,790 --> 00:01:55,545
geben, oder visuelles Feedback an die Benutzer zu geben, fügen Ihrer Winkelanwendung viel Wert hinzu.

25
00:01:55,545 --> 00:02:00,295
Nun zum Glück

26
00:02:00,295 --> 00:02:05,825
kommt der eckige Materialrahmen, den wir bereits in unserer Winkelanwendung verwenden, mit einem eigenen eingebauten Satz von Animationen.

27
00:02:05,825 --> 00:02:10,074
In der Tat, das ist der Grund, warum wir das Browser-Animationsmodul aufgenommen haben.

28
00:02:10,074 --> 00:02:15,060
In unsere Winkelapplikation direkt am Anfang, da

29
00:02:15,060 --> 00:02:19,950
Winkelmaterial bereits die Animationsunterstützung nutzt, die

30
00:02:21,350 --> 00:02:25,445
eckig durch oder seine Animation bereitstellt.

31
00:02:25,445 --> 00:02:30,135
Daher

32
00:02:30,135 --> 00:02:35,840
verwendet die Winkelmaterialbibliothek die vorgeschlagenen Animationen, die mit dem Materialdesign geliefert werden.

33
00:02:35,840 --> 00:02:38,700
Dinge wie zum Beispiel, wenn Sie auf eine Schaltfläche klicken,

34
00:02:38,700 --> 00:02:43,980
die Welligkeit Effekte, die Sie auf der Schaltfläche sehen,

35
00:02:43,980 --> 00:02:50,220
und die subtile Vergrößerung, Verkleinerung von verschiedenen Teilen Ihrer Ansicht usw.

36
00:02:50,220 --> 00:02:55,010
Diese werden bereits durch den Materialdesign-Ansatz vorgeschlagen, und

37
00:02:55,010 --> 00:02:58,840
so nimmt Winkelmaterial bereits viele dieser Dinge an.

38
00:02:58,840 --> 00:03:03,140
Also, auch ohne explizit Anstrengung,

39
00:03:03,140 --> 00:03:08,100
erhalten Sie automatisch einige der erforderlichen Animationen in

40
00:03:08,100 --> 00:03:11,950
Ihre Winkelanwendung, nur durch die Verwendung von Winkelmaterial.

41
00:03:11,950 --> 00:03:17,640
Aber nehmen Sie an, Sie möchten Ihr eigenes Gewürz zu der Mischung hinzufügen.

42
00:03:17,640 --> 00:03:21,030
Wie nähern Sie sich dann Animationen in eckigen?

43
00:03:21,030 --> 00:03:25,510
Das werden wir in diesem Vortrag schnell betrachten.

44
00:03:25,510 --> 00:03:31,091
Und dann gehen Sie zu der Übung, wo wir Fu implementieren und sehen, ob wir

45
00:03:31,091 --> 00:03:37,402
Sinn machen oder ob sie einen Unterschied machen, wie Sie Ihre Angular-Anwendung wahrnehmen.

46
00:03:39,145 --> 00:03:42,053
Die Idee hinter Angulars Unterstützung für

47
00:03:42,053 --> 00:03:46,723
Animationen ist, dass es Ihnen ermöglicht, Animationen mit nahezu

48
00:03:46,723 --> 00:03:52,270
nativer Leistung von dem zu erstellen, was Sie mit reinen CSS-Animationen erhalten.

49
00:03:52,270 --> 00:03:55,300
Jetzt können Sie sich sofort in Ihrem Kopf fragen,

50
00:03:55,300 --> 00:03:57,690
warum nicht einfach reine CSS-Animationen verwenden?

51
00:03:57,690 --> 00:04:01,810
In der Tat können Sie das auch tun, aber es gibt nichts, was Sie davon abhält,

52
00:04:01,810 --> 00:04:04,930
reine CSS-Animationen in Ihrer Angular-Anwendung zu verwenden.

53
00:04:04,930 --> 00:04:09,880
Aber der Vorteil der Verwendung

54
00:04:09,880 --> 00:04:14,660
des Winkelansatzes für die Einführung

55
00:04:14,660 --> 00:04:19,280
von Animationen ist, dass angular, vor allem, nutzt die Unterstützung der Web-Animations-API, die

56
00:04:19,280 --> 00:04:24,620
in den moderneren Versionen von all diesen Browsern unterstützt wird.

57
00:04:24,620 --> 00:04:29,540
Nun, wenn Ihre Browserversion bereits die Web Animations API unterstützt,

58
00:04:29,540 --> 00:04:32,380
dann verwenden Sie Angular einfach einen Start, um

59
00:04:32,380 --> 00:04:36,640
die Animationen zu unterstützen, die Sie in Ihre Angular-Anwendung einschließen.

60
00:04:36,640 --> 00:04:39,970
Wenn nicht, müssen Sie eine Polyfill

61
00:04:39,970 --> 00:04:45,270
namens web-animations.min.js in Ihre Angular-Anwendung verwenden.

62
00:04:45,270 --> 00:04:49,190
In den Übungen werden wir mit der Annahme beginnen, dass wir auf moderne

63
00:04:49,190 --> 00:04:53,355
Browser abzielen, also schließe ich das Polyfill nicht explizit ein.

64
00:04:53,355 --> 00:04:59,625
Sollten Sie sich dafür entscheiden,

65
00:04:59,625 --> 00:05:05,395
erfahren Sie in der Dokumentation zu eckigen Animationen explizit, wie Sie das für ältere Browser ausfüllen können.

66
00:05:05,395 --> 00:05:07,425
Also, wieder auf die Frage zurückzukommen,

67
00:05:07,425 --> 00:05:13,440
warum nicht reine CSS-Animation verwenden, anstatt Winkelanimation zu verwenden?

68
00:05:13,440 --> 00:05:15,850
Jetzt

69
00:05:15,850 --> 00:05:20,560
kommt hier der Vorteil der Verwendung von Angular-Animation in Ihrer Anwendung in den Vordergrund.

70
00:05:20,560 --> 00:05:24,710
Die Tatsache, dass Angular-Animationen eng

71
00:05:24,710 --> 00:05:28,710
mit Ihrem Code verbunden sind, den Sie für Ihre Angular-Anwendung schreiben.

72
00:05:28,710 --> 00:05:32,740
Und daher können Sie viele dieser Animationen auslösen, die

73
00:05:32,740 --> 00:05:37,330
direkt an die Art und Weise gebunden sind, wie sich Ihre Winkelanwendung entwickelt und

74
00:05:37,330 --> 00:05:40,560
was innerhalb Ihrer Winkelanwendung vor sich geht.

75
00:05:40,560 --> 00:05:45,610
So können Sie es an den Lebenszyklus Ihrer Komponenten binden.

76
00:05:45,610 --> 00:05:50,356
Sie können sie in die verschiedenen Phasen der Änderung der Ansicht selbst binden,

77
00:05:50,356 --> 00:05:53,290
während Sie die Ansicht rendern.

78
00:05:53,290 --> 00:06:00,130
Und so ist dieser Vorteil, den Sie durch die Verwendung der Angular Animationsbibliothek

79
00:06:00,130 --> 00:06:05,870
anstelle von reinen CSS-Animationen erhalten, etwas, das eine Überlegung wert ist.

80
00:06:05,870 --> 00:06:09,140
Wie nähern wir uns Animationen in Angular?

81
00:06:09,140 --> 00:06:12,730
Die Animationen selbst sind um Zustände und

82
00:06:12,730 --> 00:06:17,850
Übergänge zwischen Zuständen im Angular Framework aufgebaut, so dass

83
00:06:17,850 --> 00:06:22,440
wir verschiedene Zustände definieren, Zustand könnte alles sein, außer

84
00:06:22,440 --> 00:06:27,500
Sie möchten als Zustand aus der Perspektive der Animation definieren.

85
00:06:27,500 --> 00:06:31,290
Jede Änderung des Zustands, die Sie verursachen möchten,

86
00:06:31,290 --> 00:06:35,330
kann dazu führen, dass der Animationseffekt ins Bild kommt.

87
00:06:35,330 --> 00:06:39,840
Übergänge entlang der Zustände lösen also das Animationsverhalten

88
00:06:39,840 --> 00:06:41,550
innerhalb Ihrer Winkelanwendung aus.

89
00:06:41,550 --> 00:06:46,080
Wie wir in der nächsten Folie sehen werden, wo ich Ihnen ein Beispiel zeigen werde,

90
00:06:46,080 --> 00:06:50,468
wie Sie Bänder und Übergänge verwenden können, um die Animation auszulösen.

91
00:06:50,468 --> 00:06:56,260
Der Animationsaspekt Ihrer Winkelanwendung

92
00:06:56,260 --> 00:07:01,420
ist also innerhalb des Komponentendekorators definiert, den Sie in Ihren Komponenten verwenden.

93
00:07:01,420 --> 00:07:06,140
So hat der Komponenten-Dekorator eine Eigenschaft Farben Animationen, die

94
00:07:06,140 --> 00:07:11,600
Sie verwenden, um die Werte Trigger für Ihre Animationen zu definieren.

95
00:07:11,600 --> 00:07:13,650
Also habe ich das Wort Trigger benutzt.

96
00:07:13,650 --> 00:07:17,400
In den Übungen werden Sie sehen, wie wir die Trigger für

97
00:07:17,400 --> 00:07:22,370
Animationen implementieren und wie wir die Trigger auf verschiedene Template-Elemente anwenden

98
00:07:22,370 --> 00:07:27,520
und dann diese Animationen unter bestimmten Umständen auslösen.

99
00:07:27,520 --> 00:07:31,680
Und wenn Sie Animationen in Ihrer

100
00:07:31,680 --> 00:07:36,550
Angular-Anwendung verwenden müssen, müssen Sie in erster Linie das Browser-Animationsmodul importieren. Das

101
00:07:36,550 --> 00:07:41,330
haben wir bereits in unserer ersten Übung gemacht, weil

102
00:07:41,330 --> 00:07:45,840
das Animationsmodul des Browsers zur Unterstützung von Winkelmaterial benötigt wurde.

103
00:07:45,840 --> 00:07:50,269
Außerdem, wenn Sie Animationen in Ihren Komponenten implementieren.

104
00:07:51,280 --> 00:07:55,840
Dann benötigen Sie die Hilfe von Radiusklassen wie Trigger, Status

105
00:07:55,840 --> 00:07:56,610
, Stil, animieren,

106
00:07:56,610 --> 00:08:01,550
Übergang, die aus der Angular Animations Library importiert werden müssen.

107
00:08:01,550 --> 00:08:08,010
Und wir werden das in jeder Komponente tun, die Animationen verwenden muss.

108
00:08:08,010 --> 00:08:12,930
Wie in der vorherigen Folie erwähnt,

109
00:08:12,930 --> 00:08:17,960
dreht sich das Animationsverhalten in Ihrer Angular-Anwendung um Zustände und Übergänge zwischen den Zuständen.

110
00:08:17,960 --> 00:08:21,470
Status kann alles sein, was Sie als Staat definieren.

111
00:08:21,470 --> 00:08:26,280
Wie Sie in dem Beispiel sehen, das in der allerersten Übung nach dieser

112
00:08:26,280 --> 00:08:30,650
Vorlesung folgt, wurden 2 Zustände definiert, die als angezeigt und ausgeblendet bezeichnet werden.

113
00:08:30,650 --> 00:08:33,600
Aus dem Namen des Staates

114
00:08:33,600 --> 00:08:37,920
beginnen Sie automatisch zu erraten, was diese beiden Zustände bedeuten.

115
00:08:37,920 --> 00:08:42,800
Wenn Sie nun vom angezeigten Zustand in den ausgeblendeten Zustand wechseln,

116
00:08:42,800 --> 00:08:46,970
löst der Übergang vom angezeigten zum ausgeblendeten Zustand eine Art Animation aus.

117
00:08:46,970 --> 00:08:50,780
Vielleicht werden Sie ein Element in Ihrer

118
00:08:52,170 --> 00:08:56,360
Ansicht verstecken, indem Sie die Deckkraft des Elements ändern, die

119
00:08:56,360 --> 00:09:00,240
Deckkraft bedeutet, wie transparent das Element ist und die Deckkraft

120
00:09:00,240 --> 00:09:05,260
eines bedeutet, dass das Element vollständig undurchsichtig und auf dem Bildschirm sichtbar ist.

121
00:09:05,260 --> 00:09:10,360
Wenn Sie die Deckkraft auf Null setzen, verschwindet das Element vollständig vom Bildschirm.

122
00:09:10,360 --> 00:09:13,260
Wir entfernen dieses Element nicht aus

123
00:09:13,260 --> 00:09:18,110
dem, indem wir dieses Element einfach verstecken, indem wir seine Deckkraft ändern.

124
00:09:18,110 --> 00:09:21,350
Also, dieser Weg wäre etwas, das Sie auslösen können.

125
00:09:21,350 --> 00:09:24,070
Ebenso können Sie die Größe eines Elements ändern.

126
00:09:24,070 --> 00:09:30,740
Sie können die Größe eines Elements erweitern oder zusammenziehen, indem Sie eine Transformation auf

127
00:09:30,740 --> 00:09:36,470
diese Elementeigenschaft anwenden, indem Sie die Skalierungstransformation für das Element verwenden.

128
00:09:36,470 --> 00:09:41,190
Wir werden Beispiele sehen, wie ich in der folgenden Übung sagte.

129
00:09:41,190 --> 00:09:45,670
Alle Animationen, die Sie innerhalb Ihrer Angular-Anwendung

130
00:09:45,670 --> 00:09:49,590
innerhalb der Komponentendirektive mit der Animationseigenschaft beschreiben,

131
00:09:49,590 --> 00:09:54,620
drehen sich also um Zustände und Übergänge zwischen den Zuständen.

132
00:09:54,620 --> 00:09:58,350
Wenn Sie über Zustände und Übergänge sprechen, gibt es einige spezielle

133
00:09:58,350 --> 00:10:03,400
Zustände, die wir berücksichtigen müssen, wenn wir diese Übergänge definieren.

134
00:10:03,400 --> 00:10:06,810
Einer dieser Staaten wird als leerer Staat bezeichnet.

135
00:10:06,810 --> 00:10:09,580
Und Element, das nicht auf dem Bildschirm ist.

136
00:10:09,580 --> 00:10:13,240
Ein Element oder eine Partikelansicht, die nicht an die Ansicht angehängt ist

137
00:10:13,240 --> 00:10:15,880
, wird als im ungültigen Zustand betrachtet.

138
00:10:15,880 --> 00:10:18,510
Wenn also das Element in der Ansicht erscheint,

139
00:10:18,510 --> 00:10:23,940
dass, wenn es zum Beispiel an die angehängt ist, dann übergeht

140
00:10:23,940 --> 00:10:29,590
das Element vom void Zustand in einen der vorhandenen Zustände dieses Elements.

141
00:10:29,590 --> 00:10:30,410
In diesem Fall

142
00:10:30,410 --> 00:10:35,680
können Sie also einen Übergang vom Übergang von void zu einem bestimmten Zustand definieren.

143
00:10:35,680 --> 00:10:40,580
In ähnlicher Weise haben Sie auch einen anderen Status, der als Platzhalterstatus bezeichnet wird, oder

144
00:10:40,580 --> 00:10:45,870
er wird durch Stern definiert, was bedeutet, dass es Ihnen egal ist, welcher Zustand es ist.

145
00:10:45,870 --> 00:10:48,464
Wenn Sie also einen Übergang definieren müssen, können Sie sagen,

146
00:10:48,464 --> 00:10:52,832
wenn Sie von einem

147
00:10:52,832 --> 00:10:58,260
leeren Zustand zum Sternzustand wechseln, also vom void-Zustand zu einem anderen Zustand, den Sie übergehen, können Sie eine bestimmte Transformation anwenden.

148
00:10:58,260 --> 00:11:02,970
Dies sind also die zwei besonderen Möglichkeiten, bestimmte Zustände zu

149
00:11:02,970 --> 00:11:07,130
definieren, wenn Sie Ihre Animation im Komponentendekorator definieren.

150
00:11:08,570 --> 00:11:13,430
So gibt es insbesondere einige Möglichkeiten,

151
00:11:13,430 --> 00:11:18,410
Übergänge zu beschreiben, die für den Kurs von besonderem Interesse sind.

152
00:11:18,410 --> 00:11:23,050
Ein Übergang vom Leerheitszustand in einen beliebigen Zustand kann beschrieben werden, indem Sie einfach

153
00:11:23,050 --> 00:11:27,876
Doppelpunkt eingeben verwenden, anstatt Leere Pfeilstern zu sagen.

154
00:11:27,876 --> 00:11:32,520
So werden Sie sehen, dass wir den Pfeil verwenden,

155
00:11:32,520 --> 00:11:34,610
um Übergänge zwischen dem Zustand zu beschreiben.

156
00:11:34,610 --> 00:11:40,540
Das ist also die Syntax, die Sie sehen werden, wenn ich die Übergänge konstruiere.

157
00:11:40,540 --> 00:11:41,260
In ähnlicher Weise

158
00:11:41,260 --> 00:11:46,700
kann eine Leere zu einem anderen Zustand beschrieben werden, indem Sie einfach Doppelpunkt eingeben verwenden.

159
00:11:46,700 --> 00:11:50,060
Das bedeutet also, dass diese Ansicht in

160
00:11:50,060 --> 00:11:52,760
die Ansicht eintritt, die auf dem Bildschirm ausgelegt wird.

161
00:11:52,760 --> 00:11:56,190
In ähnlicher Weise ein Übergang von einem beliebigen Status in den void-Zustand,

162
00:11:56,190 --> 00:12:00,130
was bedeutet, dass Sie dieses Element aus der Ansicht entfernen.

163
00:12:00,130 --> 00:12:05,510
Das wäre auch, könnte als Doppelpunkt angegeben werden,

164
00:12:05,510 --> 00:12:09,400
was bedeutet, dass dieses Element aus dieser bestimmten Ansicht verlässt.

165
00:12:09,400 --> 00:12:13,860
So sehen Sie mich mit Doppelpunkt eingeben und Doppelpunkt verlassen auch wo ich

166
00:12:14,970 --> 00:12:21,130
die Übergänge in der zweiten Übung beschrieben, die Sie in dieser Lektion sehen werden.

167
00:12:21,130 --> 00:12:26,945
Also, mit diesem schnellen Verständnis von Animationen in eckigen.

168
00:12:26,945 --> 00:12:29,935
Schauen wir uns an, wie wir tatsächlich den Code schreiben.

169
00:12:29,935 --> 00:12:35,873
Und um dies zu tun, werden wir zu den Übungen gehen, wo wir Ihnen zeigen,

170
00:12:35,873 --> 00:12:40,494
wie wir dieses Wissen verwenden, das wir gerade darüber gewonnen haben, wie

171
00:12:40,494 --> 00:12:45,777
Animationen in eckig beschrieben werden, um den Typ Skip Code für die

172
00:12:45,777 --> 00:12:49,458
Konstruktion und Anwendung der Animationen für

173
00:12:49,458 --> 00:12:53,830
verschiedene Elemente innerhalb unserer Ansichten von unsere Komponenten.

174
00:12:53,830 --> 00:13:00,309
( MUSIK)