Accueil

Tutoriel Inkscape - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

Animation de documents Boxy SVG

Comme Inkscape, Boxy SVG est incapable de générer du SMIL pour animer des éléments du document.
Il faut donc générer avec Boxy SVG un dessin vectoriel statique puis ouvrir le document Boxy avec un éditeur de textes tel Notepad, pour rajouter du code d'animation (JavaScript ou SMIL ou CSS)

Intégration et déplacements de "sprites" dans un document Boxy SVG

Dans cette page je vais vous montrer intégrer puis déplacer des gif animés dans une document Boxy SVG.

Le rendu

Je vais maintenant vous expliquer ma démarche pour obtenir ce fichier vectoriel SVG et animé.

Première étape : utilisation de Boxy SVG

Le code obtenu (extrait)

Il est très court.

... <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com"> <defs> <bx:grid x="0" y="0" width="100" height="100"/> </defs> <rect y="1" width="800" height="333" style="fill-opacity: 0.4; fill: rgb(152, 220, 239); stroke-width: 1; pointer-events: none;"/> <rect y="334" width="800" height="166" style="fill: rgb(114, 109, 109); stroke-width: 1; pointer-events: none;"/> <rect y="334" width="800" height="53" style="fill: rgb(55, 225, 70); stroke-width: 1; pointer-events: none;"/> <g style="pointer-events: none;"> <ellipse style="fill: rgb(255, 255, 255);" cx="279" cy="83" rx="148" ry="43"/> <ellipse style="stroke-width: 2; fill: rgb(255, 255, 255);" cx="512" cy="49" rx="143" ry="30"/> </g> <g transform="matrix(1.1261, 0, -0.00688, 1.11564, 113.61607, -34.63032)" style="pointer-events: none;"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> <g transform="matrix(1.1261, 0, 0, 1.10802, 483.35812, -32.02557)" style="pointer-events: none;"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> ...

Notez la propriété pointer-events : none; qui signifie que l'objet est verrouillé (ne peut être modifié).
Pour verrouiller un objet il faut utiliser le menu "objects" dans la barre de droite ("panels").
Grâce à ce menu on peut aussi grouper plusieurs formes en un seul objet. Il suffit de sélectionner les formes dans la liste et de produire la commande "group". C'est ce que j'ai fait avec les deux formes (ellispe vert et rectangle marron) du premier arbre. Puis j'ai dupliqué plusieurs fois ce groupe.

Le menu "objects" permet aussi de modifier l'ordre de superposition des formes. Ainsi j'avais déjà dessiné les arbres lorsque j'ai voulu dessiner le nuage (deux ellipses blanches). Donc ce nuage se retrouvait devant les arbres ...
J'ai alors ouvert le menu "objects" et avec des "glisser-déposer" j'ai modifié l'ordre d'apparition des objets.

L'outil "calque" n'existe pas sous Boxy SVG. Donc dès que vous êtes satisfait du rendu d'un objet pensez à le verrouiller pour éviter de le modifier par erreur.

Deuxième étape : utilisation de NotePad

A partir de maintenant je ne vais plus utiliser d'éditeur WYSIWIG mais un éditeur de textes.
Je vais "mettre les mains" dans le code. Des connaissances en SVG deviennent indispensables !

Je n'avais pas trouvé l'outil floutage sous Boxy SVG or je voulais que mes objets soient un peu flouté.
Je veux aussi insérer dans le document deux gifs animés.

Le code (extraits)

... <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" xmlns:xlink="http://www.w3.org/1999/xlink"> ... <defs> <bx:grid x="0" y="0" width="100" height="100"/> <filter id="flou"> <feGaussianBlur stdDeviation="2" /> </filter> </defs> ... <desc>GIF animes inseres dans zone de dessin</desc> <image y="350" width = "60" xlink:href="../images/cycliste1.gif" id ="cycliste1" /> <image y="350" width = "60" xlink:href="../images/cycliste2.gif" id ="cycliste2" /> </svg>

Pour insérer des images dans un fichier SVG il faut utiliser la balise image avec différents attributs : x,y, width ou height et xlink:href = chemin relatif de l'image insérée

Attention l'instruction image est interprétée uniquement si vous rajoutez un "namespace" dans la balise SVG : xmlns:xlink="http://www.w3.org/1999/xlink"
Notez que j'ai identifié chaque élément IMAGE ; lisez la suite pour comprendre la raison.

J'ai défini un flou sous forme d'un filtre identifié "flou". J'applique ce filtre à toutes les formes ou groupes de formes : filter="url(#flou)"

En fait les filtres existent sous Boxy SVG (et en particulier le flou gaussien).
Dans le menu de droite il faut cliquer sur compositing puis sélectionner un type de filtre à appliquer à l'objet sélectionné.

Déplacements des "sprites"

J'ai décidé de déplacer dans le décor les gifs animés avec CSS.

La feuille de style dans le document :

...
		@keyframes deplace
		{ 
		0% {transform : translateX(800px);  }
		100% {transform : translateX(-60px); }
		}
	#cycliste1 {animation : deplace 15s 1s infinite linear;}
	#cycliste2 {animation : deplace 20s 1s infinite linear;}
...

Insertion du document Boxy SVG dans une page web

L'emploi de la balise IMG n'est pas possible car le document comprend des liens vers d'autres fichiers (des gifs animés).
Seule la balise OBJECT est capable d'afficher correctement cette animation. Le code d'insertion est donc :

<object type="image/svg+xml" data="road_css.svg" alt ="image SVG" style ="border: 1px solid black; width :90%;" ></object>

Deuxième exemple : animer avec CSS

Dans le document "nuit.svg" je veux rajouter un avion qui dans la nuit noire se déplace dans le ciel tout en produisant des éclats lumineux.
Via un éditeur tel NotePad je rajoute une feuille de style dans le document. Le code de cette feuille de style interne (sans la balise STYLE) :

...
@keyframes deplace
		{ 
		0% {transform : translateX(-100px); opacity : 1; }
		10% {transform : translateX(0px); opacity : 0; }
		20% {transform : translateX(100px); opacity : 1; }
		30% {transform : translateX(200px); opacity : 0; }
		40% {transform : translateX(300px);opacity : 1; }
		50% {transform : translateX(400px);opacity : 0; }
		60% {transform : translateX(500px);opacity : 1; }	
		70% {transform : translateX(600px);opacity : 0; }
		80% {transform : translateX(700px);opacity : 1; }
		90% {transform : translateX(800px);opacity : 0; }
		100% {transform : translateX(900px);opacity : 0; }
		}
	#avion {animation : deplace 20s 0s infinite linear;}

Le code CSS est peu long mais sa production est très rapide : copier-coller.
Un "keyframes" (modèle d'animation) et l'application de ce modèle à un objet identifié "avion".
Notez que l'opacité de l'objet concerné par le keyframes passe de 0 à 1, cet objet est "translaté" de gauche à droite.

Je dessine aussi un rond jaune dans le document (feux de signalisation de l'avion).

... <circle cx="0" cy ="100" r ="5" fill ="yellow" id ="avion" /> ...

Le rendu de cette animation :

On voit une lumièr clignoter et se déplacer de gauche à droite dans le ciel noir.