• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 20/11/2019

Créez une animation

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Principe général

Dans cette partie, nous allons voir comment réaliser une animation simple avec HTML5 et la balise canvas, qui constituent de ce point de vue une vraie alternative au logiciel Flash. Ce procédé peut s'appuyer notamment sur la notion de sauvegarde et de restauration du contexte. 

Comment animer ? Une première façon élémentaire est la suivante :

En ce qui concerne HTML, on s'appuie sur la balise canvas. Grâce à JavaScript, on associe au canvas un contexte, au sein duquel on crée des objets.

Toujours grâce à JavaScript et à la méthode  setInterval(), on lance à intervalles réguliers l'exécution d'une fonction qui va faire deux choses :

  1. Cette fonction va d'abord modifier ce contexte, par exemple le faire tourner, translater ou changer d'échelle, avec à chaque fois une valeur de rotation, de translation ou d'échelle différente ; on pourra aussi effacer tout ou partie de ce qui avait été dessiné au préalable.

  2. La seconde chose que fait cette fonction, c'est de redessiner le ou les objets ; leur localisation à l’intérieur du canvas va donc être affectée par ces modifications de contexte.

C’est ainsi que l’on va créer une animation à l’écran.

Nota : les paramètres de la méthode  setInterval  sont le nom de la fonction exécutée et le nombre de millisecondes entre deux itérations.

Exemple :  setInterval(maFonction; 100)  : ici, à chaque itération, la fonction  maFonction  est exécutée, et 100 millisecondes s’écoulent entre deux opérations.

Exemples

Nous avons vu le principe général qui permet d’animer le canvas et de produire une animation. Attaquons-nous à quelques exemples.

Premier exemple : mettre un rectangle en rotation

Voyons ce que cela donne sur un exemple simple, dans lequel nous allons mettre un rectangle en rotation.

Première étape : commençons par dessiner un rectangle
<script>
/* canvas */
var monCanvas = document.getElementById('dessin');
if (monCanvas.getContext){
var ctx = monCanvas.getContext('2d');
/* dessin */
ctx.fillStyle = "blue";
/* translation au centre */
ctx.translate(monCanvas.width/2,monCanvas.height/2)
/* dessin */
ctx.fillRect(0, 0, 200, 20);
} else {
alert('canvas non supporté par ce navigateur');
}
</script>

Ce code  :

  • définit le contexte ;

  • définit le style de remplissage ;

  • translate le contexte au centre du canvas (c'est-à-dire que l'on commencera à dessiner à partir de ce point) ;

  • dessine un premier rectangle.

Si vous testez ce code, vous obtiendrez un simple rectangle bleu.

Résultat
Résultat
Seconde étape : l'introduction du timer et de la fonction qu'il va lancer à intervalles réguliers.
<script>
/* canvas */
var monCanvas = document.getElementById('dessin');
if (monCanvas.getContext){
var ctx = monCanvas.getContext('2d');
/* dessin */
ctx.fillStyle = "blue";
/* translation au centre */
ctx.translate(monCanvas.width/2,monCanvas.height/2)
/* incrément */
var i = 0;
/* timer */
var inter = setInterval(Rotation, 100);
} else {
alert('canvas non supporté par ce navigateur');
}
/* fonction de dessin */
function Rotation() {
ctx.rotate(0.5);
/* dessin */
ctx.fillRect(0, 0, 200, 20);
i++;
if(i>11) clearInterval(inter);
}
</script>

Qu’a-t-on modifié ?

 À la place de l’instruction  ctx.fillRect(0, 0, 200, 20), nous avons introduit un timer qui lance à intervalles réguliers la fonction Rotation ; que fait cette fonction Rotation ? Elle :

  • fait tourner le contexte ;

  • dessine un nouveau rectangle ;

  • effectue un test sur le nombre de fois où l'on est passé dans cette fonction afin, le cas échéant, d'arrêter l'animation.

Voici le résultat :

On peut à ce stade faire deux remarques :

  • dessiner des formes complexes peut prendre beaucoup de temps ;

  • comme le principe est que l'on redessine à chaque instant une forme, les performances d'une animation en termes de rendu et de fluidité dépendront fortement de la vitesse de l'ordinateur sur lequel on se trouve.

Deuxième exemple : animer un rectangle en translation

Comment faire à présent si l'idée est de donner l'impression que le rectangle bouge, par exemple en diagonale, de haut en bas et vers la droite de l'écran ?

C'est simple, on reprend les étapes précédentes :

  1. Définition du contexte.

  2. Introduction du timer qui modifie le contexte et redessine.

Sauf que la zone de dessin doit être effacée à chaque étape. Pour cela, nous allons utiliser la méthode  clearRect()  qui permet d'effacer une partie rectangulaire du contexte.

Voici le code complet de cet exercice :

<script>
// canvas
var monCanvas = document.getElementById('dessin');
if (monCanvas.getContext){
var ctx = monCanvas.getContext('2d');
// dessin
ctx.fillStyle = "blue";
// translation au centre
ctx.translate(monCanvas.width/2,monCanvas.height/2)
// incrément
var i = 0;
// timer
var inter = setInterval(Translation, 100);
} else {
alert('canvas non supporté par ce navigateur');
}
/* fonction de dessin */
function Translation() {
ctx.clearRect(0, 0, monCanvas.width,monCanvas.height);
ctx.translate(2,2);
/* dessin */
ctx.fillRect(0, 0, 200, 20);
i++;
if(i>50) clearInterval(inter);
}
</script>

Ce code :

  • définit le contexte ;

  • définit le style de remplissage ;

  • translate le contexte au centre du canvas (c'est-à-dire que l'on commencera à dessiner à partir de ce point) ;

  • introduit un incrément et le timer ;

  • définit la fonction Translation que le timer va lancer à intervalles réguliers.

Que fait cette fonction dénommée Translation ?

  • L'effacement de la totalité du contenu du contexte (c'est-à-dire depuis le point (0,0) et sur une largeur et une hauteur qui correspondent aux dimensions du canvas) ;

  • une translation du contexte ;

  • un nouveau dessin ;

  • un test sur le nombre de fois où l'on a exécuté cette fonction afin, le cas échéant, d'arrêter l'animation.

Au final , nous obtiendrons l’animation ci-dessous :

En résumé

Nous venons de découvrir quelques premières animations simples avec canvas. Vous vous demandez certainement comment, dans une animation un peu plus complexe, faire en sorte d'animer séparément plusieurs objets ? Eh bien, c’est ce que nous allons voir dans le prochain chapitre.

Exemple de certificat de réussite
Exemple de certificat de réussite