Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site
Dans les pages précédentes, je vous ai montré comment animer via CSS des éléments HTML.
Avec des astuces on arrive à transformer une boite en un rond ou en une ellipse mais les possibiltés de dessin en HTML sont
quand même limitées. Il est impossible de produire des formes complexes alors que le langage SVG est vraiment dédié au dessin.
Donc pour créer animations de formes complexes, il est préférable de produire des éléments SVG et de les animer via CSS.
D'autant que la version 2 de SVG présente de nombreuses innovations qui faciliteront le travail du développeur.
Les navigateurs commencent à implémenter la version 2 de SVG.
Parmi les innovations, les paramètres géométriques (with, height, x, y, cx,cy, r, rx, ry,etc.) peuvent aussi
être manipulées comme des propriétés CSS. Alors qu'en SVG 1, ces paramètres géométriques doivent être passés obligatoirement en attributs.
Donc dans le cadre d'un "keyframes" (modèle d'animation) CSS on pourra donc modifier la taille et la position d'un élément SVG
préalablement défini.
Ci-dessous une animation SVG via CSS.
Deux boules (une rouge et une blanche) qui se déplacent sur un billard.
Cette animation fonctionne avec Chrome mais pas sous Firefox ; ce dernier n'ayant pas encore commencé à implémenter la version 2 de SVG.
Il faut encoder en SVG et en CSS.
Dans la partie BODY de la page.
Je crée un canevas SVG que je style via le CSS. Je peux appliquer à la balise SVG les propriétés background, border, box-shadow
car c'est un élément HTML !
Dans cette zone de dessin je dessine et positionne deux boules identifiés "rouge" & "blanche" (balise circle du langage SVG)
Notez les attributs de taille et de position pour ce type de forme : cx, cy, r.
Il y a dans mon site tout un tutoriel sur SVG : Dessiner avec SVG
Dans le conteneur STYLE de la partie HEAD on va trouver des modèles d'animation ("keyframes") et des règles de style basées sur le raccourci "animation".
Un carré violet très opaque se transforme en rond transparent puis le cylce recommence en sens inverse.
Cette animation ne fonctionne qu'à moitié avec Firefox : la variation de l'opacité s'applique.
Cette animation est "plate". Pour lui donner un peu de relief, il suffirait d'ombrer le canevas la forme.
Ombrer un élément SVG c'est très simple avec la librairie JS Snap SVG.
On dessine un carré identifié "carre" centré dans le canevas SVG.
Le modèle d'animation ne comporte que deux étapes donc on peut remplacer les pourcentages par les mots clés "from" et "to".
Pour transformer un carré en rond il suffit de créer des coins arrondis : paramètres rx & ry.
Là encore des paramètres géométriques sont passés en propriétés CSS.
On applique ce modèle à l'élément SVG "carre via le raccourci "animation".
Vous comprenez qu'il est encore prématuré de publier des animations basées sur le SVG 2 puisqu'un seul navigateur (mais le leader) a commencé à implémenter cette version.
Reprenons l'exemple 1, l'alternative est alors d'employer le SMIL (langage d'animation du SVG). Il faut utiliser la balise animateMotion du SMIL pour déplacer les boules le long d'un chemin.
Pour l'exemple 2, la solution alternative consiterait à manipuler les attributs rx & ry dans le cadre de la balise animate du SMIL. Le SMIL est évoqué dans le cadre du tuto sur SVG : Balise animate du SMIL