[MUSIC]
Obtenons un bref aperçu du support de l'animation en angulaire avant de partir et
essayer de mettre en œuvre des animations dans notre application angulaire.
Comme vous le savez, les animations
elles-mêmes n'ajoutent pas à la fonctionnalité de votre application Angular.
Alors la question se pose, pourquoi utiliser des animations ?
Maintenant, si vous le regardez du point de vue de l'expérience utilisateur, ou
du point de vue de la conception de l'interface utilisateur, alors vous commencez à voir que les animations
ont une signification et un but pour leur utilisation dans une application.
Le donner un feedback visuel à l'utilisateur sur
choses qui se passent dans votre application angulaire.
Ainsi, vous pouvez avoir une application complètement dénuée d'animations et
qu'elle fournit toujours le même ensemble de fonctionnalités.
C'est donc quelque chose que nous devons garder à l'esprit
lorsque nous introduisons des animations dans notre application angulaire.
Les animations ne sont pas nécessaires ou requises mais
elles ajoutent ce petit piment à votre application angulaire, si vous gardez cette vue dans
votre esprit, alors vous aborderez l'animation d'un point de vue complètement différent.
C'est comme ne pas ajouter trop de sel dans vos plats juste parce que le sel ajoute du goût.
Pour beaucoup de sel gâte aussi votre plat.
La même chose avec les animations aussi.
Trop d'animations et vous vous retrouvez avec un utilisateur confus.
Mais les animations, ajoutées subtilement pour donner des suggestions aux utilisateurs, ou
donnent des commentaires visuels aux utilisateurs, ajoutent beaucoup de valeur à votre application angulaire.
Maintenant heureusement, le cadre matériel angulaire que nous utilisons déjà dans
notre application angulaire, est livré avec son propre ensemble d'animations.
En effet, c'est la raison pour laquelle nous avons inclus le module d'animation du navigateur.
Dans notre application angulaire dès le début parce que le matériel
angulaire tire déjà parti du support d'animation que
angular fournit à travers ou c'est l'animation.
Ainsi, la bibliothèque de matériaux angulaires
utilise les animations suggérées qui viennent avec la conception du matériau.
Des choses comme, par exemple, lorsque vous cliquez sur un bouton,
les effets d'ondulation que vous voyez sur le bouton et l'agrandissement subtil,
et rétrécissement des différentes parties de votre vue, etc.
Ceux-ci sont déjà suggérés par l'approche de conception des matériaux, et
donc le matériau angulaire adopte déjà beaucoup de ces choses.
Donc, même sans mettre explicitement en effort,
vous obtenez automatiquement certaines des animations requises dans
votre application angulaire juste en utilisant un matériau angulaire.
Mais supposons que vous vouliez ajouter votre propre épice au mélange.
Alors, comment approches-tu des animations en angulaire ?
C'est ce que nous allons rapidement regarder dans cette conférence.
Et puis passez à l'exercice où nous allons implémenter fu et voir si nous avons un sens
ou si elles font une différence dans la façon dont vous percevez votre application Angular.
L'idée derrière le support d'Angular pour les animations
est qu'il vous permet de construire des animations avec des performances natives proches de
de ce que vous obtiendrez avec des animations CSS pures.
Maintenant, vous pouvez immédiatement vous demander dans votre esprit,
pourquoi ne pas simplement utiliser des animations CSS pures ?
En effet, vous pouvez le faire aussi, mais rien ne vous empêche d'utiliser des animations CSS pures
dans votre application Angular.
Mais l'avantage de faire usage de
l'approche angulaire pour introduire des animations est que angulaire,
tout d'abord, tire parti du support de l'API web-animations qui est
supportée dans les versions plus modernes de tous les navigateurs.
Maintenant, donc si votre version de navigateur prend déjà en charge l'API Animations Web,
alors Angular exploite simplement un début pour
prendre en charge les animations que vous allez inclure dans votre application Angular.
Si ce n'est pas le cas, vous devez utiliser un polyfill
appelé web-animations.min.js dans votre application Angular.
Dans les exercices, nous allons commencer par l'hypothèse que nous ciblons les navigateurs
modernes, donc je n'inclus pas explicitement le polyfill.
Si vous décidez de le faire, la documentation des animations angulaires
vous indique explicitement comment le remplir pour cibler les anciens navigateurs.
Encore une fois, revenant à la question,
pourquoi ne pas utiliser l'animation CSS pure plutôt que d'utiliser l'animation angulaire ?
Maintenant, c'est là que
l'avantage d'utiliser l'animation angulaire dans votre application vient à l'avant-plan.
Le fait que les animations angulaires soient étroitement couplées
avec votre code que vous écrivez pour votre application Angular.
Et donc, vous pouvez déclencher beaucoup de ces animations liées en
directement à la façon dont votre application angulaire évolue, et
ce qui se passe dans votre application angulaire.
Ainsi, vous pouvez l'attacher au cycle de vie de vos composants.
Vous pouvez l'associer aux différentes étapes de la façon dont la vue se change
pendant que vous effectuez le rendu de la vue.
Et donc cet avantage que vous obtenez de l'utilisation de la bibliothèque d'animations Angular,
au lieu d'animations CSS pures, est quelque chose qui mérite d'être considéré.
Comment approchons-nous des animations dans Angular ?
Les animations elles-mêmes sont construites autour des états et des transitions
entre états dans le cadre angulaire, donc
nous définissons différents états, l'état pourrait être tout sauf
que vous voulez définir comme un état du point de vue de l'animation.
Tout changement d'état que vous voulez provoquer
peut déclencher l'effet d'animation pour entrer dans l'image.
Donc les transitions le long des états déclencheront le comportement d'animation
dans votre application angulaire.
Comme nous le verrons dans la diapositive suivante où je vais vous montrer un exemple de
comment vous pouvez utiliser des bandes et des transitions pour déclencher l'animation.
Ainsi, l'aspect animation de votre application angulaire
est défini à l'intérieur du décorateur de composants que vous utilisez dans vos composants.
Donc, le décorateur de composant a une propriété couleurs animations que vous
utiliserez pour définir les valeurs déclencheurs pour vos animations.
J'ai donc utilisé le mot trigger.
Dans les exercices, vous verrez comment nous allons implémenter les déclencheurs pour les animations
et comment nous allons appliquer les déclencheurs à divers éléments du modèle,
puis déclencher ces animations dans certaines circonstances.
Et en plus, lorsque vous avez besoin d'utiliser des animations dans votre application Angular
, vous devez d'abord et avant tout importer le module d'animations du navigateur.
Nous l'avons déjà fait dans notre tout premier exercice parce que
le module d'animation du navigateur était nécessaire pour supporter le matériel angulaire.
Maintenant, en outre, lorsque vous implémentez des animations au sein de vos composants.
Ensuite, vous auriez besoin de l'aide de classes de rayon telles que trigger, state,
style, animate,
transition, qui doivent être importées à partir de la bibliothèque d'animations Angular.
Et nous le ferons dans chaque composant qui nécessite d'utiliser des animations.
Comme je l'ai mentionné dans la diapositive précédente, le comportement d'animation dans votre application
Angular tourne autour des états et des transitions entre les états.
Les états peuvent être tout ce que vous définissez comme un état.
Comme vous le verrez dans l'exemple qui suit dans le tout premier exercice après cette conférence
, vous avez été défini 2 états appelés montrés et cachés.
Du nom de l'état, vous commencez automatiquement à deviner ce que ces deux états impliquent.
Maintenant, lorsque vous passez de l'état affiché à l'état caché, la transition
de l'état affiché à l'état caché déclenchera une sorte d'animation.
Alors peut-être que vous masquerez un élément dans votre vue
en changeant l'opacité de l'élément,
opacité signifiant à quel point l'élément est transparent et opacité de
signifie que l'élément est complètement opaque et visible sur l'écran.
Si vous définissez l'opacité sur zéro, l'élément disparaît complètement de l'écran.
Nous ne supprimons pas cet élément de
l'en cachant simplement cet élément en changeant son opacité.
Donc, ce serait quelque chose que vous pouvez déclencher.
De même, vous pouvez modifier la taille d'un élément.
Vous pouvez développer ou contracter la taille d'un élément en appliquant une transformation à
cette propriété d'élément en utilisant la transformation d'échelle pour l'élément.
Nous verrons des exemples comme je l'ai dit dans l'exercice qui suit.
Donc, toutes les animations que vous décrivez dans votre application Angular
dans la directive de composant utilisant la propriété animations
tourneront autour des états et des transitions entre les états.
Lorsque vous parlez d'états et de transitions, il y a quelques états
spéciaux que nous devons considérer lorsque nous définissons ces transitions.
Un de ces états est appelé comme un état vide.
Et élément qui n'est pas sur l'écran.
Un élément ou une vue de particules qui n'est pas attaché à la vue
sera considéré comme étant dans l'état vide.
Donc, lorsque l'élément apparaît dans la vue,
que s'il est attaché à l'exemple, alors l'élément passe de
l'état vide à l'un des états existants de cet élément.
Donc, dans ce cas,
vous pouvez définir une transition entre passer du vide à un état donné.
De même, vous avez aussi un autre État appelé comme un état générique ou
il est défini par étoile, ce qui signifie que vous ne vous souciez pas de quel état il est.
Donc, si vous avez besoin de définir une transition, vous pouvez dire,
si vous passez d'un état vide à l'état étoile, ce qui signifie de l'état vide à tout autre état
que vous faites la transition, vous pouvez appliquer une transformation particulière.
Ce sont donc les deux façons spéciales de définir certains états
lorsque vous définissez votre animation dans le décorateur de composant.
Donc, en particulier, il y a quelques façons de
décrivant des transitions qui sont d'un intérêt particulier pour bien sûr.
Une transition de l'état vide à n'importe quel état peut être décrite en utilisant simplement
deux-points enter, au lieu de dire étoile de flèche vide.
Donc, vous verrez que nous allons utiliser la flèche
pour décrire les transitions entre l'état.
Donc c'est la syntaxe que vous me verrez utiliser lorsque je construis les transitions.
De même, donc
un vide à tout autre état peut être décrit en utilisant simplement deux-points enter.
Donc, ce qui signifie que cette vue entre dans
la vue qui est disposée à l'écran.
De même, une transition d'un état à l'état vide,
signifiant que vous supprimez cet élément de la vue.
Ce serait également, pourrait être spécifié comme congé deux-points,
signifiant que cet élément part de cette vue particulière.
Donc, vous me verrez utiliser deux-points entrer et deux-points quitter aussi où j'ai décrit
les transitions dans le deuxième exercice que vous verrez dans cette leçon.
Donc, avec cette compréhension rapide des animations en angulaire.
Regardons comment nous écrivons réellement le code.
Et pour ce faire, nous passerons aux exercices où nous vous illustrons,
comment nous utilisons cette connaissance que nous venons d'acquérir sur la façon dont
animations sont décrites en angulaire pour écrire le code de saut de type pour
construire et appliquer les animations pour
divers éléments dans notre points de vue de nos composants.
[MUSIQUE]