Animation Angular: Introduction

Sais-tu que Angular embarque une fonctionnalité pour créer des animations au niveau du DOM? Les animations Angular permettent de créer l’illusion du mouvement en manipulant et changent le style des éléments HTML. Dans cet article je te présente les principes de base pour pouvoir faire des animations avec le framework Angular.

Des animations bien conçues peuvent rendre votre application plus amusante et plus facile à utiliser, mais elles ne sont pas que cosmétiques.

Les animations peuvent améliorer votre application et l’expérience utilisateur de plusieurs manières. Par exemple, sans animations les transitions entre les pages Web peuvent sembler brusques et discordantes.

Principe des animations

En règle générale, les animations impliquent plusieurs transformations de style au fil du temps. Un élément HTML peut se déplacer, changer de couleur, s’agrandir ou rétrécir, s’estomper ou glisser hors de la page.

Tout ces changements peuvent se produire simultanément ou de manière séquentielle. Tu peux ainsi contrôler la synchronisation de chaque transformation.

Le système d’animation que Angular met à ta disposition est basé sur les fonctionnalités CSS, ce qui signifie que tu peux animer n’importe quelle propriété que le navigateur considère comme possible d’animer.

Cela inclut les positions, les tailles, les transformations, les couleurs, les bordures, etc.

Si tu as un doute, le site W3C maintient une liste de propriétés que tu peux animer sur sa page Transitions CSS.

Comment implémenter les animations Angular

Angular met à notre disposition tous les outil pour concevoir les animations.

Pour activer la fonctionnalité des animation il faut comme pour les requête Http, importer le module Angular dédié.

Pour les animations, c’est le module BrowserAnimationsModule qu’il faut ajouter dans la liste des imports de ton fichier app.module.ts

Voici comment faire:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }

Ensuite tu peux commencer à créer des animations pour tes Components avec les outils proposés par Angular:

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // etc...
} from '@angular/animations';

Enfin tu défini l’animation dans le décorateur du Component de cette façon:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
  ]
})

Créer une animation avec Angular

Maintenant que les principes de bases sont posé, regardons concrètement comment concevoir une animation avec Angular.

Pour que l’exemple soit clair et compréhensible, je vais créer une animation très basique qui à pour objectif de modifier la couleur d’un bouton dès lors d’on clique dessus.

L’idée est de simuler l’état « ouvert » / « fermé » d’un système d’accordéons par exemple (voir créer un système d’accordéons avec Angular).

Utilisation des State et Style Angular

Tu l’as compris, on va donc avoir besoin de l’utilitaire « state() » de la librairie d’animation de Angular pour définir l’état « ouvert » et l’état « fermé » de notre bouton d’accordéon.

La fonction « state() » prend deux arguments: un nom unique comme « open » ou « closed » et une fonction style().

La fonction style() permet de définir un ensemble de styles à associer à un nom d’état donné. Notez que les attributs de style doivent être dans camelCase.

Voyons maintenant comment la fonction « state() » fonctionne avec la fonction style⁣(⁠) pour définir les attributs de style CSS.

Dans l’extrait de code qui suit, plusieurs attributs de style sont définis en même temps pour l’état. À l’état ouvert, le bouton a une hauteur de 200 pixels, une opacité de 1 et une couleur d’arrière-plan jaune.

// ...
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),
// ...

Dans le deuxième état « closed » illustré ci-dessous, le bouton a une hauteur de 100 pixels, une opacité de 0,5 et une couleur d’arrière-plan verte.

// ...
state('closed', style({
  height: '100px',
  opacity: 0.5,
  backgroundColor: 'green'
})),
// ...

Transitions et timing

Avec Angular, tu sais bien que tu peu modifier le style d’un élément du DOM mais cela s’effectuera de manière brutale, sans effet progressif.

Pour rendre le changement moins brusque, tu dois définir une transition d’animation pour spécifier les changements qui se produisent entre un état et un autre sur une période de temps.

Heureusement la fonction transition() te permet de faire cela. Elle prend deux arguments en entrée:

  • le premier argument accepte une expression qui définit la direction entre deux états de transition
  • le second argument accepte une ou une série d’étapes animate().

La fonction animate() te permet de définir:

  • la longueur
  • le délai
  • l’accélération d’une transition,

Tu peux également utiliser la fonction animate() pour définir la fonction keyframes() pour les animations en plusieurs étapes. Ces définitions sont placées dans le deuxième argument de la fonction animate().

Pour faire simple, voici un exemple concret:

// ...
transition('open => closed', [
  animate('1s')
]),
// ...

Dans l’extrait de code ci-dessus, l’opérateur => indique des transitions unidirectionnelles et <=> est bidirectionnel.

Dans la transition, animate() spécifie la durée de la transition. Dans ce cas, le changement d’état d’ouvert à fermé prend une seconde, exprimée ici en 1s.

Déclencher une animation

Une animation nécessite un déclencheur, afin qu’elle sache quand démarrer. La fonction trigger() collecte les états et les transitions, et donne un nom à l’animation afin que tu puisse l’attacher à l’élément déclencheur dans le modèle HTML.

La fonction trigger() décrit le nom de la propriété pour surveiller les changements.

Lorsqu’un changement se produit, le déclencheur lance les actions incluses dans sa définition. Ces actions peuvent être des transitions ou d’autres fonctions, comme nous le verrons plus tard.

Dans cet exemple, nous nommerons le déclencheur « openClose » et l’attacherons à l’élément « button ». Le déclencheur décrit les états ouvert et fermé, ainsi que les minutages des deux transitions.

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  template: `
    <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
      <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
    </div>
  `,
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

Je te met l’exemple sur StackBlitz pour que tu puisse tester en live:

Conclusion

Les animation avec Angular sont gérer par le module d’animation spécialement dédié.

Il ne faut pas essayer d’utiliser d’autre technique car cela irai à l’encontre des « bonnes pratiques » Angular.

On remarque que les outils proposé par le framework permettent de créer des animations très simple jusqu’as des animation beaucoup plus complexe que nous verrons à l’occasion dans les prochains articles.

Si tu veux en apprendre plus sur les animations, tu peux te référé àa la doc officiel, https://angular.io/guide/animations ou j’ai extrais les exemple que je présente dans cet article.

N’hésite pas à consulter les autres articles qui traitent du même sujet dans la section Angular.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.

Ne rate plus jamais un article!

Inscrit toi pour recevoir une notification par email lors de la publication d'un nouvel article.

Non, je ne veux pas m'inscrire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *