Mr Josselin A - Angular










Animations > Séquences d'animation complexes

Parcours & Expérience





Références

L'actualité

Librairie

L'information

Séquences d'animation complexes

Jusqu'à présent, nous avons appris des animations simples d'éléments HTML uniques. Angular vous permet également d'animer des séquences coordonnées, telles qu'une grille entière ou une liste d'éléments lorsqu'elles entrent et sortent d'une page. Vous pouvez choisir d'exécuter plusieurs animations en parallèle ou d'exécuter des animations discrètes de manière séquentielle, les unes après les autres.

Les fonctions qui contrôlent les séquences d'animation complexes sont les suivantes :

  • query() trouve un ou plusieurs éléments HTML internes.
  • stagger() applique un délai en cascade aux animations pour plusieurs éléments.
  • group() exécute plusieurs étapes d'animation en parallèle.
  • sequence() exécute les étapes d'animation les unes après les autres.

Animer plusieurs éléments en utilisant le fonctions query() et stagger()

La fonction query() vous permet de rechercher des éléments internes dans l'élément en cours d'animation. Cette fonction cible des éléments HTML spécifiques dans un composant parent et applique des animations à chaque élément individuellement. Angular gère intelligemment la configuration, le démontage et le nettoyage, car il coordonne les éléments sur la page.

La fonction stagger() vous permet de définir un intervalle de temps entre chaque élément animé qui est interrogé et d'animer ainsi les éléments avec un délai entre eux.

L'onglet Filtre/Stagger de l'exemple en direct affiche une liste de héros avec une séquence d'introduction. Toute la liste des héros s'installe, avec un léger retard de haut en bas.

L'exemple suivant montre comment utiliser query() et stagger() fonctionner sur l'entrée d'un élément animé.

  • Utilisez query() pour rechercher tout élément entrant ou sortant de la page. La requête spécifie des éléments répondant à certains critères de classe CSS.
  • Pour chacun de ces éléments, utilisez style() pour définir le même style initial pour l'élément. Rendez-le invisible et utilisez-le transformpour le déplacer afin qu'il puisse glisser en place.
  • Utilisez stagger() pour retarder chaque animation de 30 millisecondes.
  • Animez chaque élément à l'écran pendant 0,5 seconde à l'aide d'une courbe d'accélération définie par l'utilisateur, en le fondant simultanément et en ne le transformant pas.

Animation parallèle utilisant le fonction group()

Vous avez vu comment ajouter un délai entre chaque animation successive. Mais vous pouvez également vouloir configurer des animations qui se déroulent en parallèle. Par exemple, vous souhaiterez peut-être animer deux propriétés CSS du même élément mais utiliser une easingfonction différente pour chacune d'elles. Pour cela, vous pouvez utiliser la fonction group() d'animation.

La fonction group() est utilisée pour regrouper les étapes d'animation plutôt que les éléments animés.

Dans l'exemple suivant, utilisez des groupes sur les deux :enter et :leave autorisez deux configurations de minutage différentes. Ils sont appliqués au même élément en parallèle, mais s'exécutent indépendamment.

Animations séquentielles ou parallèles

Les animations complexes peuvent avoir beaucoup de choses qui se passent en même temps. Mais que se passe-t-il si vous souhaitez créer une animation impliquant plusieurs animations se déroulant les unes après les autres ? Auparavant, nous utilisions group() pour exécuter plusieurs animations en même temps, simultanément.

Une deuxième fonction appelée sequence() vous permet d'exécuter les mêmes animations l'une après l'autre. Dans sequence(), les étapes d'animation sont constituées d'appels de fonction style() ou animate().

  • Utilisez style() pour appliquer immédiatement les données de style fournies.
  • animate() permet d'appliquer des données de style sur un intervalle de temps donné.

Filter animation example

Jetons un coup d'oeil à une autre animation sur la page d'exemple en direct. Sous l'onglet Filtre/Stagger, entrez du texte dans la zone de texte Rechercher des héros, tel que Magnetou tornado.

Le filtre fonctionne en temps réel au fur et à mesure que vous tapez. Les éléments quittent la page au fur et à mesure que vous tapez chaque nouvelle lettre et le filtre devient progressivement plus strict. La liste des héros réintègre progressivement la page à mesure que vous supprimez chaque lettre dans la boîte de filtre.

Le modèle HTML contient un déclencheur appelé filterAnimation.

Le fichier de composant contient trois transitions.
L'animation fait ce qui suit :

  • Ignore les animations effectuées lors de la première ouverture de l'utilisateur ou la navigation vers cette page. Le filtre réduit ce qui existe déjà, donc il suppose que tous les éléments HTML à animer existent déjà dans le DOM.
  • Effectue une correspondance de filtre pour les correspondances.
Pour chaque match:

  • Masque l'élément en le rendant complètement transparent et infiniment étroit, en définissant son opacité et sa largeur sur 0.
  • Anime dans l'élément plus de 300 millisecondes. Pendant l'animation, l'élément assume sa largeur et son opacité par défaut.
  • S'il existe plusieurs éléments correspondants, étalonnez chaque élément en commençant par le haut de la page, avec un délai de 50 millisecondes entre chaque élément.