Dessiner avec SVG - sommaire

Animer des objets SVG via JavaScript

Jusqu'à présent nous avons animé les éléments SVG via le SMIL. Mais il existe une autre solution : animer avec JavaScript.

Animation basique via JavaScript

Le rond rouge est de plus en grand et de plus opaque puis c'est l'inverse et le cycle reprend à l'infini ...

Avec JavasScript conventionnel

Le code SVG

Le script

Si le script est interne à la page, il doit être délimité par le conteneur (balise double) SCRIPT.

Si vous savez modifier le DOM HTML via JavaScript vous ne serez pas surpris par le code du script.
Ici il faut modifier la valeur de la propriété opacity) et celle de l' attribut R pour une élément du DOM SVG.

rond est une variable objet qui référence le premier élément de type "circle" puisque j'utiliser querySelector().
var rayon = rond.getAttribute('r') : cette instruction permet de récupérer la valeur de l'attribut r de l'élément "rond".
Mais attention la valeur primitive de la variable rayon est la chaine "10" (et non pas l'entier 10). Et comme en JavaScript "10" + 2 donne 102 (concaténation !). Il faut donc avant toute tentative d'incrémentation de la variable rayon convertir cette dernière en un entier.

var opacite =rond.style.fillOpacity : la variable opacité récupère la valeur de la propriété de style fill-opacity. Mais dans un script il faut écrire fillOpacity (syntaxe JavaScript).
La variable opacite récupère une chaine. Il faut donc la convertir sous forme d'un décimal avec la fonction parseFloat.

C'est la fonction JS animate qui modifie le rayon du cercle et son opacité.
Cette fonction est appelée tous les 100 millisecondes donc 10 fois par seconde grâce à setInterval.

Étudions maintenant de plus près la fonction animate !
Pour changer la valeur d'un attribut il faut utiliser la syntaxe : élément.setAttribute("attribut",nouvelle valeur).
Pour changer la valeur d'une propriété de style il faut utiliser la syntaxe : élément.style.propriété = nouvelle valeur.
La variable v_rayon est tantôt égale à 2 et tantôt égale à -2. Donc l'instruction rayon += v_rayon incrémente ou décrémente la variable rayon.
La valeur de rayon est au maximum de X/4 et au minimum de 10.
La variable v_opacite est tantôt égale à 0.01 et tantôt égale à -0.01. Donc l'instruction opacite += v_opacite incrémente ou décrémente la variable opacite.

Déplacements de "sprites"

On désigne par "sprites" les personnages d'une animation qui se déplacent. Il s'agit souvent de GIF animés.

Ici on se contente d'intégrer deux gif animés avec la balise image puis on les déplace avec JavaScript.
Par contre le décor est réalisé via le CSS ("background" du canevas SVG rempli d'un dégradé linéaire) et avec le SVG : clonage de deux objets SVG identifiés "bosquet" et "muret".

Le code SVG correspondant

Une règle de style en ligne dans la balise SVG afin que le canevas ait un fond dégradé (bleu ciel vers blanc).

Le code SVG :
• on définit deux groupes de formes identifiés "bosquet" et "muret"
• on dessine le décor en clonant les groupes "bosquet" et "muret" qui avait été définis
• on incorpore dans le canevas deux images existantes (des gif animés) grâce à la balise image et identifiées respectivement chat et chien.

Le script correspondant

Le code JS est très simple. Dans le cadre d'une fonction animate (qui est exécutée 20 fois par seconde) on se contente de changer la valeur de l'attribut x des objets SVG chien et chat donc on génère un déplacement des sprites sur l'axe des X.

Créer de nouveaux éléments SVG dans le canevas

L'insertion de nouveaux éléments HTML dans une page via JavaScript est facile (voir tuto "JavaScript & jQuery").
L'insertion de nouveaux noeud SVG est un peu plus délicate. C'est ce que nous allons traiter dans cette page.

Cette animation SVG pourrait s'appeler "coucher de soleil".
Le soleil descend lentement ; le ciel s'assombrit lentement pour devenir noir ; les étoiles apparaissent.

Pour relancer l'animation actualisez la page !

Le code SVG

Un flou est défini et s'applique à un cercle orange identifié "soleil".
Deux rectangles occupant toute la zone de dessin : un rempli de noir et un autre au dessus rempli de bleu et identifié "ciel".
Le cercle orange et flouté (soleil) est dessiné au dessus.

Le script

Dans la fonction "coucher_soleil" :
• l'ordonnée de l'objet identifié "soleil" devient de plus en grande.
• le rectangle rempli de bleu et identifié "ciel" devient de plus en plus transparent au profit du calque rempli de noir.
• un objet de type "circle" et identifié "etoile" est créé et reçoit des attributs : cx, cy, r
• il faut ensuite insérer ce nouveau noeud. La variable "scene" cible le rectangle rempli de noir ; l'instruction basée sur insertBefore insère le nouveau noeud au dessus du rectangle noir.

La fonction "coucher_soleil" est exécutée toutes les 200 millisecondes et 100 fois.
Notez qu'elle s'appelle elle-même (récursivité). Donc pour que démarre l'animation il faut un premier appel de cette fonction coucher_soleil();

Syntaxe

Si vous avez visité le tutoriel "javaScript & jQuery"(page "manipuler le DOM) dans le même site vous savez qu'il est possible avec JS de créer de nouveaux éléments HTML en utilisant les méthodes createElement() et appendChild.

Pour créer et insérer un élément SVG c'est un peu plus compliqué. Il faut utiliser la méthode createElementNS pour préciser l'espace de nommage. Il faut en effet préciser qu'il ne s'agit pas d'un nouvel élément HTML mais d'un nouvel noeud SVG !!!
Ensuite pour insérer le nouvel élément SVG dans le DOM XML on doit utiliser La méthode insertBefore qui est moins intuitive que appendChild