Animations avec SVG et JavaScript - Chicoree

1 L'image de base

Puisque nous allons utiliser JavaScript pour animer une image SVG, il faut avant toute chose créer cette image initiale.

2 L'animation en JavaScript

Toutes les manipulations du document SVG vont maintenant prendre place dans une seule et même fonction JavaScript. Celle-ci sera appelée à plusieurs reprises par un timer et à chaque appel elle jouera une image de l'animation.

2.1 Moteur d'animation

2.2 Animer le soleil

Cette première vraie animation va se faire en deux étapes. Tout d'abord il va falloir récupérer dans le script l'élément (le cercle) représentant le soleil. Cela se fait avec la méthode DOM standard getElementById qui – comme son nom l'indique – permet de récupérer un élément à partir de son id. Quand à changer la position verticale du soleil pour le faire descendre, cela consiste à changer l'attribut cy de l'élément correspondant à l'aide de la méthode setAttribute.

2.3 Assombrir le ciel

Peut-être que ce fond noir d'encre vous semble bien triste. Pour ajouter un peu de vie à la scène, nous allons rajouter un ciel bleu par dessus – ciel que nous rendrons progessivement transparent, ce qui aura pour effet de créer un fondu du bleu vers le noir.

2.4 Ajouter les étoiles

Le soir, lorsque le soleil se couche, les étoiles paraissent. Et bien, dans notre animation, il en sera de même. Autrement dit, si à l'étape précédente nous avons changé les attributs d'éléments existants, ici, nous allons ajouter de nouveaux éléments à l'animation.

3 Le code complet

Pour ceux d'entre-vous qui sont perdus ou ont fait une fausse manipulation, voici le code complet de notre animation: