Tutoriel Inkscape & Boxy - sommaire

Animations SMIL avec Boxy SVG

Avant d'évoquer le panneau "animations" introduit par la version 4 de Boxy SVG, je voudrais revenir sur deux commandes intéressantes de la barre de droite : "Bibliothèques" et "Métadonnées".

Les bibliothèques

Ci-dessous un document Boxy dont les objets ont été construits via la commmande "Bibliothèques" de la BD.

Les objets de la première rangée ont été obtenus grâce à des "drag & drop" de l'onglet "Couleurs" vers le canevas.
Les objets de la deuxième rangée ont été obtenus grâce à des "drag & drop" de l'onglet "Dégradés" vers le canevas.
La première image insérée provient de l'onglet "Bitmaps" ; c'est donc une image matricielle.
La deuxième image insérée provient de l'onglet "Vecteurs" ; c'est donc une image vectorielle.

Produisez la commande "Objets" et vous êtes informé que :
• chaque objet de la première rangée est un groupe de quatre rectangles
• chaque objet de la deuxième rangée est un rectangle rempli par un dégradé
• l'image matricielle est une "image" et l'image vectorielle c'est un groupe de chemins.

Les métadonnées

Grâce à la commande "MetaDonnées" de la BD on peut attribuer à chaque objet un ID et une classe.

Création d'un document - première étape

Les rectangles ont été alignés vers le bas : sélection de ces trois objets puis "aligner en bas" dans la BH.
Les ronds ont été alignés vers le haut : sélection de ces trois objets puis "aligner en haut" dans la BH.
Les objets de chaque rangée ont été "distribué horizontalement" toujours grâce à une commande de la BH.

Avant de dessiner chaque rond j'ai double cliqué sur "Ellipse" afin de pouvoir sélectionner "cercle" puis j'ai appuyé sur MAJ tout en dessinant.

Observez bien le code SVG généré ; chaque objet a les attributs id & class
Pour les ronds les instructions utilisent la balise circle (et non pas ellipse) grâce à la manipulation évoquée ci-dessus.

Mais pourquoi attribuer un ID et une classe à chaque objet ?

L'attribut class permet de style rapidement les objets.
Pour animer un objet via le CSS3 ou le JavaScript il faut utiliser son ID dans le code.

Le code SVG du document modifié via un éditeur

Modifications effectuées

Via un éditeur de texte j'ai inséré une feuille de style définissant les deux classes.
Et oui, un document SVG peut contenir une feuille de style interne.
Attention, j'ai aussi supprimé les attributs style dans les éléments rect & circle sinon la feuille de style n'est pas prise en compte puisque une règle de style en ligne est prioritaire sur une règle dans une feuille de style.

Notez que les paramètres géométriques sont des nombres décimaux ; pensez à utiliser l'outil "Géométrie" pour que les attributs x,y,width, height,cx,cy,rx,ry,r soient des entiers !

Le rendu définitif du document

Si je veux que tous les rectangles soient remplis de bleu ciel avec un trait bleu marine il suffit de modifier la définition de la classe "rectangle".

Le module "animation"

La version 4 de Boxy SVG a introduit un module d'animation qui permet de générer du SMIL.
Pour apprécier ce module il faut mieux avoir de bonnes notions en SMIL.

Premier document Boxy SGV animé

Deux animations simultanée s'appliquant au même objet.

Le rendu

Le cercle devient une ellipse écrasé horizontalement puis écrasée verticalement alternativement. Ce cycle se répète à l'infini.

Le code SVG (extrait)

Le SMIL (les deux éléments ANIMATE) a été généré par Boxy.
Observez attentivement la capture d'écran ci-dessous :

Vous constatez que j'ai demandé deux animations relative à l'ellipse (objet sélectionné) :
• "rayon de coin X" : attribut RX
• "rayon de coin Y" : attribut RY

Notez que chaque animation est représentée par un axe qui indique la durée du cycle et précise les étapes par de petits carrés blancs.

Pour chaque animation j'ai renseigné la boite de dialogue :
• durée du cycle : 10 s
• répétition de cycle : 5
• commencer à : 0 s
• J'ai double cliqué sur l'axe pour rajouter une étape afin d'obtenir trois petits carrés blancs

Sur chaque axe j'ai cliqué sur chaque carré blanc pour préciser une valeur et cocher "geler".

J'ai donc généré pour chaque élément ANIMATE les attributs :
• attributeName : paramètre géométrique ou de style concerné par l'animation
• values : liste de valeurs séparées par des points virgule
• begin : en secondes
• dur : en secondes
• fill ="freeze" : geler l'animation
• repeatCount : un entier ou "indefinite"

Deuxième document Boxy animé

Deux animations qui s'enchainent et qui portent sur des propriétés de style
Observez attentivement la capture d'écran :

Vous constatez que j'ai demandé deux animations relative relatives au rond :
• "opacité de remplissage" : propriété fill-opacity
• "opacité de trait" : propriété stroke-opacity

Graphiquement on voit bien que la deuxième animation commence lorsque la première est terminée.

Le rendu

Le remplissage devient de plus en plus opaque puis c'est le trait qui devient de plus en plus transparent.
L'animation se termmine au bout de 16 secondes ; actualisez la page web pour relancer ladite animation !

Le code SVG généré par Boxy

Notez bien la valeur de l'attribut begin de la deuxième animation !

Constatez que l'on peut animer non seulement les paramètres géométriques (qui sont des attributs dans le code) mais aussi les paramètres de style (qui sont des propriétés dans le code (composantes de l'attribut style)).

Troisième document Boxy animé

Le rendu

Le décor est un superbe paysage.
Le chien se déplace de gauche à droite.

La réalisation de ce document SVG

J'ai d'abord importé une image matricielle proposée par la bibiothèque. j'ai redimensionné cette image afin qu'elle remplisse tout le canevas ; c'est le décor !
J'ai ensuite importé "chien.gif" (un gif animé) ; c'est le "sprite" !
Puis j'ai demandé à Boxy de générer un déplacement du "sprite".

Le code SVG généré - extrait

On voit bien que deux images matricielles ont été "rastérisées".

Pour déplacer le sprite il suffit de modifier sa position sur l'axe des X.

Attention le déplacement n'est pas linéaire ; la vitesse de déplacement n'est pas constante. Notez bien les trois valeurs de l'attribut values ("0;350;700") et les trois valeurs de l'attribut keyTimes ("0; 0.4; 1"). Il y a donc trois étapes.
Le chien atteint parcourt la moitié de la distance en 4s (10s * 0.4). Il parcourt donc l'autre moitié en 6s. Donc il va beaucoup moins vite dans l'étape 2.

Pour en savoir plus sur l'élement ANIMATE

Je vous invite à lire dans mon tuto sur le langage SVG, le chapitre en lien (et ceux qui suivent) : La balise ANIMATE du SMIL

Animations de transformations avec Boxy SVG

Le panneau "animations" de Boxy SVG peut générer non seulement des élements "animate" mais aussi des "animateTransform".

Ci-dessous un dessin vectoriel animé réalisé avec Boxy SVG

Cliquez sur le carré pour lancer l'animation.
Le carré change de taille tout en subissant une rotation mais la forme reste bien centrée dans le canevas.

Le code généré

J'ai dessiné un rectangle des dimensions du canevas rempli par un dégradé linéaire.
J'ai ensuite dessiné un carré que j'ai centré dans le canevas.

J'ai ensuite demandé deux animations relatives à cet objet :
• échelle
• tourner

Ces deux animations sont dans la rubrique "transformer".

Extrait du code : ... <rect width="500" height="400" style="stroke: rgb(0, 0, 0); fill: url("#gradient-0");"/> <rect x="200" y="150" width="100" height="100" style="fill: url('#gradient-1'); filter: url('#drop-shadow-filter-0'); transform-box: fill-box; transform-origin: 50% 50%;"> <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;2 2;1 1" dur="10s" fill="freeze" repeatCount="3" restart="whenNotActive" begin="click"/> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0;45;0" dur="10s" fill="freeze" repeatCount="3" restart="whenNotActive" begin="click"/> </rect> ...

Dans les deux instructions animateTransform notez bien l'attribut additive="sum"
Ce qui signifie que les deux transformations sont conjointes.

Dans la règle de style relative au carré (objet des transformations) vous lisez : transform-origin: 50% 50%. Boxy SVG rajoute d'office cette propriété. Ainsi le changement d'échelle ne s'accompagne pas d'une translation.

Pour en savoir davantage sur animateTransform

Je vous renvoie à mon tutoriel sur le langage SVG.
La balise animateTransform

Déplacement le long d'un chemin

Le panneau "animations" de Boxy SVG peut aussi générer le déplacement d'objets le long d'un chemin.

Ci-dessous un dessin vectoriel animé réalisé avec Boxy SVG

Cliquez sur la fusée pour lancer l'animation.

Ma démarche

J'ai lancé Boxy SVG puis j'ai créé uun nouveau document et dessiné un canevas de 400 par 600 puis :
1. j'ai dessiné un rectangle ayant les dimensions du canevas que j'ai rempli d'un bleu nuit
2. j'ai dessiné la lune (rond jaune flouté)
3. j'ai dessiné une fusée (une ellipse et un triangle et j'ai uni les deux formes ; donc j'ai créé un chemin
4. j'ai sélectionné ce chemin et j'ai demandé une animation sur cet objet ; j'ai choisi dans la liste "se déplacer le long d'un chemin
5. J'ai édité graphiquement le chemin
6. j'ai renseigné les paramètres dans la boite de dialogue située à droite ; j'ai donc répondu aux questions suivantes : durée du cycle ? Répétition du cycle ? Commencer ? Redémarrez ?

Observez bien la capture d'écran ci-dessous :

En pointillé le chemin que j'ai dessiné.

Le code SVG généré

Pour en savoir davantage sur animateMotion

Je vous invite à lire le chapitre ad hoc dans mon tuto sur le langage SVG.

La balise animateMotion

Inconvénient de la génération par Boxy SVG du SMIL

Les sprites sont forcément incorporés au document SVG alors que dans le cas d'un encodage manuel du SMIL vous auriez pu opter pour une simple liaison.
Les documents SVG peuvent donc devenir rapidement lourds si il y a de nombreuses images incorporées.