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.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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);
let nb=0;
// fonction de callback
const action = () => {
  nb++;
  console.log(nb);
  window.requestAnimationFrame(action);
}

// lancement de la fonction de callback
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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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);
// fonction de callback
const action = time => { 
  console.log(time);
  window.requestAnimationFrame(action);
}

// lancement de la fonction de callback
window.requestAnimationFrame(action);
Calcul de la moyenne de temps écoulée entre deux appels de la fonction.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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);
let before=performance.now(), nb=0, somme=0;
// fonction de callback
const action = time => { 
  nb++;
  somme += time - before
  console.log(somme/nb);
  before = time;
  window.requestAnimationFrame(action);
}

// lancement de la fonction de callback
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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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 width="300" height="200">
    <circle cx="1" cy="70" r="10" />   
</svg>
<script>
    const disque = document.querySelector('svg circle');
    let cx=1, dx = 1; 

    // fonction de modification de cx
    const deplacer = () => {
        // coordonnée cx est comprise entre 0 et 300
        if(cx<0 || cx>300){
            // change le sens de modification de cx
            dx = -dx;
        }
        // modification de x
        cx += dx;
        disque.setAttribute('cx',cx);
        // relance la fonction deplacer
        window.requestAnimationFrame(deplacer);
    }
    // lancement de la fonction deplacer
    window.requestAnimationFrame(deplacer);
</script>

  


SVG - Animation