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 "glisser & déposer" 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 barre de droite 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 (composante animation du SVG).

Premier document Boxy SGV animé

Objectif : deux animations simultanées s'appliquant au même objet.

Le rendu

Le cercle devient une ellipse écrasée horizontalement puis écrasée verticalement. Ce cycle se répète à l'infini.
Le démarrage de l'animation est automatique.

Je me suis contenté d'insérer le document Boxy dans cette page via l'élément HTML OBJECT.
En effet dès qu'il y a animation dans une image vectorielle, il est préférable utiliser OBJECT plutôt que IMG.
Mais j'aurais pu aussi coller le code du document SVG dans la page et procéder à des modifications mineures ...

Le code du document SVG

À l'intérieur du conteneur ellipse deux instructions animate ont été générées !

Comment générer ce SMIL ?

Observez attentivement une capture d'écran de l'interface d'animation :

Vous constatez que j'ai demandé deux animations relatives à l'ellipse (objet sélectionné) :
• "rayon de coin X" : l'attribut rx
• "rayon de coin Y" : l'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.

Sous Boxy j'ai dessiné l'ellipse puis j'ai cliqué sur l'onglet "animations" pour accéder à l'interface qui génère du SMIL.

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

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

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 successives de l'attribut concerné
• begin : 0s
• dur : 10s
• fill ="freeze" pour "geler" l'animation
• repeatCount règlé à "indefinite"

Conseil

Pour avoir un regard critique sur le code SMIL généré par Boxy SVG et éventuellement le corriger, il est préférable que vous ayez de bonnes notions sur le SMIL et en particulier sur la balise animate.
Bonne nouvelle : il existe dans mon site un tuto sur le SVG avec quelques chapitres sur sa composante SMIL.
L'élément animate du SMIL

Deuxième document Boxy animé

Le précédent exemple portait sur des paramètres géométriques. Cette fois elle porte sur des paramètres de présentation.
De plus les deux animations sont ici successives.

L'interface graphique de génération du SMIL

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

Le rendu

Cliquez sur le rond pour lancer l'animation.

Le remplissage devient de plus en plus opaque puis c'est le trait qui devient de plus en plus transparent jusqu'à disparaitre.
L'animation se termmine au bout de 10 secondes.

Le code du document Boxy

Le code dans cette page web

Plutôt que d'afficher ce document SVG dans la page web, j'ai décidé de convertir le SVG externe en SVG interne.
J'ai copié la totalité du code dans cette page puis j'ai supprimé la première ligne et j'ai modifié le code de la balise SVG. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="60%"> <desc>pas de changement ! </desc> ... </svg>

La valeur de width est un pourcentage ; ainsi la zone de dessin est "responsive".

Remarques

Première animation : ... begin ="click" ... : le démarrage n'est plus automatique mais déclenché par le visiteur.
Les deux animations : ... restart="whenNotActive" ... : une fois déclenchée l'animation ne peut être suspendue.

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 une animation réalisée 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 tuto sur le SMIL et plus précisément sur l'élément animateTransform.
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'un objet le long d'un chemin donc produire une instruction SVG basée sur l'élément animateMotion.

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 SMIL.

La balise animateMotion

Une animation complexe générée par Boxy SVG.

Le rendu

Ci-dessous un document Boxy inséré dans cette page web :

Cliquez sur le rond bleu pour démarrer l'animation.
La boule fait un AR puis fait le tour du canevas.

Production de ce document SVG via Boxy SVG

Ci-dessous aspect du module 'animation' pour ce docuemnt :

En fonction de ce que vous avez lu, vous devez être capable de créer ce document SVG via Boxy.
Le canevas est délimité par un rectangle de 600 par 400 nom rempli avec des coins arrondis (rayon de 20) et un trait de bordure de 3px d'épaisseur.
La boule a un rayon de 20 et est positionnée au départ à 20 20.

Animation :
La boule bleu fait un AR (4 secondes à l'aller et 6 secondes au retour) puis elle fait le tour du canevas à un rythme constant : 100px par seconde.
Il y a donc 6 animations : deux simultanées l'une sur cx et l'autre sur cy puis quatre animations successives portant respectivement sur cx, cy, cx, cy.

Pensez à identifiez chaque animation ; la valeur de l'attribut end peut être une expression du genre "#a90.end". Ainsi vous pouvez synchroniser les animations.

En cliquant sur l'onglet "éléments" vous accédez au code SVG généré.
Cliquez alors sur une instruction, faites un clic droit et sélectionnez "ajouter un attribut" pour rajouter éventuellement un ID à une animation.