Graphiques et Animation SMIL

SVG représente l'animation comme des éléments intermédiaires dans la structure qui représente l'organisation du graphique. Les éléments Animation apparaissent comme des fils des graphiques qu'ils animent. Pour permettre à l'auteur de se concentrer sur l'animation, une vue Ligne de temps montre toutes les éléments animation et les regroupe pour chaque élément graphique animé.

La vue Ligne te temps

La vue Ligne te temps visualise les animations associées aux objets graphiques. Chaque objet graphique animé du document est représenté ici, avec une représentation graphique.

La figure suivante montre trois objets animés d'un document. Chaque objet est représenté sur le coté gauche de la vue par un label sur fond blanc et une boîte autour. En cliquant sur le label met en évidence l'élément correspondant dans la vue formatée, montrant ainsi à l'utilisateur le contexte de l'élément. Si l'élément graphique possède un seul élément d'animation (comme l'élément Rectangle dans la figure), l'élément d'animation est visualisé comme une barre colorée. Si l'élément graphique possède plusieurs éléments d'animation, une seule barre grise représente l'ensemble des animations (Circle en bas de la figure), et un bouton '+' dans le label permet à l'utilisateur d'expanser la représentation. L'élément MyText est un exemple d'une telle expansion, où chaque animation est représentée par une barre colorée.

La position sur la ligne de temps dépend de quand l'animation débute et s'arrête et la couleur de la barre reflète le type d'animation :

• jaune pour animate,
• rouge pour set,
• vert pour animateMotion,
• bleu foncé pour animateColor,
• bleu clair pour animateTransform

Edition des animations

La vue Ligne de temps est utile pour percevoir rapidement l'animation de tous les graphiques du document, mais elle permet aussi à l'auteur d'éditer les animations. Les éléments existants peuvent être modifiés. La plupart des manipulations sont faites sur la ligne de temps, comme le déplacement d'une barre ou son changement de longueur. ceci est immédiatement reflété sur les autres vues où les attributs de l'élément d'animation sont mis à jour (les attributs begin et dur dans ce cas).

Quand on crée un mouvement d'un élément graphique existant :

• L'utilisateur débute par la sélection le moment de départ de l'animation :

  Cliquer Ctrl + Bouton gauche de la souris sur l'onglet rouge de la ligne de temps et le déplacer à la bonne position de départ.

• Puis, il sélectionne l'élément concerné dans la vue formatée :

  L'élément devrait avoir un ID. Cet ID sera utilisé comme label de l'élément.

• Puis, il clique sur le bouton en haut à gauche de la vue Linge de temps.

  Ceci crée un nouvel élément d'animation dans cette vue.

• L'utilisateur donne les positions de départ et de fin du mouvement dans la vue formatée :

  Cliquer Ctrl + Bouton gauche de la souris sur l'icône dans la vue formatée. Ainsi, il peut contrôler les positions clé de l'élément animé dans le contexte des autres graphiques.

• Finalement, en retournant dans la vue Ligne de temps, il peut déplacer et/ou retailler la nouvelle barre colorée créée pour ajuster le temps d'animation.

La manipulation du temps dans la vue Ligne de temps est plus confortable, puisque l'utilisateur comprend mieux la synchronisation d'un élément particulier avec les autres éléments animés. Les autres vues sont aussi accessibles et certains paramètres peuvent être ajustés en éditant les attributs dans la vue structure ou dans la vue source si nécessaire.

Quand on crée un changement de couleur d'un élément graphique existant :

• L'utilisateur débute en sélectionnant l'élément dans la vue formatée,
• Puis, il clique sur le bouton en haut à gauche de la vue Ligne de temps.

L'utilisateur peut manipuler les barres de représentation des animation comme il manipule un rectangle dans le document. Evidement quelques contraintes sont données dans la vue Ligne de temps. Par exemple, les barres colorées ne peuvent bouger uniquement en horizontal sur l'axe de la ligne de temps, et la hauteur de peut pas être modifiée.