1
00:00:00,000 --> 00:00:04,763
[MUSIK]

2
00:00:04,763 --> 00:00:07,931
Wie wir in der vorherigen Vorlesung gelernt haben,

3
00:00:07,931 --> 00:00:12,927
fügen Animationen Ihrer Anwendung viel intrinsischen Wert hinzu.

4
00:00:12,927 --> 00:00:16,080
Es fügt zu einer besseren Benutzererfahrung.

5
00:00:16,080 --> 00:00:19,990
Nun bedeutet das offensichtlich nicht, dass Sie Animationen überall im Ort

6
00:00:19,990 --> 00:00:22,730
werfen, nur um Animationen zu machen.

7
00:00:22,730 --> 00:00:29,480
Sie setzen Animationen an Ort und Stelle, um die Benutzererfahrung besser zu machen.

8
00:00:30,680 --> 00:00:34,130
In dieser Übung machen wir unsere erste Animation

9
00:00:34,130 --> 00:00:37,006
innerhalb unserer Angular Anwendung, die wir bisher entwickelt haben.

10
00:00:37,006 --> 00:00:38,425
Auf dem Weg

11
00:00:38,425 --> 00:00:44,190
lernen Sie, wie Animationen in einer Angular-Anwendung implementiert werden können.

12
00:00:44,190 --> 00:00:49,127
Wir werden diesen Thread im zweiten Teil der Übung fortsetzen, wo

13
00:00:49,127 --> 00:00:53,206
wir weitere Animationen zu unserer Angular-Anwendung hinzufügen werden.

14
00:00:53,206 --> 00:00:58,720
Als wir diesen Kurs begonnen haben,

15
00:00:58,720 --> 00:01:04,147
hatten wir in der allerersten Übung mit Angular bereits das Animationsmodul in unsere Angular Anwendung

16
00:01:04,147 --> 00:01:10,299
in der app.module.ts5 hinzugefügt, so dass wir das Animationsmodul direkt dort importiert haben.

17
00:01:10,299 --> 00:01:13,551
Nun ist der nächste Schritt, zu den Komponenten zu gehen und

18
00:01:13,551 --> 00:01:17,240
dann in der Animation hinzuzufügen, wo immer es erforderlich ist.

19
00:01:17,240 --> 00:01:24,336
Die erste Animation, die wir hinzufügen werden, ist in der dishdetail Komponente hier.

20
00:01:24,336 --> 00:01:28,758
Gehen Sie also zur dishdetail-Komponente,

21
00:01:28,758 --> 00:01:32,790
lassen Sie mich hier ein paar Klassen importieren.

22
00:01:32,790 --> 00:01:38,271
Ich importiere Trigger, Status

23
00:01:38,271 --> 00:01:45,382
, Stil, Animation und Übergang von.

24
00:01:50,250 --> 00:01:53,120
@angular /animationen.

25
00:01:56,695 --> 00:02:02,460
Sobald wir diese importieren, können wir diese bei der Konstruktion unserer Animation nutzen.

26
00:02:02,460 --> 00:02:06,390
Wie fügen Sie einer Komponente eine Animation hinzu?

27
00:02:06,390 --> 00:02:12,360
Wir werden die Animations-Trigger in den Komponenten-Dekorator hier hinzufügen.

28
00:02:12,360 --> 00:02:19,247
Gehen Sie also in den Komponenten-Dekorator nach den Stil-URLs,

29
00:02:19,247 --> 00:02:25,217
und fügen Sie die Animationen als Eigenschaft darin hinzu.

30
00:02:25,217 --> 00:02:30,140
Und dann werde ich hier einen Trigger definieren, den

31
00:02:30,140 --> 00:02:34,126
ich als Sichtbarkeitsauslöser nenne, und

32
00:02:34,126 --> 00:02:39,888
ich werde hier den Sichtbarkeitsauslöser definieren.

33
00:02:39,888 --> 00:02:43,942
Jetzt für diesen Sichtbarkeitsauslöser,

34
00:02:43,942 --> 00:02:48,972
werde ich zwei Zustände definieren, ich werde einen

35
00:02:48,972 --> 00:02:54,282
Zustand wie gezeigt definieren und ich werde einen zweiten Zustand

36
00:02:54,282 --> 00:03:00,932
als, Versteckt definieren.

37
00:03:00,932 --> 00:03:04,930
Also habe ich die Flexibilität, meine Staaten so zu definieren.

38
00:03:04,930 --> 00:03:09,670
Also für den gezeigten Zustand, was möchte ich anwenden?

39
00:03:09,670 --> 00:03:16,565
Also für den gezeigten Zustand werde ich den Stil wie folgt anwenden,

40
00:03:16,565 --> 00:03:21,350
also die Stile, die ich für

41
00:03:21,350 --> 00:03:26,416
den gezeigten Zustand anwenden werde, werde ich transformieren, und

42
00:03:26,416 --> 00:03:33,240
die Transformation, die ich anwenden werde, ist eine Skala von 1,0.

43
00:03:33,240 --> 00:03:38,170
Also möchte ich es in

44
00:03:38,170 --> 00:03:42,810
seiner normalen Größe und

45
00:03:42,810 --> 00:03:47,167
einer Deckkraft von 0 zeigen.

46
00:03:47,167 --> 00:03:50,929
So definiere ich den gezeigten Stil.

47
00:03:50,929 --> 00:03:57,884
Also, und der versteckte Zustand, den ich den Stil als,

48
00:04:03,816 --> 00:04:09,659
Transformieren, werde ich sagen, Maßstab (0.5).

49
00:04:09,659 --> 00:04:13,002
Sie können mit diesen Zahlen herumspielen, um

50
00:04:13,002 --> 00:04:17,294
zu sehen, ob die Animation das ist, was Sie wünschen.

51
00:04:17,294 --> 00:04:21,194
Ich habe auch mit diesen Zahlen herumgespielt, bis ich etwas bekam,

52
00:04:21,194 --> 00:04:22,194
mit dem ich zufrieden war.

53
00:04:22,194 --> 00:04:29,457
Und 0, oder für ihren weiteren gezeigten Zustand, werde ich die Deckkraft als 1 setzen.

54
00:04:29,457 --> 00:04:31,929
Opazität 1 bedeutet, dass es vollständig sichtbar ist.

55
00:04:31,929 --> 00:04:34,942
Opazität 0 bedeutet, dass es vollständig versteckt ist.

56
00:04:34,942 --> 00:04:38,555
Jetzt habe ich hier zwei Zustände definiert, gezeigt und hier im Zustand.

57
00:04:38,555 --> 00:04:43,481
Nun, der Übergang zwischen diesen beiden Zuständen,

58
00:04:43,481 --> 00:04:50,931
werde ich hier definieren, als, wenn ich von einem Zustand in einen beliebigen Zustand gehe,

59
00:04:50,931 --> 00:04:56,339
es spielt keine Rolle, in welchen Zustand ich mich bewege,

60
00:04:56,339 --> 00:05:02,108
die Transformation erfolgt mit einer Animation von 0,5 Sekunden

61
00:05:02,108 --> 00:05:04,780
oder 500 Millisekunden.

62
00:05:04,780 --> 00:05:08,522
Und ich werde mich erholen.

63
00:05:08,522 --> 00:05:13,323
Was ich hier angebe, ist, dass ich mich

64
00:05:13,323 --> 00:05:19,140
innerhalb von 0,5 Sekunden oder 500 Millisekunden bewegen werde, wenn ich vom angezeigten in den ausgeblendeten Zustand oder vom ausgeblendeten in den angezeigten Zustand gehe.

65
00:05:19,140 --> 00:05:23,278
Und dann werde ich den Übergang machen, indem ich ein- und auslöse, also

66
00:05:23,278 --> 00:05:27,755
wird es kein linearer Übergang sein, es wird langsam

67
00:05:27,755 --> 00:05:31,218
eingehen und dann den Übergang erleichtern, so

68
00:05:31,218 --> 00:05:35,383
dass es kein ruckeliger Übergang von einem zum anderen sein wird.

69
00:05:35,383 --> 00:05:40,411
So können Sie diese einfache Ein- oder Aussparung oder Ease-In-Out verwenden,

70
00:05:40,411 --> 00:05:45,125
um anzugeben, wie der Übergang erfolgen soll.

71
00:05:45,125 --> 00:05:49,625
Nun habe ich für diese Animation

72
00:05:49,625 --> 00:05:54,861
die Sichtbarkeit als Auslöser für diese Animation angegeben.

73
00:05:54,861 --> 00:05:58,911
Damit diese Animation nun korrekt funktioniert,

74
00:05:58,911 --> 00:06:04,344
gehe ich in meine dishDetailComponent, und dann werde ich

75
00:06:04,344 --> 00:06:09,412
innerhalb dieser Komponente den Anfangswert für die Sichtbarkeit angeben.

76
00:06:09,412 --> 00:06:13,444
Also werde ich sagen, dass die Sichtbarkeit

77
00:06:13,444 --> 00:06:18,484
anfänglich auf gezeigt eingestellt ist, und dann,

78
00:06:18,484 --> 00:06:25,379
wenn ich von einem Gericht zum anderen wechselt.

79
00:06:25,379 --> 00:06:28,649
Und das passiert, wenn ich das Gericht hier hole.

80
00:06:28,649 --> 00:06:32,117
Also, wenn ich das Gericht von einem Gericht zum anderen ändere,

81
00:06:32,117 --> 00:06:35,249
wird dies verursacht, wenn sich der Routenparameter ändert.

82
00:06:35,249 --> 00:06:37,942
An diesem Punkt werde ich die Animation anwenden.

83
00:06:37,942 --> 00:06:42,649
Ich werde den Auslöser vom angezeigten in den versteckten Zustand wechseln und

84
00:06:42,649 --> 00:06:48,520
dann vom ausgeblendeten in den angezeigten Zustand zurückkehren, wenn das Gericht verfügbar ist.

85
00:06:48,520 --> 00:06:53,330
Also, um diese Transformation anzuwenden.

86
00:06:53,330 --> 00:06:58,720
Also werde ich diese Anweisung in

87
00:06:58,720 --> 00:07:03,330
einen Block hier in dieser Pfeilfunktion einschließen.

88
00:07:03,330 --> 00:07:11,806
Und dann definieren Sie auch diese Sichtbarkeit hier als.

89
00:07:11,806 --> 00:07:16,845
Wenn ich also von einem Zustand in einen anderen übergehe, wenn

90
00:07:16,845 --> 00:07:22,421
ich beginne, die Dish-Informationen von der Serverseite zu holen,

91
00:07:22,421 --> 00:07:27,784
werde ich zuerst das aktuelle Gericht ausblenden, indem ich den

92
00:07:27,784 --> 00:07:32,503
Sichtbarkeitswert auf ausgeblendet setze, was bedeutet, dass das aktuelle Gericht, das

93
00:07:32,503 --> 00:07:37,265
angezeigt wird, aus der Ansicht ausgeblendet wird.

94
00:07:37,265 --> 00:07:42,085
Und dann, wenn das neue Gericht verfügbar wird, erscheint es wieder in die Ansicht.

95
00:07:42,085 --> 00:07:48,147
Um das zu tun, wenn mein Gericht im zweiten Teil,

96
00:07:48,147 --> 00:07:54,651
im Abonnement-Teil verfügbar wird, werde ich als letzte Aussage in diesem Block

97
00:07:54,651 --> 00:07:59,299
sagen, dass diese Sichtbarkeit gleich der hier gezeigten ist.

98
00:07:59,299 --> 00:08:04,513
So wird meine Sicht an diesem Punkt sichtbar.

99
00:08:04,513 --> 00:08:09,229
Jetzt wende ich dies nicht auf die Fehlermeldung an, da ich

100
00:08:09,229 --> 00:08:13,654
diese Sichtbarkeit nur auf die Teile meiner

101
00:08:13,654 --> 00:08:17,616
Vorlage anwenden werde, in denen mein Gericht tatsächlich angezeigt wird.

102
00:08:17,616 --> 00:08:20,910
Nun, wenn es einen Fehler gibt, dann möchte ich nur das richtige Gericht verstecken.

103
00:08:20,910 --> 00:08:24,751
Zeigen Sie dann nur die Fehlermeldung in der Ansicht an.

104
00:08:24,751 --> 00:08:29,021
Also, mit diesen Änderungen an meiner dishDetailComponent.

105
00:08:29,021 --> 00:08:34,092
So können Sie wieder sehen und dies noch einmal erklären.

106
00:08:34,092 --> 00:08:40,072
Wenn ich mit dem Abrufen des neuen Gerichts nach Änderung der Routenparameter beginne,

107
00:08:40,072 --> 00:08:42,924
setze ich die Sichtbarkeit auf ausgeblendet, so

108
00:08:42,924 --> 00:08:48,445
dass sich das aktuelle Gericht, das in der Ansicht angezeigt wird, selbst ausgeblendet.

109
00:08:48,445 --> 00:08:52,427
Und dann, wenn das neue Gericht verfügbar wird, so wird das passieren, wenn

110
00:08:52,427 --> 00:08:56,221
das Abonnement aufgerufen wird, wenn das beobachtbare verfügbar wird.

111
00:08:56,221 --> 00:09:00,001
Und dann, wenn das Gericht verfügbar wird und dann,

112
00:09:00,001 --> 00:09:04,455
setze ich dieses Gericht auf das Gericht, das von dem beobachtbaren zurückkam.

113
00:09:04,455 --> 00:09:08,181
An diesem Punkt werde ich die Sichtbarkeit auf den angezeigten Zustand wiederherstellen.

114
00:09:08,181 --> 00:09:13,476
So, dass mein neues Gericht, das ich geholt habe, auf dem Bildschirm gezeigt werden kann.

115
00:09:13,476 --> 00:09:18,150
Mit dieser Änderung gehe ich jetzt zur Vorlagendatei,

116
00:09:18,150 --> 00:09:22,710
und innerhalb der Vorlagendatei werde ich

117
00:09:22,710 --> 00:09:26,366
die Sichtbarkeit sowohl auf das Gericht hier anwenden.

118
00:09:26,366 --> 00:09:31,160
Also das erste div, wo ich das Gericht anzeige, werde ich

119
00:09:31,160 --> 00:09:35,948
den, Sichtbarkeits-Trigger auf das Gericht anwenden.

120
00:09:35,948 --> 00:09:39,417
Und dann werde ich das gleich setzen,

121
00:09:42,937 --> 00:09:49,060
Sichtbarkeit, was die Variable ist, die ich im Code definiert habe.

122
00:09:49,060 --> 00:09:54,450
Jetzt wende ich dies auf das Gericht hier an und wende das Gleiche auch

123
00:09:54,450 --> 00:09:58,530
auf das zweite div an, wo ich die Kommentare anzeige.

124
00:09:59,700 --> 00:10:00,837
Und das war's.

125
00:10:00,837 --> 00:10:05,902
Lassen Sie mich also alle Änderungen speichern, und dann

126
00:10:05,902 --> 00:10:11,213
schauen wir uns an, wie diese Animation in unserem Beispiel funktioniert.

127
00:10:11,213 --> 00:10:15,015
Gehen Sie zum Browser, jetzt zeige ich ihnen das Menü an.

128
00:10:15,015 --> 00:10:19,618
Lassen Sie mich eines der Gerichte auswählen und dann in den Blick auf die Gerichte hier gehen.

129
00:10:19,618 --> 00:10:24,336
Wenn das Gericht angezeigt wird, beachten Sie, dass jedes Mal, wenn ich von

130
00:10:24,336 --> 00:10:28,432
diesem Gericht zum nächsten Gericht gehe, also durch Klicken auf die rechte.

131
00:10:28,432 --> 00:10:33,349
Dann verschwindet das Gericht, und dann, wenn das neue Gericht verfügbar wird,

132
00:10:33,349 --> 00:10:37,900
wird die Ansicht wieder sichtbar und dann wird das neue Gericht gezeigt.

133
00:10:37,900 --> 00:10:42,210
In ähnlicher Weise kann ich noch einen machen und dann bemerken, dass das neue Gericht,

134
00:10:42,210 --> 00:10:46,070
sobald die Informationen verfügbar sind, wieder sichtbar wird.

135
00:10:46,070 --> 00:10:51,890
Das ist also der Übergang, den ich hier in diesem Beispiel anwende. Wenn Sie

136
00:10:51,890 --> 00:10:58,860
also zurückgehen, können Sie das gleiche Verhalten sehen, das sich wieder wiederholt.

137
00:10:58,860 --> 00:11:02,730
Diese kleine Änderung

138
00:11:02,730 --> 00:11:08,310
der Benutzeroberfläche fügt viel Wert auf die Art und Weise, wie der Benutzer Ihre Anwendung wahrnimmt.

139
00:11:08,310 --> 00:11:13,520
Wie Sie erkennen, fügt dies nicht viel zur Funktionalität Ihrer Anwendung

140
00:11:13,520 --> 00:11:18,690
selbst hinzu, sondern trägt zu einer besseren Benutzererfahrung bei.

141
00:11:18,690 --> 00:11:23,625
Und das ist, wo wir Animationen umsichtig innerhalb unserer

142
00:11:23,625 --> 00:11:28,658
Anwendung anwenden, um bestimmte Benutzererfahrung für den

143
00:11:28,658 --> 00:11:33,302
Benutzer, der Ihre Angular-Anwendung ansieht, aussagekräftiger zu machen, oder die

144
00:11:33,302 --> 00:11:39,421
Anzeige Ihrer mobilen Anwendung, die wir in den späteren Kursen sehen werden.

145
00:11:39,421 --> 00:11:43,957
Damit ist diese Übung für Animationen abgeschlossen.

146
00:11:43,957 --> 00:11:48,939
Wir werden die Animationen Erkundungen in den zweiten

147
00:11:48,939 --> 00:11:53,082
Teil der Übung fortsetzen, der unmittelbar danach auftaucht.

148
00:11:53,082 --> 00:11:57,513
Dies ist ein guter Zeitpunkt für Sie, einen Git-Kommentar mit den Nachrichtenanimationen zu machen,

149
00:11:57,513 --> 00:11:58,164
Teil eins.

150
00:11:58,164 --> 00:12:03,927
( MUSIK)