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

2
00:00:04,660 --> 00:00:09,853
Obtenons un bref aperçu du support de l'animation en angulaire avant de partir et

3
00:00:09,853 --> 00:00:15,820
essayer de mettre en œuvre des animations dans notre application angulaire.

4
00:00:17,010 --> 00:00:18,290
Comme vous le savez, les animations

5
00:00:18,290 --> 00:00:23,800
elles-mêmes n'ajoutent pas à la fonctionnalité de votre application Angular.

6
00:00:23,800 --> 00:00:27,210
Alors la question se pose, pourquoi utiliser des animations ?

7
00:00:27,210 --> 00:00:31,420
Maintenant, si vous le regardez du point de vue de l'expérience utilisateur, ou

8
00:00:31,420 --> 00:00:36,250
du point de vue de la conception de l'interface utilisateur, alors vous commencez à voir que les animations

9
00:00:36,250 --> 00:00:40,860
ont une signification et un but pour leur utilisation dans une application.

10
00:00:41,860 --> 00:00:46,360
Le donner un feedback visuel à l'utilisateur sur

11
00:00:46,360 --> 00:00:49,560
choses qui se passent dans votre application angulaire.

12
00:00:49,560 --> 00:00:54,920
Ainsi, vous pouvez avoir une application complètement dénuée d'animations et

13
00:00:54,920 --> 00:00:58,050
qu'elle fournit toujours le même ensemble de fonctionnalités.

14
00:00:58,050 --> 00:01:00,710
C'est donc quelque chose que nous devons garder à l'esprit

15
00:01:00,710 --> 00:01:05,280
lorsque nous introduisons des animations dans notre application angulaire.

16
00:01:05,280 --> 00:01:12,150
Les animations ne sont pas nécessaires ou requises mais

17
00:01:12,150 --> 00:01:18,940
elles ajoutent ce petit piment à votre application angulaire, si vous gardez cette vue dans

18
00:01:18,940 --> 00:01:24,090
votre esprit, alors vous aborderez l'animation d'un point de vue complètement différent.

19
00:01:25,380 --> 00:01:31,890
C'est comme ne pas ajouter trop de sel dans vos plats juste parce que le sel ajoute du goût.

20
00:01:33,030 --> 00:01:36,340
Pour beaucoup de sel gâte aussi votre plat.

21
00:01:36,340 --> 00:01:38,630
La même chose avec les animations aussi.

22
00:01:38,630 --> 00:01:42,370
Trop d'animations et vous vous retrouvez avec un utilisateur confus.

23
00:01:43,400 --> 00:01:48,790
Mais les animations, ajoutées subtilement pour donner des suggestions aux utilisateurs, ou

24
00:01:48,790 --> 00:01:55,545
donnent des commentaires visuels aux utilisateurs, ajoutent beaucoup de valeur à votre application angulaire.

25
00:01:55,545 --> 00:02:00,295
Maintenant heureusement, le cadre matériel angulaire que nous utilisons déjà dans

26
00:02:00,295 --> 00:02:05,825
notre application angulaire, est livré avec son propre ensemble d'animations.

27
00:02:05,825 --> 00:02:10,074
En effet, c'est la raison pour laquelle nous avons inclus le module d'animation du navigateur.

28
00:02:10,074 --> 00:02:15,060
Dans notre application angulaire dès le début parce que le matériel

29
00:02:15,060 --> 00:02:19,950
angulaire tire déjà parti du support d'animation que

30
00:02:21,350 --> 00:02:25,445
angular fournit à travers ou c'est l'animation.

31
00:02:25,445 --> 00:02:30,135
Ainsi, la bibliothèque de matériaux angulaires

32
00:02:30,135 --> 00:02:35,840
utilise les animations suggérées qui viennent avec la conception du matériau.

33
00:02:35,840 --> 00:02:38,700
Des choses comme, par exemple, lorsque vous cliquez sur un bouton,

34
00:02:38,700 --> 00:02:43,980
les effets d'ondulation que vous voyez sur le bouton et l'agrandissement subtil,

35
00:02:43,980 --> 00:02:50,220
et rétrécissement des différentes parties de votre vue, etc.

36
00:02:50,220 --> 00:02:55,010
Ceux-ci sont déjà suggérés par l'approche de conception des matériaux, et

37
00:02:55,010 --> 00:02:58,840
donc le matériau angulaire adopte déjà beaucoup de ces choses.

38
00:02:58,840 --> 00:03:03,140
Donc, même sans mettre explicitement en effort,

39
00:03:03,140 --> 00:03:08,100
vous obtenez automatiquement certaines des animations requises dans

40
00:03:08,100 --> 00:03:11,950
votre application angulaire juste en utilisant un matériau angulaire.

41
00:03:11,950 --> 00:03:17,640
Mais supposons que vous vouliez ajouter votre propre épice au mélange.

42
00:03:17,640 --> 00:03:21,030
Alors, comment approches-tu des animations en angulaire ?

43
00:03:21,030 --> 00:03:25,510
C'est ce que nous allons rapidement regarder dans cette conférence.

44
00:03:25,510 --> 00:03:31,091
Et puis passez à l'exercice où nous allons implémenter fu et voir si nous avons un sens

45
00:03:31,091 --> 00:03:37,402
ou si elles font une différence dans la façon dont vous percevez votre application Angular.

46
00:03:39,145 --> 00:03:42,053
L'idée derrière le support d'Angular pour les animations

47
00:03:42,053 --> 00:03:46,723
est qu'il vous permet de construire des animations avec des performances natives proches de

48
00:03:46,723 --> 00:03:52,270
de ce que vous obtiendrez avec des animations CSS pures.

49
00:03:52,270 --> 00:03:55,300
Maintenant, vous pouvez immédiatement vous demander dans votre esprit,

50
00:03:55,300 --> 00:03:57,690
pourquoi ne pas simplement utiliser des animations CSS pures ?

51
00:03:57,690 --> 00:04:01,810
En effet, vous pouvez le faire aussi, mais rien ne vous empêche d'utiliser des animations CSS pures

52
00:04:01,810 --> 00:04:04,930
dans votre application Angular.

53
00:04:04,930 --> 00:04:09,880
Mais l'avantage de faire usage de

54
00:04:09,880 --> 00:04:14,660
l'approche angulaire pour introduire des animations est que angulaire,

55
00:04:14,660 --> 00:04:19,280
tout d'abord, tire parti du support de l'API web-animations qui est

56
00:04:19,280 --> 00:04:24,620
supportée dans les versions plus modernes de tous les navigateurs.

57
00:04:24,620 --> 00:04:29,540
Maintenant, donc si votre version de navigateur prend déjà en charge l'API Animations Web,

58
00:04:29,540 --> 00:04:32,380
alors Angular exploite simplement un début pour

59
00:04:32,380 --> 00:04:36,640
prendre en charge les animations que vous allez inclure dans votre application Angular.

60
00:04:36,640 --> 00:04:39,970
Si ce n'est pas le cas, vous devez utiliser un polyfill

61
00:04:39,970 --> 00:04:45,270
appelé web-animations.min.js dans votre application Angular.

62
00:04:45,270 --> 00:04:49,190
Dans les exercices, nous allons commencer par l'hypothèse que nous ciblons les navigateurs

63
00:04:49,190 --> 00:04:53,355
modernes, donc je n'inclus pas explicitement le polyfill.

64
00:04:53,355 --> 00:04:59,625
Si vous décidez de le faire, la documentation des animations angulaires

65
00:04:59,625 --> 00:05:05,395
vous indique explicitement comment le remplir pour cibler les anciens navigateurs.

66
00:05:05,395 --> 00:05:07,425
Encore une fois, revenant à la question,

67
00:05:07,425 --> 00:05:13,440
pourquoi ne pas utiliser l'animation CSS pure plutôt que d'utiliser l'animation angulaire ?

68
00:05:13,440 --> 00:05:15,850
Maintenant, c'est là que

69
00:05:15,850 --> 00:05:20,560
l'avantage d'utiliser l'animation angulaire dans votre application vient à l'avant-plan.

70
00:05:20,560 --> 00:05:24,710
Le fait que les animations angulaires soient étroitement couplées

71
00:05:24,710 --> 00:05:28,710
avec votre code que vous écrivez pour votre application Angular.

72
00:05:28,710 --> 00:05:32,740
Et donc, vous pouvez déclencher beaucoup de ces animations liées en

73
00:05:32,740 --> 00:05:37,330
directement à la façon dont votre application angulaire évolue, et

74
00:05:37,330 --> 00:05:40,560
ce qui se passe dans votre application angulaire.

75
00:05:40,560 --> 00:05:45,610
Ainsi, vous pouvez l'attacher au cycle de vie de vos composants.

76
00:05:45,610 --> 00:05:50,356
Vous pouvez l'associer aux différentes étapes de la façon dont la vue se change

77
00:05:50,356 --> 00:05:53,290
pendant que vous effectuez le rendu de la vue.

78
00:05:53,290 --> 00:06:00,130
Et donc cet avantage que vous obtenez de l'utilisation de la bibliothèque d'animations Angular,

79
00:06:00,130 --> 00:06:05,870
au lieu d'animations CSS pures, est quelque chose qui mérite d'être considéré.

80
00:06:05,870 --> 00:06:09,140
Comment approchons-nous des animations dans Angular ?

81
00:06:09,140 --> 00:06:12,730
Les animations elles-mêmes sont construites autour des états et des transitions

82
00:06:12,730 --> 00:06:17,850
entre états dans le cadre angulaire, donc

83
00:06:17,850 --> 00:06:22,440
nous définissons différents états, l'état pourrait être tout sauf

84
00:06:22,440 --> 00:06:27,500
que vous voulez définir comme un état du point de vue de l'animation.

85
00:06:27,500 --> 00:06:31,290
Tout changement d'état que vous voulez provoquer

86
00:06:31,290 --> 00:06:35,330
peut déclencher l'effet d'animation pour entrer dans l'image.

87
00:06:35,330 --> 00:06:39,840
Donc les transitions le long des états déclencheront le comportement d'animation

88
00:06:39,840 --> 00:06:41,550
dans votre application angulaire.

89
00:06:41,550 --> 00:06:46,080
Comme nous le verrons dans la diapositive suivante où je vais vous montrer un exemple de

90
00:06:46,080 --> 00:06:50,468
comment vous pouvez utiliser des bandes et des transitions pour déclencher l'animation.

91
00:06:50,468 --> 00:06:56,260
Ainsi, l'aspect animation de votre application angulaire

92
00:06:56,260 --> 00:07:01,420
est défini à l'intérieur du décorateur de composants que vous utilisez dans vos composants.

93
00:07:01,420 --> 00:07:06,140
Donc, le décorateur de composant a une propriété couleurs animations que vous

94
00:07:06,140 --> 00:07:11,600
utiliserez pour définir les valeurs déclencheurs pour vos animations.

95
00:07:11,600 --> 00:07:13,650
J'ai donc utilisé le mot trigger.

96
00:07:13,650 --> 00:07:17,400
Dans les exercices, vous verrez comment nous allons implémenter les déclencheurs pour les animations

97
00:07:17,400 --> 00:07:22,370
et comment nous allons appliquer les déclencheurs à divers éléments du modèle,

98
00:07:22,370 --> 00:07:27,520
puis déclencher ces animations dans certaines circonstances.

99
00:07:27,520 --> 00:07:31,680
Et en plus, lorsque vous avez besoin d'utiliser des animations dans votre application Angular

100
00:07:31,680 --> 00:07:36,550
, vous devez d'abord et avant tout importer le module d'animations du navigateur.

101
00:07:36,550 --> 00:07:41,330
Nous l'avons déjà fait dans notre tout premier exercice parce que

102
00:07:41,330 --> 00:07:45,840
le module d'animation du navigateur était nécessaire pour supporter le matériel angulaire.

103
00:07:45,840 --> 00:07:50,269
Maintenant, en outre, lorsque vous implémentez des animations au sein de vos composants.

104
00:07:51,280 --> 00:07:55,840
Ensuite, vous auriez besoin de l'aide de classes de rayon telles que trigger, state,

105
00:07:55,840 --> 00:07:56,610
style, animate,

106
00:07:56,610 --> 00:08:01,550
transition, qui doivent être importées à partir de la bibliothèque d'animations Angular.

107
00:08:01,550 --> 00:08:08,010
Et nous le ferons dans chaque composant qui nécessite d'utiliser des animations.

108
00:08:08,010 --> 00:08:12,930
Comme je l'ai mentionné dans la diapositive précédente, le comportement d'animation dans votre application

109
00:08:12,930 --> 00:08:17,960
Angular tourne autour des états et des transitions entre les états.

110
00:08:17,960 --> 00:08:21,470
Les états peuvent être tout ce que vous définissez comme un état.

111
00:08:21,470 --> 00:08:26,280
Comme vous le verrez dans l'exemple qui suit dans le tout premier exercice après cette conférence

112
00:08:26,280 --> 00:08:30,650
, vous avez été défini 2 états appelés montrés et cachés.

113
00:08:30,650 --> 00:08:37,920
Du nom de l'état, vous commencez automatiquement à deviner ce que ces deux états impliquent.

114
00:08:37,920 --> 00:08:42,800
Maintenant, lorsque vous passez de l'état affiché à l'état caché, la transition

115
00:08:42,800 --> 00:08:46,970
de l'état affiché à l'état caché déclenchera une sorte d'animation.

116
00:08:46,970 --> 00:08:50,780
Alors peut-être que vous masquerez un élément dans votre vue

117
00:08:52,170 --> 00:08:56,360
en changeant l'opacité de l'élément,

118
00:08:56,360 --> 00:09:00,240
opacité signifiant à quel point l'élément est transparent et opacité de

119
00:09:00,240 --> 00:09:05,260
signifie que l'élément est complètement opaque et visible sur l'écran.

120
00:09:05,260 --> 00:09:10,360
Si vous définissez l'opacité sur zéro, l'élément disparaît complètement de l'écran.

121
00:09:10,360 --> 00:09:13,260
Nous ne supprimons pas cet élément de

122
00:09:13,260 --> 00:09:18,110
l'en cachant simplement cet élément en changeant son opacité.

123
00:09:18,110 --> 00:09:21,350
Donc, ce serait quelque chose que vous pouvez déclencher.

124
00:09:21,350 --> 00:09:24,070
De même, vous pouvez modifier la taille d'un élément.

125
00:09:24,070 --> 00:09:30,740
Vous pouvez développer ou contracter la taille d'un élément en appliquant une transformation à

126
00:09:30,740 --> 00:09:36,470
cette propriété d'élément en utilisant la transformation d'échelle pour l'élément.

127
00:09:36,470 --> 00:09:41,190
Nous verrons des exemples comme je l'ai dit dans l'exercice qui suit.

128
00:09:41,190 --> 00:09:45,670
Donc, toutes les animations que vous décrivez dans votre application Angular

129
00:09:45,670 --> 00:09:49,590
dans la directive de composant utilisant la propriété animations

130
00:09:49,590 --> 00:09:54,620
tourneront autour des états et des transitions entre les états.

131
00:09:54,620 --> 00:09:58,350
Lorsque vous parlez d'états et de transitions, il y a quelques états

132
00:09:58,350 --> 00:10:03,400
spéciaux que nous devons considérer lorsque nous définissons ces transitions.

133
00:10:03,400 --> 00:10:06,810
Un de ces états est appelé comme un état vide.

134
00:10:06,810 --> 00:10:09,580
Et élément qui n'est pas sur l'écran.

135
00:10:09,580 --> 00:10:13,240
Un élément ou une vue de particules qui n'est pas attaché à la vue

136
00:10:13,240 --> 00:10:15,880
sera considéré comme étant dans l'état vide.

137
00:10:15,880 --> 00:10:18,510
Donc, lorsque l'élément apparaît dans la vue,

138
00:10:18,510 --> 00:10:23,940
que s'il est attaché à l'exemple, alors l'élément passe de

139
00:10:23,940 --> 00:10:29,590
l'état vide à l'un des états existants de cet élément.

140
00:10:29,590 --> 00:10:30,410
Donc, dans ce cas,

141
00:10:30,410 --> 00:10:35,680
vous pouvez définir une transition entre passer du vide à un état donné.

142
00:10:35,680 --> 00:10:40,580
De même, vous avez aussi un autre État appelé comme un état générique ou

143
00:10:40,580 --> 00:10:45,870
il est défini par étoile, ce qui signifie que vous ne vous souciez pas de quel état il est.

144
00:10:45,870 --> 00:10:48,464
Donc, si vous avez besoin de définir une transition, vous pouvez dire,

145
00:10:48,464 --> 00:10:52,832
si vous passez d'un état vide à l'état étoile, ce qui signifie de l'état vide à tout autre état

146
00:10:52,832 --> 00:10:58,260
que vous faites la transition, vous pouvez appliquer une transformation particulière.

147
00:10:58,260 --> 00:11:02,970
Ce sont donc les deux façons spéciales de définir certains états

148
00:11:02,970 --> 00:11:07,130
lorsque vous définissez votre animation dans le décorateur de composant.

149
00:11:08,570 --> 00:11:13,430
Donc, en particulier, il y a quelques façons de

150
00:11:13,430 --> 00:11:18,410
décrivant des transitions qui sont d'un intérêt particulier pour bien sûr.

151
00:11:18,410 --> 00:11:23,050
Une transition de l'état vide à n'importe quel état peut être décrite en utilisant simplement

152
00:11:23,050 --> 00:11:27,876
deux-points enter, au lieu de dire étoile de flèche vide.

153
00:11:27,876 --> 00:11:32,520
Donc, vous verrez que nous allons utiliser la flèche

154
00:11:32,520 --> 00:11:34,610
pour décrire les transitions entre l'état.

155
00:11:34,610 --> 00:11:40,540
Donc c'est la syntaxe que vous me verrez utiliser lorsque je construis les transitions.

156
00:11:40,540 --> 00:11:41,260
De même, donc

157
00:11:41,260 --> 00:11:46,700
un vide à tout autre état peut être décrit en utilisant simplement deux-points enter.

158
00:11:46,700 --> 00:11:50,060
Donc, ce qui signifie que cette vue entre dans

159
00:11:50,060 --> 00:11:52,760
la vue qui est disposée à l'écran.

160
00:11:52,760 --> 00:11:56,190
De même, une transition d'un état à l'état vide,

161
00:11:56,190 --> 00:12:00,130
signifiant que vous supprimez cet élément de la vue.

162
00:12:00,130 --> 00:12:05,510
Ce serait également, pourrait être spécifié comme congé deux-points,

163
00:12:05,510 --> 00:12:09,400
signifiant que cet élément part de cette vue particulière.

164
00:12:09,400 --> 00:12:13,860
Donc, vous me verrez utiliser deux-points entrer et deux-points quitter aussi où j'ai décrit

165
00:12:14,970 --> 00:12:21,130
les transitions dans le deuxième exercice que vous verrez dans cette leçon.

166
00:12:21,130 --> 00:12:26,945
Donc, avec cette compréhension rapide des animations en angulaire.

167
00:12:26,945 --> 00:12:29,935
Regardons comment nous écrivons réellement le code.

168
00:12:29,935 --> 00:12:35,873
Et pour ce faire, nous passerons aux exercices où nous vous illustrons,

169
00:12:35,873 --> 00:12:40,494
comment nous utilisons cette connaissance que nous venons d'acquérir sur la façon dont

170
00:12:40,494 --> 00:12:45,777
animations sont décrites en angulaire pour écrire le code de saut de type pour

171
00:12:45,777 --> 00:12:49,458
construire et appliquer les animations pour

172
00:12:49,458 --> 00:12:53,830
divers éléments dans notre points de vue de nos composants.

173
00:12:53,830 --> 00:13:00,309
[MUSIQUE]