Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans le cadre du SMIL nous avons vu les balise animate, animateMotion, animateTransform mais il y a aussi la balise set.
La balise set permet de fixer une valeur pendant un certain laps de temps.
Le thème sera un feu tricolore qui doit successivement passer du vert à l'orange puis au rouge.
Soyez patient, comme vous l'êtes en tant que conducteur : le feu reste vert 10 s puis orange 3 sec et enfin rouge durant 7 s.
L'ordre d'apparition des feux est ici faux. Le bon ordre est : vert - orange - rouge (et non pas rouge - orange - vert).
Un viewBox de 400 par 200.
Pour chaque cercle je fais passer la propriété visibility de "hidden" à "visible".
Les animations "set" s'enchainent. La première animation de type "set" démarre à zéro mais aussi à la fin de la troisième ("a3").
Notez bien la syntaxe (déja vue) : begin="0s;a3.end"
Notez qu'avec la balise set, l'attribut from est absent ; la valeur de départ de la forme est défini dans la forme.
Notez que certains paramètres de position (x,cx) sont exprimés en pourcentage. C'est très pratique pour les cercles qui doivent être toujours centrés dans le canevas.
L'ordre d'apparition des feux est correcte : vert, orange, rouge.
Pour chaque rond, je manipule la propriété fill-opacity à la place de la propriété visibility.
J'anime d'abord le rond vert, puis le rond orange, puis le rond rouge. Et le cycle reprend !
Il peut y avoir plusieurs canevas SVG dans une même page. Mais il ne peut y avoir
deux objets ou animations ayant le même ID.
C'est pour cette raison que dans la solution 2 les ID commencent par "e" (alors qu'ils commencent par "a" dans la solution 1).
On n'est pas obligé d'utiliser la balise set du SMIL Puisqu'on manipule une propriété de style (fill-opacity). On peut utiliser le CSS !
Notez que j'ai identifié chaque cercle.
Donc en pourcentages : durée du rouge : 50% (100% / 20 * 10), durée du vert : 40% , durée de l'orange : 10%.
Observez le modèle d'animation "rouge" qui s'applique au feu rouge :
de 0% à 50% il est opaque ; de 51% à 100% il est transparent.
Observez le keyframes "vert" qui s'applique au feu vert :
de 0% à 50% il est presque transparent ; de 51% à 90% il est opaque ; de 91% à 100% il est transparent.
Observez le keyframes "orange" qui s'applique au feu orange :
de 0% à 90% il est transparent ; de 91% à 100% il est opaque.
Ensuite il faut appliquer respectivement à chaque type de feu son modèle d'animation pour une durée de cycle de 20 secondes.
Si vous voulez que le feu reste rouge 20 secondes, vert 16 secondes et orange 4 secondes. Il suffit de remplacer dans
les raccourcis animation "20s" par "40s".
La balise set est bien adaptée pour réaliser des changements saccadés.
Ci-dessous le rond devient, mais par étapes, de plus en plus grand et de plus en plus opaque puis le cycle reprend.
Un viewBox de 400 par 400.
Les changements d'attributs XML sont préfixés "x" et les changements de propriétés CSS sont préfixées "c".
Dans cette page, nous n'avons donc pas de doublons dans les ID.
Cette solution ne fonctionne pour l'instant que sous Chrome. Car ce navigateur a commmencé à implémenter la version 2 de SVG.
Dans cette nouvelle version de SVG, les paramètres géométriques tels r (rayon) peuvent être passés aussi en propriétés.
Notez que j'ai passé en propriété un paramètre géométrique : r (rayon).
Dans un "keyframes" je manipule un paramètre géométrique : r (rayon) comme une propriété de style.
Pour obtenir un animation saccadée il faut utiliser comme rythme de l'animation ("animate-timing-function") la commande "steps".
Notez que dans le premier exemple on manipule des paramètres de style ("visibility" ou "fill-opacity") donc des propriétés CSS. Comme je vous l'ai montré on peut aussi animer via le CSS.
Par contre dans l'exemple 2, on manipule entre autres un paramètre géométrique : r (rayon du cercle). Or selon la spécification SVG 1, il est obligatoire de manipuler les paramètres géométriques comme des attributs.
Mais avec la version 2 de SVG, tous les paramètres géométriques de taille et de position (width,height,r,rx,ry,x,y,cx,cy) pourront être
passés en propriétés comme je vous le montre ci-dessus.
Dans tous les deux cas, on pourra animer via le CSS ! ; le SMIL sera alors devenu obsolète.