Chapitre 9 Interactivité et animation 

Extrait

Pour définir la vitesse de chacune des étapes de l'animation 

L'attribut 'keyTimes'

keyTimes = "liste de valeurs entre 0 et 1"
Il doit y avoir autant de valeurs dans 'keyTimes' que dans 'values'.
Ces valeurs doivent être en ordre croissant et représentant un pourcentage de la durée totale de l'animation
Avec calcMode = 'paced', l'attribut est ignoré.

Prenons un exemple:
Nous écrivons keyTimes="0;0.195;0.405;0.7;1" values="0;400;47.5;450;500".
Si la durée de l'animation est de 10 secondes ( dur="10" ), et que les valeurs concernent la largeur d'un rectangle, 
nous aurons les étapes suivantes dans l'animation:
	De 0 à 1.95s, la largeur du rectangle croît de 0 à 400
	de 1.95s à 4.05s la largeur du rectangle décroît de 400 à 47.5
	de 4.05s à 7s la largeur du rectangle croît de 47.5 à 450
	et enfin de 7s à 10s (fin de l'animation ) la largeur du rectangle croît de 450 à 500.

Si nous ne donnons pas de valeur à l'attribut 'keySplines', la vitesse de l'animation est constante pour chacune de ces étapes.

Figure 9-3. 'keyTimes' et 'values'

( jouer avec 'keyTimes' et 'values' dans un svg )

L'attribut 'keySplines'

keySplines = "liste de liste de 4 nombres entre 0 et 1"

Les quatre nombres sont les coordonnées des deux points de contrôle de la cubique de Bézier, 
celle-ci commençant au point (0,0) et se terminant en (1,1). 
Cette courbe de Bézier contrôle la vitesse pour une étape, si nous donnons une valeur à 'keyTimes' 
ou pour l'animation complète et dans ce cas une série de quatre nombres suffit. 
Si 'calcMode' n'a pas la valeur "spline", l'attribut est ignoré.

Les figures 9-4 et 9-5 montre le rapport entre la courbe de Bézier et la vitesse de l'animation.

Figure 9-4. KeySplines and speed

Sur cet exemple la vitesse est grande au début (au départ de la courbe, la tangente est proche de la verticale), 
la vitesse décroît et devient très faible à la fin.

Figure 9-5. KeySplines and speed

( jouer avec 'keySplines' dans un svg )

Sur cet exemple la vitesse est faible au départ, elle augmente très vite, atteint une valeur maximale 
et enfin décroît pour la deuxième partie de l'animation.

revenons à notre exemple précédent:
En plus de keyTimes="0;0.195;0.405;0.7;1" values="0;400;47.5;450;500" 
nous ajoutons keySplines="0,0.5,0.5,1;0.5,0,1,0.5;0,0.5,0.5,1;0,0.5,0.5,1" et calcMode="spline".
Nous avons toujours les mêmes étapes pour l'animation, mais la vitesse pour chacune de ces étapes est contrôlée par la courbe de Bézier correspondante. 
La vitesse augmente du début à la fin pour les étapes 1,  3 et 4 alors qu'elle décroît pour la seconde étape.

Il nous reste un dernier attribut 'keyPoints' mais il ne s'applique qu'à l'élément 'animateMotion' nous le verrons dans le paragraphe consacré à cet élément.