Animation

Une animation avec Canvas correspond au traçage d'un dessin, de son effacement et à nouveau le traçage du dessin déplacé.

Cette action étant réalisée à intervalle de temps régulier.

DéfinitionrequestAnimationFrame

La fonction window.requestAnimationFrame permet de lancer une fonction (callback) avant le prochain rafraîchissement de l'écran.

Pour réaliser une animation, il faut que la fonction de callback appelle de nouveau window.requestAnimationFrame.

Le rafraîchissement s'effectuant en moyenne 60 fois par seconde, on peut obtenir une animation fluide et homogène.

1
let nb=0;
2
// fonction de callback
3
const action = () => {
4
  nb++;
5
  console.log(nb);
6
  window.requestAnimationFrame(action);
7
}
8
9
// lancement de la fonction de callback
10
window.requestAnimationFrame(action);
Copiez le code dans votre console et testez.
La fonction de callback peut contenir un paramètre de temps. Ce paramètre correspond au temps écoulé en millisecondes depuis l'ouverture de la page.
1
// fonction de callback
2
const action = time => { 
3
  console.log(time);
4
  window.requestAnimationFrame(action);
5
}
6
7
// lancement de la fonction de callback
8
window.requestAnimationFrame(action);
Calcul de la moyenne de temps écoulée entre deux appels de la fonction.
1
let before=performance.now(), nb=0, somme=0;
2
// fonction de callback
3
const action = time => { 
4
  nb++;
5
  somme += time - before
6
  console.log(somme/nb);
7
  before = time;
8
  window.requestAnimationFrame(action);
9
}
10
11
// lancement de la fonction de callback
12
window.requestAnimationFrame(action);
performance.now() : temps écoulé depuis l'ouverture de la page.
Copiez le code dans votre console et testez.
Vous pouvez constater que la moyenne tend vers 16,7ms (1000/60).
Attention, si vous changez d'onglet, il n'y a plus de rafraîchissement d'écran dans l'onglet, donc la moyenne augmente.
ExempleAnimation
Déplacement d'un cercle de gauche à droite puis de droite à gauche.
1
<canvas width="200" height="150">
2
    Contenu vu par les navigateurs ne supportant pas canvas
3
</canvas>
4
<style>
5
    canvas {
6
        border: 2px solid black;
7
    }
8
</style>
9
<script>
10
    const canvas = document.querySelector('canvas');
11
    const ctx = canvas.getContext('2d');
12
    let x=1, y=70, dx = 1; 
13
14
    // fonction de traçage du dessin
15
    const dessin = () => {
16
        // trace un cercle si x est compris entre 0 et 200
17
        if(x>0 && x<200){
18
            // efface le contenu du canvas
19
            ctx.clearRect(0,0,200,150);
20
            // trace un cercle en x,y
21
            ctx.beginPath();
22
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
23
            ctx.stroke();
24
        } else{
25
            // change le sens de modification de x
26
            dx = -dx;
27
        }
28
        // modification de x
29
        x = x + dx;
30
        // relance la fonction dessin
31
        window.requestAnimationFrame(dessin);
32
    }
33
34
    // lancement de la fonction dessin
35
    window.requestAnimationFrame(dessin);
36
</script>
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Animation