Animation avec JavaScript

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Mattia A. Fritz (discussion) 28 septembre 2016 à 11:51 (CEST)

Introduction

Cette page présente un survol des techniques pour créer des animations avec JavaScript. L'approche utilisée est plutôt "bottom-up", c'est-à-dire qu'on illustrera davantage les principes fondamentaux à la base de l'animation plutôt que fournir des technologies ou outils qui aident à créer des animations (e.g. Animate CC, Google Web Designer). L'objectif est de fournir des connaissances/compétences de base qui peuvent être généralisées par la suite indépendamment des techniques d'animation utilisées.

Prérequis

Pour suivre cette page, les connaissances suivante sont nécessaires :

• Bonne connaissance de HTML5 et CSS
• Bonne connaissance de JavaScript, voir :
  • Tutoriel JavaScript de base
  • Tutoriel JavaScript côté client

Des connaissances théoriques sur le rôle et les avantages/désavantages des animations peuvent également être utiles, mais ne son pas nécessaires. Voir à ce propos:

• Les différences entre l'image statique et l'animation quant à l'apprentissage
• Animation et image statique

Les animations d'un point de vue technique

Techniquement une animation est une "transformation" de l'écran dans un état qui maintient certains similarité avec l'état précédent, mais qui est en même temps suffisamment différent pour qu'on puisse percevoir un changement. La succession d'états avec des modifications crée l'illusion du mouvement dans le système visuel.

Pour modifier les états, l'écran de l'ordinateur est redessiné à des intervalles régulières. Lorsqu'un écran possède, parmi ses caractéristiques techniques, une fréquence de 50 ou 60Hz, cela signifie que l'écran est redessiné 50 ou 60 fois par second. Lors des animations web, la capacité de redessiner le nouveau état est également déterminé par le navigateur web. Le moteur de "rendering" du navigateur doit être suffisamment puissant pour pouvoir redessiner l'écran assez fréquemment.

Dans le passé, ce rôle était pris en charge principalement par le plugin Macromedia (et ensuite Adobe) Flash. Depuis quelques années (2010 environ), Flash n'est plus l'outil de référence pour créer des éléments animés. Sa place a été prise par JavaScript (côté client) qui possède la possibilité/capacité de modifier les propriétés des éléments d'une page web une fois que la page (et par conséquent le DOM) est disponible dans le navigateur de l'utilisateur.

En bref, une animation JavaScript consiste tout simplement à modifier, de manière graduelle, une ou plusieurs propriétés des éléments d'une page afin que l'élément présente un changement perceptible lors que l'écran est redessiné à chaque passage.

Différentes animations possibles

JavaScript, à travers le DOM, peut accéder à différents élément d'une page HTML et par conséquent presque tous les éléments qui sont disponibles (ou qui peuvent être injectés) dans le body d'une page peuvent être animés.

On peut distinguer au moins les types d'animations suivantes :

• UI Animation : animations des éléments qui constituent l'interface utilisateur (User Interface).
• Draw Animation : animations à travers le dessin "on run time" d'éléments graphiques (e.g. Canvas (HTML5) ou SVG)
• 3D Animation : animations en 3D qui utilisent par exemple le format WebGL

UI Animation

Pour les animations liés à l'interface utilisateur, on peut utiliser des animations JavaScript mais également des animations CSS. Le choix parmi ce deux types d'animations dépendent de la complexité de l'animation et comment elle est déclenchée. Par exemple, pour des animations sur des boutons dont le background se modifie graduellement au passage du mouse, une animation CSS peut-être plus appropriée. Par contre, si on veut faire apparaître un feedback avec un mouvement de type "bounce", il faudra plutôt utiliser JavaScript.

Ce type d'animation sont en général assez simples et impliquent trois éléments :

1. La ou les propriétés de l'élément qui doivent être modifiées (e.g. sa position, sa couleur, sa largeur, etc.)
2. La durée de l'animation
3. Le type d'effet ou la "trajectoire" de l'animation (e.g. linéaire, accélérée au début et plus lente à la fin, plus lente au début et accélérée à la fin, etc.)

En fonction du fait que ses animations sont ponctuelles et simples, il n'y a pas généralement pas de soucis au niveau des ressources hardware que le rendering du navigatuer nécessite pour redessiner l'écran.

Draw Animation

Dans ce type d'animation, les éléments graphiques sont dessinés à chaque mise à jour de l'écran. Les éléments graphiques dessinés peuvent être de type matriciel (avec Canvas (HTML5) ou vectoriel (avec SVG).

Dans le premier cas, le dessin se fait par pixellisation d'un élément de fond (le canvas): pour faire bouger une ligne, par exemple, on "colore" des pixels qui se trouve à x = 0 ou premier passage, à x = 1 au deuxième passage, etc.

Dans le deuxième cas, par contre, le dessin se fait par computation d'une nouvelle formule mathématique qui présente un changement par rapport au passage précédent. Pour agrandir un cercle, par exemple, nous pouvons passer à chaque passage un radius plus grand.