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).
• Canvas/SVG Animation : animations d'éléments graphiques
• 3D Animation : animations en 3D qui utilisent par exemple le format WebGL