Web Animations API - Apprendre JavaScript

La Web Animations API

La Web Animations API (WAAPI) vous permet de créer et de contrôler des animations directement depuis JavaScript, sans bibliothèque externe. Elle exécute les animations sur le compositeur propre du navigateur — le même moteur qui propulse les animations CSS — ce qui vous offre un mouvement fluide et accéléré par le matériel, avec en plus le contrôle programmatique des animations JavaScript : vous pouvez lire, mettre en pause, inverser, accélérer, chercher une position et enchaîner des animations à l'exécution.

Cette page couvre les deux éléments dont vous avez besoin : la méthode element.animate() qui démarre une animation, et l'objet Animation qu'elle retourne, que vous utilisez pour contrôler la lecture et savoir quand l'animation se termine.

`element.animate(keyframes, options)`

Toute animation WAAPI commence par un seul appel :

const animation = element.animate(keyframes, options);

keyframes — les états visuels à traverser. Deux formes sont acceptées :
- un array d'objets, où chaque objet est une image : [{ opacity: 0 }, { opacity: 1 }]
- un object de tableaux, où chaque propriété liste ses valeurs sur la ligne du temps : { opacity: [0, 1] }
options — soit un nombre (la durée en millisecondes) soit un objet de synchronisation tel que { duration: 1000, easing: "ease-in-out", fill: "forwards" }.

L'appel retourne un objet Animation et commence à jouer immédiatement. Les noms de propriétés utilisent la forme CSS en camelCase (backgroundColor, et non background-color).

Animation de base avec la Web Animations API

Créer une animation de base avec la Web Animations API consiste à définir les keyframes de l'animation, à spécifier l'élément cible et à configurer les options d'animation. Voici un exemple simplifié d'animation de l'opacité d'un élément :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple Opacity Animation</title>
  </head>
  <body>
    <h1>Simple Opacity Animation</h1>
    <div
      class="animated-element"
      style="width: 100px; height: 100px; background-color: blue"
    ></div>
    <button style="margin-top: 15px" onclick="startAnimation()">
      Start Animation
    </button>
    <p id="message"></p>
    <script>
      let animation;

      function startAnimation() {
        const element = document.querySelector(".animated-element");
        const keyframes = [
          { opacity: 0, offset: 0 },
          { opacity: 1, offset: 1 },
        ];
        const options = {
          duration: 1000,
          easing: "ease-in-out",
          iterations: 1,
          fill: "forwards",
        };

        // Create and play the animation
        animation = element.animate(keyframes, options);

        // Handle animation events
        animation.onfinish = () => {
          document.getElementById("message").textContent =
            "Animation finished!";
        };

        animation.oncancel = () => {
          document.getElementById("message").textContent = "Animation reset.";
        };
      }

      // Resets the animation
      function resetAnimation() {
        if (animation) {
          animation.cancel();
        }
        startAnimation(); // Restart the animation
      }
    </script>
  </body>
</html>

Essayez vous-même »

Cet exemple montre comment animer l'opacité d'un élément à l'aide de la Web Animations API. Un bouton déclenche l'animation, qui fait passer progressivement l'opacité de l'élément de invisible (0) à entièrement visible (1). Une fois l'animation terminée, un message s'affiche pour l'utilisateur. Cela illustre le contrôle de base des animations et la gestion des événements.

Options de synchronisation

Le deuxième argument de animate() contrôle comment l'animation s'exécute dans le temps. Les clés les plus utiles sont :

Option	Rôle
`duration`	Durée d'une itération, en millisecondes (ou une chaîne de temps CSS comme `"1s"`).
`iterations`	Nombre de répétitions. Utilisez `Infinity` pour boucler indéfiniment.
`easing`	La courbe d'accélération : `"linear"`, `"ease"`, `"ease-in-out"`, ou un `cubic-bezier(...)`.
`fill`	L'état à conserver en dehors de la plage active. `"forwards"` maintient la dernière image ; `"backwards"` applique la première image pendant le `delay` ; `"both"` fait les deux.
`delay`	Millisecondes à attendre avant le démarrage.
`direction`	`"normal"`, `"reverse"`, ou `"alternate"` (va-et-vient à chaque itération).

Sans fill: "forwards", un élément revient à ses styles d'origine à l'instant où l'animation se termine — une source fréquente de confusion. Définissez-le lorsque la dernière image doit rester fixée.

L'objet `Animation`

element.animate() retourne une instance Animation. C'est le handle que vous utilisez une fois l'animation démarrée :

Membre	Rôle
`play()`	Démarrer ou reprendre la lecture.
`pause()`	Geler à la position actuelle.
`reverse()`	Exécuter depuis la position actuelle en revenant vers le début.
`finish()`	Sauter directement à la fin (ou au début, si inversé).
`cancel()`	Arrêter et supprimer tous les effets, en effaçant les styles appliqués.
`finished`	Une Promise qui se résout quand l'animation se termine — idéale pour séquencer avec `await`.
`playState`	`"running"`, `"paused"`, `"finished"`, ou `"idle"`.
`playbackRate`	Multiplicateur de vitesse ; `2` correspond à la double vitesse, `-1` joue en arrière.

const anim = box.animate({ transform: ["translateX(0)", "translateX(200px)"] }, 1000);

anim.pause();          // hold in place
anim.playbackRate = 2; // play twice as fast when resumed
anim.play();

anim.finished.then(() => console.log(anim.playState)); // "finished"

Comme finished est une vraie Promise, vous pouvez l'await pour exécuter du code uniquement après la fin du mouvement, ou pour enchaîner des animations proprement — comme le fait l'exemple suivant.

Animations complexes et séquences

Pour des animations et des séquences plus complexes, vous pouvez enchaîner plusieurs animations à l'aide de promises et d'async/await. Voici un exemple d'enchaînement d'animations :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animation Sequence</title>
  </head>
  <body>
    <h1>Animation Sequence</h1>
    <div
      class="animated-element"
      style="width: 100px; height: 100px; background-color: red"
    ></div>
    <button style="margin-top: 15px" onclick="animateSequence()">
      Start Animation
    </button>
    <p id="message"></p>
    <script>
      async function animateSequence() {
        document.getElementById("message").textContent = ""; // Clear message
        const element = document.querySelector(".animated-element");
        const animation1 = element.animate(
          { opacity: [0, 1], transform: ["scale(0)", "scale(1)"] },
          { duration: 1000, easing: "ease-in-out" }
        );

        await animation1.finished;

        const animation2 = element.animate(
          { opacity: [1, 0], transform: ["scale(1)", "scale(0)"] },
          { duration: 1000, easing: "ease-in-out" }
        );

        await animation2.finished;
        document.getElementById("message").textContent = "Sequence complete!";
      }
    </script>
  </body>
</html>

Essayez vous-même »

Dans cet exemple, la première animation augmente l'opacité de l'élément et l'agrandit, puis à la fin, la deuxième animation fait disparaître l'élément en fondu et le réduit. Un message de fin s'affiche à la conclusion, illustrant comment enchaîner des animations de manière séquentielle.

Contrôle et gestion des animations

La Web Animations API fournit également des méthodes pour contrôler et gérer les animations. Par exemple, vous pouvez mettre en pause, reprendre ou annuler une animation. Voici un exemple de mise en pause et de reprise d'une animation :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Toggle Animation Play/Pause</title>
  </head>
  <body>
    <h1>Toggle Play/Pause Animation</h1>
    <div
      class="animated-element"
      style="width: 100px; height: 100px; background-color: green"
    ></div>
    <button style="margin-top: 15px" onclick="togglePlayPause()">Toggle Play/Pause</button>
    <p id="message"></p>
    <script>
      let animation;

      document.addEventListener("DOMContentLoaded", function () {
        const element = document.querySelector(".animated-element");
        animation = element.animate(
          { opacity: [0, 1] },
          { 
            duration: 1000, 
            easing: "ease-in-out", 
            iterations: Infinity, 
            direction: "alternate" 
          }
        );
        animation.pause(); // Start paused

        animation.onfinish = () => {
          document.getElementById("message").textContent =
            "Animation finished!";
        };
      });

      function togglePlayPause() {
        if (animation.playState === "running") {
          animation.pause();
          document.getElementById("message").textContent = "Animation paused";
        } else {
          animation.play();
          document.getElementById("message").textContent = "Animation playing";
        }
      }
    </script>
  </body>
</html>

Essayez vous-même »

Cet exemple montre comment basculer entre les états lecture et pause d'une animation par un clic. L'animation initiale fait apparaître et disparaître en fondu un élément de manière continue. Un clic sur un bouton permet à l'utilisateur de mettre l'animation en pause si elle est en cours d'exécution, ou de la lancer si elle est en pause. Des messages indiquent l'état actuel de l'animation, améliorant l'interaction de l'utilisateur et le contrôle sur les états d'animation.

Web Animations API vs animations CSS

Les deux s'exécutent sur le même compositeur, donc les performances sont comparables. La différence réside dans le contrôle :

Optez pour les animations CSS lorsque le mouvement est déclaratif et statique — un effet de survol, un indicateur de chargement, une transition d'entrée que vous pouvez définir entièrement dans une feuille de style.
Optez pour la Web Animations API lorsque l'animation dépend de données d'exécution ou d'une entrée utilisateur : valeurs de keyframes dynamiques, mise en pause et reprise à la demande, séquençage de plusieurs animations, ou réaction à la fin d'une animation via la promise finished.

Un bon compromis consiste à conserver votre style dans des classes — voir Styles et classes — et à utiliser WAAPI uniquement pour les transitions qui nécessitent un contrôle scripté.

Conclusion

La Web Animation API donne aux développeurs web les moyens de créer des animations captivantes et interactives qui améliorent l'expérience utilisateur sur les sites web et les applications web. En maîtrisant cette API, vous pouvez concevoir des animations allant de simples transitions à des séquences complexes, ajoutant une dimension dynamique et engageante à vos designs web. Que vous anidiez des interfaces utilisateur, ajoutiez des effets visuels ou créiez des éléments narratifs interactifs, la Web Animations API vous fournit les outils nécessaires pour donner vie à vos idées créatives sur le web.

Practice

Pratique

Quelles fonctionnalités offre l'API d'animation JavaScript ?

Elle permet de créer des animations sur le web.Elle aide à résoudre des équations mathématiques.L'API est utilisée pour créer des animations basées sur JavaScript en HTML.Elle vous permet de passer des appels téléphoniques avec JavaScript.Elle ne prend en charge que les animations basées sur CSS.

La Web Animations API

element.animate(keyframes, options)

Animation de base avec la Web Animations API

Options de synchronisation

L'objet Animation

Animations complexes et séquences

Contrôle et gestion des animations

Web Animations API vs animations CSS

Conclusion

Practice

`element.animate(keyframes, options)`

L'objet `Animation`