Animation

Une animation en SVG peut se faire en manipulant les propriétés des balises avec le Javascript.

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.
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.
On modifie la coordonnée cx à intervalle de temps régulier.
1
<svg width="300" height="200">
2
    <circle cx="1" cy="70" r="10" />   
3
</svg>
4
<script>
5
    const disque = document.querySelector('svg circle');
6
    let cx=1, dx = 1; 
7
8
    // fonction de modification de cx
9
    const deplacer = () => {
10
        // coordonnée cx est comprise entre 0 et 300
11
        if(cx<0 || cx>300){
12
            // change le sens de modification de cx
13
            dx = -dx;
14
        }
15
        // modification de x
16
        cx += dx;
17
        disque.setAttribute('cx',cx);
18
        // relance la fonction deplacer
19
        window.requestAnimationFrame(deplacer);
20
    }
21
    // lancement de la fonction deplacer
22
    window.requestAnimationFrame(deplacer);
23
</script>

  


SVG - Animation