Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Jusqu'à présent nous avons animé les éléments SVG via le SMIL. Mais il existe une autre solution : animer avec JavaScript conventionnel ou javaScript-jQuery.
Le rond rouge est de plus en grand et de plus opaque puis c'est l'inverse et le cycle reprend à l'infini ...
Rappel : la balise SVG est un élément HTML. Donc on peut lui appliquer la propriété background.
Si le script est interne à la page, il doit être compris dans la balise 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 l'élément SVG de type circle.
Il est difficile dans le cadre d'un script de récupérer une des valeurs de l'attribut viewBox de la balise SVG. Donc je me contente d'écrire l'instruction : var X = 400 (largeur définie dans le viewBox). Donc si vous décidez de modifier les valeurs de l'attribut viewBox il faudra corriger cette instruction du script.
Continuons l'examen du script !
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 (Il y a en effet concaténation puisque l'un des termes est une chaine).
Il faut donc avant toute tentative d'incrémentation de la variable rayon convertir cette dernière en un entier avec la fonction parseInt.
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/2 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.
Rien n'interdit d'animer des éléments SVG en JS-jQuery.
Reprenons le même thème cette fois un script écrit en jQuery.
Il faut bien sûr dans la partie HEAD charger la librairie jQuery avec un script. J'ai bien sûr supposé que le fichier .js est dans le même dossier que la page.
Le code SVG est strictement identique à la version précédente.
Notez bien que le rayon est passé en attribut et l'opacité est passée en propriété CSS !
On doit référencer le dernier élément "circle" de la page.
Pour récupérer / modifier la valeur d'un attribut il faut utiliser la méthode attr().
Pour récupérer /modifier la valeur d'une propriété CSS il faut utiliser la méthode css().
On ne peut pas dire que le script soit vraiment plus succinct qu'en JS de base mais la syntaxe est beaucoup plus simple : mêmes méthodes pour récupérer OU modifier les attributs et propriétés ; ce qui n'est pas le cas en JS de base (des méthodes SET et des méthodes GET). Autre différence notable avec JS de base : le ciblage des noeuds du DOM.
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".
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 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
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 !
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.
La fonction "coucher_soleil" est exécutée toutes les 200 millisecondes et 100 fois.
Notez qu'elle s'appelle elle-même. Donc pour que démarre l'animation il faut surtout un appel de cette fonction :
coucher_soleil();
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