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.