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

2
00:00:04,763 --> 00:00:07,931
Comme nous l'avons appris lors de la conférence précédente, les animations

3
00:00:07,931 --> 00:00:12,927
ajoutent beaucoup de valeur intrinsèque à votre application.

4
00:00:12,927 --> 00:00:16,080
Cela ajoute à une meilleure expérience utilisateur.

5
00:00:16,080 --> 00:00:19,990
Maintenant, évidemment, cela ne signifie pas que vous lancez des animations partout

6
00:00:19,990 --> 00:00:22,730
juste pour faire des animations.

7
00:00:22,730 --> 00:00:29,480
Vous mettez des animations en place pour améliorer l'expérience utilisateur.

8
00:00:30,680 --> 00:00:34,130
Dans cet exercice, nous allons faire notre première animation

9
00:00:34,130 --> 00:00:37,006
au sein de notre application Angular que nous avons développée jusqu'à présent.

10
00:00:37,006 --> 00:00:38,425
Et en chemin,

11
00:00:38,425 --> 00:00:44,190
apprend comment les animations peuvent être implémentées dans une application Angular.

12
00:00:44,190 --> 00:00:49,127
Nous allons continuer ce fil dans la deuxième partie de l'exercice où

13
00:00:49,127 --> 00:00:53,206
nous allons ajouter plus d'animation à notre application Angular.

14
00:00:53,206 --> 00:00:58,720
Lorsque nous avons commencé ce cours, dans le tout premier exercice avec Angular,

15
00:00:58,720 --> 00:01:04,147
nous avions déjà ajouté dans le module d'animation dans notre application Angular

16
00:01:04,147 --> 00:01:10,299
dans l'app.module.ts5, donc nous avons importé le module d'animation juste là.

17
00:01:10,299 --> 00:01:13,551
Maintenant, l'étape suivante est d'aller aux composants et

18
00:01:13,551 --> 00:01:17,240
puis ajouter dans l'animation partout où cela est nécessaire.

19
00:01:17,240 --> 00:01:24,336
La première animation que nous allons ajouter est dans le composant dishdetail ici.

20
00:01:24,336 --> 00:01:28,758
Donc, en allant au composant dishdetail,

21
00:01:28,758 --> 00:01:32,790
permettez-moi d'importer quelques classes ici.

22
00:01:32,790 --> 00:01:38,271
Je vais importer le déclencheur, l'état, le style

23
00:01:38,271 --> 00:01:45,382
, animer et la transition à partir de.

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

25
00:01:56,695 --> 00:02:02,460
Maintenant, une fois que nous les importons, nous pouvons les utiliser dans la construction de notre animation.

26
00:02:02,460 --> 00:02:06,390
Alors, comment ajouter de l'animation à un composant ?

27
00:02:06,390 --> 00:02:12,360
Nous allons ajouter les déclencheurs d'animation dans le décorateur de composant ici.

28
00:02:12,360 --> 00:02:19,247
Donc entrer dans le décorateur de composant après les URL de styles,

29
00:02:19,247 --> 00:02:25,217
et ajouter dans les animations comme une propriété à l'intérieur.

30
00:02:25,217 --> 00:02:30,140
Et puis ici, je vais définir un déclencheur,

31
00:02:30,140 --> 00:02:34,126
que j'appelle comme déclencheur de visibilité, et

32
00:02:34,126 --> 00:02:39,888
je vais définir le déclencheur de visibilité à l'intérieur ici.

33
00:02:39,888 --> 00:02:43,942
Maintenant, pour ce déclencheur de visibilité,

34
00:02:43,942 --> 00:02:48,972
Je vais définir deux états, Je vais définir un état

35
00:02:48,972 --> 00:02:54,282
comme montré et je vais définir un second état

36
00:02:54,282 --> 00:03:00,932
comme, Hidden.

37
00:03:00,932 --> 00:03:04,930
J'ai donc la flexibilité de définir mes états comme celui-ci.

38
00:03:04,930 --> 00:03:09,670
Donc, pour l'état montré, qu'est-ce que je veux appliquer ?

39
00:03:09,670 --> 00:03:16,565
Donc, pour l'état montré, j'appliquerai le style comme suit,

40
00:03:16,565 --> 00:03:21,350
donc les styles que je vais appliquer pour

41
00:03:21,350 --> 00:03:26,416
l'état montré, je vais faire la transformation, et

42
00:03:26,416 --> 00:03:33,240
la transformation que je vais appliquer est une échelle de 1.0.

43
00:03:33,240 --> 00:03:38,170
Donc, je veux le montrer en

44
00:03:38,170 --> 00:03:42,810
sa taille normale et

45
00:03:42,810 --> 00:03:47,167
une opacité de 0.

46
00:03:47,167 --> 00:03:50,929
C'est donc ainsi que je définit le style montré.

47
00:03:50,929 --> 00:03:57,884
Donc, et l'état caché que je définit le style comme,

48
00:04:03,816 --> 00:04:09,659
Transform, je dirai échelle (0.5).

49
00:04:09,659 --> 00:04:13,002
Vous pouvez jouer avec ces numéros

50
00:04:13,002 --> 00:04:17,294
pour voir si l'animation est ce que vous désirez.

51
00:04:17,294 --> 00:04:21,194
J'ai aussi joué avec ces numéros jusqu'à ce que j'ai obtenu quelque chose dont j'étais

52
00:04:21,194 --> 00:04:22,194
satisfait.

53
00:04:22,194 --> 00:04:29,457
Et 0, ou pour leur état montré plus loin, je mettrai l'opacité comme 1.

54
00:04:29,457 --> 00:04:31,929
Opacité 1 signifie qu'il est complètement visible.

55
00:04:31,929 --> 00:04:34,942
Opacité 0 signifie qu'il est complètement caché.

56
00:04:34,942 --> 00:04:38,555
Maintenant, j'ai défini deux états ici, montrés et ici en état.

57
00:04:38,555 --> 00:04:43,481
Maintenant, la transition entre ces deux états,

58
00:04:43,481 --> 00:04:50,931
Je vais définir ici comme, chaque fois que je passe d'un état à n'importe quel état,

59
00:04:50,931 --> 00:04:56,339
peu importe quel état à quel état je me déplace,

60
00:04:56,339 --> 00:05:02,108
la transformation se fait avec une animation de 0,5 seconde,

61
00:05:02,108 --> 00:05:04,780
ou 500 millisecondes.

62
00:05:04,780 --> 00:05:08,522
Et je vais m'en sortir.

63
00:05:08,522 --> 00:05:13,323
Donc ici, ce que je spécifie est que si je passe de l'état affiché à l'état caché ou

64
00:05:13,323 --> 00:05:19,140
de l'état caché à l'état affiché, je me déplacerai dans les 0,5 secondes, ou 500 millisecondes.

65
00:05:19,140 --> 00:05:23,278
Et puis, je vais faire la transition en facilitant l'entrée et la sortie, donc

66
00:05:23,278 --> 00:05:27,755
ce ne sera pas une transition linéaire, ça va entrer lentement et

67
00:05:27,755 --> 00:05:31,218
puis faciliter l'entrée et ensuite la sortie, donc

68
00:05:31,218 --> 00:05:35,383
que ce ne sera pas une transition saccadée de l'un à l'autre.

69
00:05:35,383 --> 00:05:40,411
Vous pouvez donc utiliser cette facilité d'entrée ou de sortie ou ease-in-out

70
00:05:40,411 --> 00:05:45,125
pour spécifier comment vous voulez que la transition se produise.

71
00:05:45,125 --> 00:05:49,625
Donc maintenant pour cette animation, j'ai spécifié

72
00:05:49,625 --> 00:05:54,861
la visibilité comme déclencheur de cette animation.

73
00:05:54,861 --> 00:05:58,911
Maintenant, pour que cette animation fonctionne correctement,

74
00:05:58,911 --> 00:06:04,344
je vais aller dans mon DishDetailComponent, puis je vais spécifier,

75
00:06:04,344 --> 00:06:09,412
dans ce composant, la valeur initiale de visibilité.

76
00:06:09,412 --> 00:06:13,444
Donc, je dirai que la visibilité est

77
00:06:13,444 --> 00:06:18,484
initialement définie sur montrée, puis,

78
00:06:18,484 --> 00:06:25,379
chaque fois que je change d'un plat à l'autre.

79
00:06:25,379 --> 00:06:28,649
Et cela arrive chaque fois que je vais chercher le plat ici.

80
00:06:28,649 --> 00:06:32,117
Donc, chaque fois que je change le plat d'un plat à l'autre,

81
00:06:32,117 --> 00:06:35,249
cela est causé chaque fois que le paramètre de route change.

82
00:06:35,249 --> 00:06:37,942
Donc, à ce moment-là, je vais appliquer l'animation.

83
00:06:37,942 --> 00:06:42,649
Je vais faire passer le déclencheur de l'état montré à l'état caché et

84
00:06:42,649 --> 00:06:48,520
puis revenir de l'état caché à l'état montré lorsque le plat est disponible.

85
00:06:48,520 --> 00:06:53,330
Donc, pour appliquer cette transformation.

86
00:06:53,330 --> 00:06:58,720
Donc, je vais joindre cette déclaration à l'intérieur

87
00:06:58,720 --> 00:07:03,330
un bloc ici dans cette fonction de flèche.

88
00:07:03,330 --> 00:07:11,806
Et puis aussi définir cette visibilité ici comme.

89
00:07:11,806 --> 00:07:16,845
Donc, quand je fais la transition d'un état à un autre, alors

90
00:07:16,845 --> 00:07:22,421
alors que je commence à chercher les informations de plat du côté serveur,

91
00:07:22,421 --> 00:07:27,784
je vais d'abord cacher le plat actuel en définissant la valeur de visibilité

92
00:07:27,784 --> 00:07:32,503
sur caché, ce qui signifie que le plat actuel que

93
00:07:32,503 --> 00:07:37,265
est affiché sera masqué de la vue.

94
00:07:37,265 --> 00:07:42,085
Et quand le nouveau plat sera disponible, il reviendra dans la vue.

95
00:07:42,085 --> 00:07:48,147
Donc pour ce faire, quand mon plat sera disponible dans la deuxième partie,

96
00:07:48,147 --> 00:07:54,651
dans la partie subscribe, je dirai comme la dernière déclaration dans ce bloc,

97
00:07:54,651 --> 00:07:59,299
Je dirai que cette visibilité est égale à celle montrée ici.

98
00:07:59,299 --> 00:08:04,513
Donc, ma vue devient visible à ce moment-là.

99
00:08:04,513 --> 00:08:09,229
Maintenant, je n'applique pas ceci au message d'erreur parce que je vais

100
00:08:09,229 --> 00:08:13,654
appliquer cette visibilité uniquement aux parties de mon template

101
00:08:13,654 --> 00:08:17,616
où mon plat est réellement montré.

102
00:08:17,616 --> 00:08:20,910
Maintenant, s'il y a une erreur, alors je veux juste cacher le bon plat.

103
00:08:20,910 --> 00:08:24,751
Ensuite, affichez uniquement le message d'erreur dans la vue là-bas.

104
00:08:24,751 --> 00:08:29,021
Donc, avec ces changements à mon DishDetailComponent.

105
00:08:29,021 --> 00:08:34,092
Donc, vous pouvez voir à nouveau, en expliquant cela une fois de plus.

106
00:08:34,092 --> 00:08:40,072
Quand je commencerai la récupération du nouveau plat lors du changement des paramètres de la route,

107
00:08:40,072 --> 00:08:42,924
Je mettrai la visibilité à caché afin

108
00:08:42,924 --> 00:08:48,445
ce plat actuel qui est affiché dans la vue se cachera.

109
00:08:48,445 --> 00:08:52,427
Et puis quand le nouveau plat sera disponible, de sorte que cela se produira quand

110
00:08:52,427 --> 00:08:56,221
l'abonnement est appelé quand cet observable sera disponible.

111
00:08:56,221 --> 00:09:00,001
Et puis, quand le plat devient disponible et ensuite,

112
00:09:00,001 --> 00:09:04,455
j'ai mis ce plat au plat qui est revenu de l'observable.

113
00:09:04,455 --> 00:09:08,181
À ce stade, je vais restaurer la visibilité à cet état montré.

114
00:09:08,181 --> 00:09:13,476
Donc, que mon nouveau plat que j'ai récupéré peut être affiché à l'écran.

115
00:09:13,476 --> 00:09:18,150
Avec ce changement, je vais maintenant au fichier template,

116
00:09:18,150 --> 00:09:22,710
et dans le fichier template je vais appliquer

117
00:09:22,710 --> 00:09:26,366
la visibilité aux deux plats ici.

118
00:09:26,366 --> 00:09:31,160
Donc, le premier div où j'affiche le plat, je vais

119
00:09:31,160 --> 00:09:35,948
appliquer le, Déclencheur de visibilité au plat.

120
00:09:35,948 --> 00:09:39,417
Et puis je vais définir cela égal à,

121
00:09:42,937 --> 00:09:49,060
Visibility, qui est la variable que j'ai définie dans le code là-bas.

122
00:09:49,060 --> 00:09:54,450
Maintenant, j'applique ceci au plat ici, et applique aussi la même chose

123
00:09:54,450 --> 00:09:58,530
à la deuxième div, où j'affiche les commentaires.

124
00:09:59,700 --> 00:10:00,837
Et c'est tout.

125
00:10:00,837 --> 00:10:05,902
Alors laissez-moi enregistrer tous les changements, puis nous irons et

126
00:10:05,902 --> 00:10:11,213
jeter un oeil à la façon dont cette animation fonctionne dans notre exemple.

127
00:10:11,213 --> 00:10:15,015
En allant dans le navigateur, maintenant je leur affiche le menu.

128
00:10:15,015 --> 00:10:19,618
Laissez-moi sélectionner l'un des plats et ensuite passer à la vue des plats ici.

129
00:10:19,618 --> 00:10:24,336
Donc, quand le plat est affiché, remarquez que chaque fois que je passe de

130
00:10:24,336 --> 00:10:28,432
ce plat au plat suivant, donc en cliquant sur la droite.

131
00:10:28,432 --> 00:10:33,349
Ensuite, ce plat disparaît, et quand le nouveau plat devient disponible,

132
00:10:33,349 --> 00:10:37,900
la vue devient visible et le nouveau plat est affiché.

133
00:10:37,900 --> 00:10:42,210
De même, je peux en faire un de plus et puis remarquer que le nouveau plat,

134
00:10:42,210 --> 00:10:46,070
dès que l'information devient disponible, il redevient visible.

135
00:10:46,070 --> 00:10:51,890
C'est donc la transition que j'applique dans cet exemple ici.

136
00:10:51,890 --> 00:10:58,860
Donc, en revenant, vous pouvez voir le même comportement se répéter à nouveau.

137
00:10:58,860 --> 00:11:02,730
Ce petit changement d'interface utilisateur

138
00:11:02,730 --> 00:11:08,310
ajoute beaucoup de valeur à la façon dont l'utilisateur perçoit votre application.

139
00:11:08,310 --> 00:11:13,520
Comme vous le savez, cela n'ajoute pas beaucoup à la fonctionnalité de votre application

140
00:11:13,520 --> 00:11:18,690
elle-même, mais ajoute à une meilleure expérience utilisateur.

141
00:11:18,690 --> 00:11:23,625
Et c'est là que nous appliquons des animations judicieusement dans notre application

142
00:11:23,625 --> 00:11:28,658
pour rendre certaines expériences utilisateur plus significatives

143
00:11:28,658 --> 00:11:33,302
pour l'utilisateur qui regarde votre application Angular, ou

144
00:11:33,302 --> 00:11:39,421
visionnant votre application mobile, que nous verrons dans les cours ultérieurs.

145
00:11:39,421 --> 00:11:43,957
Ceci termine cet exercice sur les animations.

146
00:11:43,957 --> 00:11:48,939
Nous continuerons les explorations d'animations dans cette seconde partie

147
00:11:48,939 --> 00:11:53,082
de l'exercice qui arrive juste après.

148
00:11:53,082 --> 00:11:57,513
C'est le bon moment pour vous de faire un commentaire Git avec les animations de message,

149
00:11:57,513 --> 00:11:58,164
première partie.

150
00:11:58,164 --> 00:12:03,927
[MUSIQUE]