Cette section définit les modules d'animation de SMIL 2.0, qui sont composés d'un module BasicAnimation et d'un module SplineAnimation. Ces modules contiennent des éléments et des attributs pour intégrer une animation sur un plan de montage chronologique et un mécanisme pour composer les effets de plusieurs animations. Puisque ces éléments et ces attributs sont définis dans des modules, les concepteurs d'autres langages balisés peuvent choisir d'inclure ou non cette fonctionnalité dans leurs langages. Les concepteurs de langage qui intègrent d'autres modules SMIL n'ont pas besoin d'inclure les modules d'animation si la fonctionnalité de l'animation n'est pas utile.
Les exemples de ce document qui incluent la syntaxe pour un langage hôte utilisent [SMIL10], [SVG], [HTML4] et [CSS2]. Ces exemples sont donnés comme indication des intégrations possibles avec des langages hôtes variés.
Tandis que ce document définit un ensemble de base des capacités d'animation, il est supposé que les langages hôtes puissent s'appuyer sur le support pour définir des éléments d'animation supplémentaires ou plus spécialisés. Une animation manipule seulement les attributs et les propriétés des éléments cibles, et donc ne requiert aucune connaissance de la sémantique de l'élément cible au-delà de l'information de base.
Ce module dépend du module BasicInlineTiming de SMIL 2.0, utilisant les éléments et les attributs du module de temporisation pour son plan de montage chronologique. Le module BasicInlineTiming est une condition préalable pour n'importe quel profil utilisant une animation SMIL. On suppose que le lecteur a lu et est familier avec le module de temporisation de SMIL 2.0.
Cette section présente d'abord les principes fondamentaux d'une animation dans SMIL 2.0, puis les éléments et attributs du module BasicAnimation et du module SplineAnimation.
Cette section décrit la sémantique sous-jacente des modules d'animation
de SMIL 2.0. Les éléments spécifiques ne sont pas décrits
ici, mais les concepts communs et la syntaxe qui constituent le modèle
d'une animation le sont. Les problèmes d'un document sont décrits,
ainsi que les moyens de cibler un élément d'une animation. Le
modèle d'animation est alors défini par l'accumulation des concepts les
plus simples aux concepts les plus complexes : d'abord une durée simple
et une fonction d'animation simple f(t),
et ensuite l'effet global F(t,u).
L'animation est définie en fonction du temps d'un élément
cible (ou plus particulièrement d'un certain attribut de
l'élément cible, l'attribut cible). L'animation définit
une correspondance temporelle avec les valeurs de l'attribut cible.
Cette correspondance prend en compte tous les aspects de la temporisation, ainsi que la sémantique
propre à l'animation.
La correspondance globale est basée sur une fonction d'animation simple
f(t) qui décrit l'animation pendant la
durée simple de l'élément. Chaque animation définit
une fonction d'animation simple qui produit une valeur pour l'attribut cible pour
chaque instant dans la durée simple.
Normatif
Un attribut cible est le nom d'une caractéristique d'un élément cible comme défini dans le langage hôte d'un document.
Ceci peut être, par exemple, un attribut XML contenu dans l'élément ou une propriété CSS qui s'applique sur l'élément. Par défaut, l'élément cible d'une animation sera le parent de l'élément d'animation (un élément d'animation est typiquement un enfant de l'élément cible). Cependant, la cible peut être n'importe quel élément dans le document, identifiée soit par une référence d'ID XML, soit par l'intermédiaire d'une référence de localisation XLink [XLINK].
Comme exemple simple, ce qui suit définit l'animation d'une forme rectangle SVG. Le rectangle évoluera de haut et étroit à bas et large.
<rect ...> <animate attributeName="width" from="10px" to="100px" begin="0s" dur="10s" /> <animate attributeName="height" from="100px" to="10px" begin="0s" dur="10s" /> </rect>
Le rectangle commence avec une largeur de 10 pixels qui augmente jusqu'à une largeur de 100 pixels en 10 secondes. Au cours de ces dix mêmes secondes, la hauteur du rectangle décroît de 100 pixels à 10 pixels.
Quand une animation est lancée, elle ne devrait pas réellement changer les valeurs de l'attribut dans le DOM [DOM2]. L'exécution de l'animation devrait conserver une valeur de présentation pour chaque attribut animé, distincte du DOM ou du modèle objet CSS (OM). Si une implémentation ne gère pas un modèle objet, elle devrait conserver la valeur originale comme définie par le document ainsi que la valeur de présentation. La valeur de présentation est reflétée dans la forme affichée du document. Les animations manipulent par conséquent la valeur de présentation, et ne devraient pas affecter la valeur de base exposée par le DOM ou le CSS OM. Ceci est détaillé dans la section « Le modèle en sandwich d'une animation ».
Normatif
La valeur de base d'un attribut cibleaau tempstest la valeur deaà laquelle l'animation est appliquée au tempst.La valeur de présentation d'un attribut cible
aau tempstest la valeur dearésultant de l'application de l'animation au tempst.
La valeur de présentation reflète l'effet de l'animation sur la valeur de base. L'effet correspond au changement de la valeur de base de l'attribut cible à un instant donné. Quand une animation se termine, l'effet de l'animation n'est plus appliqué et la valeur de présentation reprend la valeur de base par défaut. L'effet d'animation peut aussi être prolongé jusqu'à geler la dernière valeur pour la durée déterminée par la sémantique de l'attribut fill.
Un élément d'animation définit une fonction d'animation simple qui est évaluée au fur et à mesure des besoins par l'implémentation. Les valeurs résultantes sont appliquées à la valeur de présentation de l'attribut cible. Les fonctions d'animation sont continues dans le temps et peuvent être échantillonnées quelle que soit la cadence appropriée pour le système de rendu. La représentation syntaxique de la fonction d'animation simple est indépendante de ce modèle et peut être décrite de multiples façons. Les éléments d'animation dans cette spécification gèrent une syntaxe pour un jeu de valeurs discrètes ou interpolées, une syntaxe de tracé pour un mouvement basé sur les tracés SVG, une temporisation basée sur des images clés, une interpolation rythmée régulièrement et des variantes de ces fonctionnalités.
Dans l'exemple ci-dessus, la fonction d'animation simple de
l'attribut width, spécifiée par 'from="10px" to="100px" ... dur="10s"'
est
f(t) = (10 + 90*t/10) px, oùtest exprimé en seconde.
Les fonctions d'animation simples peuvent être définies avec des paramètres supplémentaires, ou peuvent être entièrement ou partiellement algorithmiques. Par exemple, une animation "to" interpole à partir de la valeur courante vers la valeur du "to" :
<animate attributeName="top" to="10" dur="2.5s" />
La fonction d'animation est aussi bien fonction de la position courante que du temps:
f(t,u) = (u*(2.5s-t)/2.5s) + 10*(t/2.5s)
Dans tous les cas, l'animation s'exprime en fonction du temps.
Normatif
La fonction d'animation simple définie par un élément d'animation est fonction du temps,f(t), définie pour les tempst,0<=t<=d, oùdest la durée simple de l'élément.La fonction d'animation simple peut être définie comme une fonction qui dépend de facteurs additionnels au facteur temps. Ceci n'affecte pas le modèle d'animation, en-dehors de l'ajout trivial de paramètres supplémentaires à
f(t), commef(t,u)utilisé dans l'exemple d'animation avec "to" juste au-dessus.
Les animations peuvent être définies soit pour surclasser, soit pour s'ajouter à la valeur de base d'un attribut. Dans ce contexte, la valeur de base peut être la valeur DOM, ou le résultat d'autres animations qui ciblent également le même attribut. Ce concept plus général de valeur de base est appelé la valeur sous-jacente. Les animations qui ajoutent à la valeur sous-jacente sont dites animations additives. Les animations qui surclassent la valeur sous-jacente sont dites non-additives. La fonction d'effet d'animation d'un élément est la fonction qui inclut la modification de la valeur sous-jacente et qui est comptable des répétitions et des gels de l'élément. Comme l'effet d'animation peut être affecté par les répétitions et les gels, il est défini pendant la durée active de l'élément plutôt que pendant sa durée simple.
Les animations peuvent être combinées de certaines façons qui produisent des valeurs intermédiaires en dehors du domaine de l'attribut cible, mais où la valeur de présentation produite est valide. Le type d'un attribut cible correspond à cet ensemble supérieur. Ceci est détaillé dans la section « Le modèle en sandwich d'une animation ».
Normatif
Le type d'un attribut cibleaest le type de base dont le domaine deaest un sous-ensemble.La fonction d'effet d'animation
F(t,u)d'un élément d'animation avec une durée activeADest une fonction faisant correspondre le tempst: 0<=t<=ADet les valeursudu type de l'attribut cibleaavec des valeurs du type dea. errata-E31-4La valeur sous-jacente
ud'un attribut ciblead'un élément d'animation au tempstest la valeur deadont l'effet d'animation est appliqué au tempst.
La fonction d'effet d'animation F(t,u) est
généralement définie par rapport à la fonction d'animation simple f(t).
La fonction f(t) doit être définie de façon à ce
que F(t,u) produise des valeurs d'un type correct.
adAD
t
t peut être
un temps perçu par l'utilisateur, la durée active d'un
élément ou sa durée simple.
u
at.
f(t)
F(t,u) définit la correspondance pour l'animation
entière, f(t) a un modèle
simplifié qui gère seulement la durée simple. errata-E31-1 errata-E31-2
F(t,u)
t: 0<=t<=AD)
et une valeur sous-jacente avec une valeur de l'attribut cible. Une valeur
de temps de 0 correspond au temps auquel l'animation commence. F(t,u)
combine la fonction d'animation simple f(t) avec tous les autres aspects d'une animation et des
contrôles de temporisation. errata-E31-3
Quand une animation est lancée, elle ne change pas réellement les valeurs des attributs dans le DOM. L'exécution de l'animation devrait idéalement conserver une valeur de présentation pour tout attribut cible, distinct du DOM, de CSS ou d'un autre modèle objet (OM) dans lequel l'attribut cible est défini. La valeur de présentation est reflétée dans la forme affichée du document. L'effet des animations consiste à manipuler cette valeur de présentation, et non d'agir sur les valeurs sous-jacentes du DOM ou du CSS OM.
La suite de cette discussion utilise le terme générique OM, tout comme pour le DOM XML [DOM2] que pour le CSS-OM. Si une implémentation ne gère pas un modèle objet, elle devrait idéalement conserver la valeur originale comme définie par le document ainsi que la valeur de présentation ; pour cette section, nous considèrerons que cette valeur originale est équivalente à la valeur OM.
Dans certaines implémentations du DOM, il peut être difficile ou peu pratique de conserver une valeur de présentation comme cela est décrit. Les valeurs CSS devraient toujours être gérées comme cela est décrit, car le CSS-OM fournit un mécanisme pour le faire. Dans les implémentations qui ne gèrent pas les valeurs de présentation distinctes des propriétés générales du DOM XML, l'implémentation doit au moins restaurer la valeur originale quand les animations n'ont plus d'effet.
Le reste de cette discussion suppose l'approche recommandée en utilisant une valeur de présentation distincte.
Le modèle qui rend compte de l'OM et simultanément avec les animations actives ou gelées pour un attribut donné est décrit comme un « sandwich », selon une analogie approximative avec les couches de viande et de fromage d'un « sandwich sous-marin » (un long sandwich fait avec beaucoup de morceaux de viandes et du fromage étalés en couches sur la longueur du pain). Dans cette analogie, le temps est associé à la longueur du sandwich, et chaque animation a sa durée représentée par la longueur de pain concernée par une couche. La valeur de base issue de l'OM occupe la partie inférieure du sandwich. Chaque animation active (ou gelée) est une couche supplémentaire venant par-dessus. Les couches (i.e., les animations) sont placées dans le sandwich en fonction du temps, sur la longueur du pain, et en fonction d'un ordre de priorité, avec les animations qui ont une priorité plus élevée placées au-dessus (i.e., par-dessus) celles qui ont une priorité plus basse. À chaque instant, vous pouvez effectuer une coupe dans le sandwich et voir comment les couches de l'animation sont empilées.
Notez que les animations manipulent la valeur de présentation provenant de l'OM dans lequel l'attribut est défini, et transmettent la valeur résultante à la prochaine couche du document traité. Ceci ne remplace ni surclasse aucune partie de la cascade de traitement normale de l'OM d'un document.
En particulier, animer un attribut défini en XML modifiera la valeur de présentation avant qu'elle ne soit traitée par la feuille de style, en utilisant la valeur du DOM XML comme base. Animer un attribut défini dans un langage de feuille de style modifiera la valeur de présentation transmise pour la suite de la cascade.
Dans CSS2 et le CSS-OM de DOM2, les termes « spécifié », « calculé » et « réel »
sont utilisés pour décrire les résultats d'évaluation de la syntaxe,
de la cascade et du rendu de la présentation. Quand une animation est
appliquée aux propriétés CSS d'un élément particulier,
la valeur de base à animer est lue en utilisant la méthode
getComputedStyle() (en lecture seule) sur cet élément. Les
valeurs produites par l'animation sont écrites dans une feuille de style
de surclassement pour cet élément, valeurs qui peuvent être obtenues en utilisant la
méthode getOverrideStyle(). Ces nouvelles valeurs affectent alors la
cascade et sont reflétées par une nouvelle valeur calculée (et par
conséquent, une présentation modifiée).
Ceci signifie que l'effet d'animation surclasse toutes les règles de la feuille de style, à l'exception
des règles de l'utilisateur avec la propriété !important.
Ceci permet aux paramaétrages de style !important de l'utilisateur d'avoir
priorité sur les animations, une condition importante pour
l'accessibilité. Notez que l'animation peut induire des effets secondaires sur la disposition du document.
Voir aussi la section 6.1
vf,
la section « Les valeurs spécifiées, calculées et réelles » de [CSS2]
et la section 5.2.1
vf,
« La feuille de style de surclassement et la feuille de style calculée »
de [DOM2CSS].
Dans un OM, la priorité des animations est donnée en fonction du démarrage de chacune. L'animation qui a débuté la première a la priorité la plus basse et l'animation qui a débuté le plus récemment a la priorité la plus haute. Quand deux animations démarrent au même moment, l'ordre d'activation est résolu comme suit :
Notez que si une animation est relancée (voir aussi « La relance des animations »), elle sera toujours placée en haut de la liste des priorités, comme cela l'est pour l'animation la plus récemment lancée. C'est-à-dire, quand une animation redémarre, sa couche se retire du sandwich et se rajoute sur le dessus. En revanche, quand un élément se répète, la priorité n'est pas affectée (le comportement de répétition n'est pas défini comme un redémarrage).
Chaque animation additive ajoute son effet au résultat de toutes les couches inférieures du sandwich. Une animation non-additive surclasse simplement le résultat de toutes les couches inférieures du sandwich. Le résultat final en haut du sandwich est la valeur de présentation qui doit être visible dans le document.
Certains attributs qui gèrent les animations additives ont leurs valeurs définies dans des limites légales (par exemple, un attribut d'opacité peut admettre des valeurs entre 0 et 1). Dans certains cas, une fonction d'animation peut produire des valeurs hors-limites. Il est recommandé que les implémentations gardent les résultats dans l'intervalle légal le plus longtemps possible, avant de les appliquer à la valeur de présentation. Idéalement, les effets de toutes les animations actives ou gelées à un point donné devraient être combinés, avant que tout forçage de valeur ne soit effectué. Bien que des fonctions d'animation individuelles puissent produire des valeurs hors-limites, la combinaison des animations additives peut quand même être légale. Forcer seulement le résultat final et non l'effet de chaque fonction d'animation permet de gérer ces cas. Des résultats intermédiaires peuvent être forcés si nécessaire bien que ce ne soit pas optimal. Le langage hôte doit définir la sémantique de forçage pour chaque attribut qui peut être animé. Comme exemple, ceci est défini pour l'élément animateColor.
Initialement, avant que toute animation pour un attribut donné ne soit active, la valeur de présentation sera identique à la valeur originale donnée dans le document (la valeur OM).
Quand toutes les animations pour un attribut donné sont terminées et que
les effets d'animation associés ne sont plus appliqués, la valeur de
présentation sera encore égale à la valeur OM. Notez que si
une quelconque animation est définie avec
fill="freeze",
l'effet de l'animation sera appliqué aussi longtemps que
l'élément d'animation restera dans l'état de gel, et donc la
valeur de présentation continuera de refléter l'effet d'animation. Se
référer aussi à la section « Le gel des animations ».
Certaines animations (e.g., animateMotion) cibleront implicitement un attribut, ou probablement plusieurs attributs (e.g., les attributs "posX" et "posY" d'un certain modèle de disposition). Ces animations doivent être combinées avec toute autre animation pour chaque attribut qui est affecté. Ainsi, par exemple une animation animateMotion peut se trouver dans plus d'un sandwich d'animation (selon le modèle de disposition du langage hôte). Pour les éléments d'animation qui ciblent implicitement les attributs, le concepteur d'un langage hôte doit spécifier quels attributs sont implicitement ciblés et l'exécution doit par conséquent combiner les animations pour les attributs respectifs.
Notez que n'importe quelle requête (via les interfaces DOM) sur l'attribut cible renverra la valeur OM et ne réflètera pas l'effet des animations. Notez aussi que la valeur OM peut toujours être changée via les interfaces OM (par exemple, en utilisant un script). Bien qu'il puisse être utile ou souhaitable de permettre un accès à la valeur finale de présentation après que tous les effets des animations sont appliqués, une telle interface n'est pas fournie dans l'animation SMIL. Une future version pourrait y remédier.
Bien qu'une animation ne manipule pas les valeurs OM, l'affichage du document doit refléter les changements sur les valeurs OM. Les langages hôtes peuvent gérer des langages de script qui peuvent manipuler les valeurs des attributs directement dans l'OM. Si une animation est active ou gelée alors que la valeur OM est modifiée, le comportement est dépendant du fait que l'animation est définie comme additive ou non, comme suit : (voir aussi la section « L'animation additive »).
Dans le modèle de temporisation, une animation est considérée comme un média « continu ». Les éléments de l'animation définis dans l'animation de SMIL n'ont pas une durée intrinsèque naturelle, on leur attribut donc la durée intrinsèque indefinite (indéfini).
Ceci a plusieurs conséquences, qui sont notées dans diverses sections plus loin. En particulier, la plupart des éléments d'une animation auront une durée explicite fixée par l'attribut dur, puisqu'une durée finie et connue est requise pour une interpolation.
Comme décrit plus haut, la fonction d'animation simple
f(t) définit l'animation pour la durée
simple d. Cependant, la temporisation de SMIL permet à
l'auteur de répéter la durée simple. La temporisation de SMIL permet aussi aux
auteurs de spécifier si l'animation doit se terminer simplement quand la
durée active sera écoulée, ou si elle doit être
gelée sur la dernière valeur. L'animation de SMIL spécifie ce
que signifie pour une animation d'être gelée. En outre, l'auteur peut
spécifier comment chaque animation devra être combinée avec les autres animations
et la valeur originale DOM.
Cette section décrit la sémantique de la fonctionnalité supplémentaire, incluant un modèle détaillé pour combiner des animations. Ceci est présenté comme une suite de fonctions basées sur la fonction d'animation simple:
fr(t), définit l'effet de la
répétition d'un élément d'animation.
fc(t), définit l'effet de
l'accumulation des valeurs d'une itération à la suivante d'un
élément d'animation répété.
ff(t), inclut l'effet du gel d'un
élément d'animation à la fin de sa durée active.
F(t,u), définit comment un élément
d'animation dépend de la valeur sous-jacente u de
l'attribut cible.
Puisque ces fonctions décrivent l'animation en dehors de la durée simple, elles
sont définies pour tout temps t non-négatif. errata-E31-6
Comme décrit dans la section
« La temporisation d'un intervalle »
du module BasicInlineTiming, répéter un élément
signifie qu'il est « joué » plusieurs fois en séquence. La période
de répétition va de 0 à la durée simple de l'élément.
Les animations suivent ce modèle, où « jouer » l'animation signifie
appliquer la fonction d'animation simple
f(t) à plusieurs reprises.
Normatif
La fonction d'animation répétitive,
fr(t), pour toute fonction d'animation simplef(t)est
fr(t) = f( REMAINDER( t, d ) ),où
t>=0,dest la durée simple, etREMAINDER( t, d )est défini par(t - d*floor(t/d)).
Cette formulation suit le modèle exclusif du point final décrit dans
la section « La temporisation d'un intervalle ».
Au moment où une animation se répète, elle commence à f(0),
elle est échantillonnée et appliquée mais n'inclut pas le
point final f(d). À la fin de la durée simple, i.e.,
au début de l'itération suivante, elle recommence à
f(0). La valeur f(d) peut
en fait ne jamais être appliquée.
Dans l'exemple suivant, la fonction d'animation de 2.5 secondes sera répétée deux fois ; la durée active sera de 5 secondes. L'attribut "top" ira de 0 à (presque) 10, reviendra de 0 à 2.5 secondes, et se répètera.
<animate attributeName="top" from="0" to="10" dur="2.5s"
repeatCount="2"
/>
Dans l'exemple suivant, la fonction d'animation sera répétée entièrement deux fois et puis la première moitié sera répétée une fois de plus; la durée active sera de 7.5 secondes.
<animate attributeName="top" from="0" to="10" dur="3s"
repeatCount="2.5"
/>
Dans l'exemple suivant, la fonction d'animation sera répétée pour avoir un total de 7 secondes. Elle sera jouée entièrement deux fois, suivi par une fraction de 2 secondes. C'est équivalent à mettre repeatCount à 2.8. La dernière itération (partielle) sera appliquée aux valeurs dans l'intervalle de "0" à "8".
<animate attributeName="top" from="0" to="10" dur="2.5s"
repeatDur="7s" />
Dans l'exemple suivant, la durée simple est plus longue que la durée spécifiée par l'attribut repeatDur, et donc la durée active coupera en réalité au plus court la durée simple. Cependant, une fonction d'animation utilise toujours la durée simple spécifiée. L'effet de l'animation est d'interpoler la valeur de "top" de 10 à 15, en 5 secondes.
<animate attributeName="top" from="10" to="20"
dur="10s"
repeatDur="5s" />
Notez que si la durée simple n'est pas définie (e.g., elle est indéfinie),
le comportement de répétition n'est pas défini (mais
repeatDur
définit toujours la durée active). Dans l'exemple suivant, la
durée simple est indéfinie, et donc
repeatCount
est en réalité ignoré. Néanmoins, ce n'est pas
considéré comme une erreur : la durée active est
également indéfinie. L'effet de l'animation est de juste utiliser la valeur
pour f(0), plaçant la couleur de remplissage
au rouge pour le reste de la durée de l'élément animé.
<animate attributeName="fill" from="red" to="blue" repeatCount="2" />
Dans l'exemple suivant, la durée simple est indéfinie, mais repeatDur détermine toujours la durée active. L'effet de l'animation est de placer la couleur de remplissage à rouge pendant 10 secondes.
<animate attributeName="fill" from="red" to="blue" repeatDur="10s" />
Dans l'exemple suivant, la durée simple est plus longue que la durée spécifiée par repeatDur, et donc la durée active écourtera en réalité la durée simple. Cependant, la fonction d'animation interpole toujours en utilisant la durée simple spécifiée. L'effet de l'animation est d'interpoler la valeur de "top" de 10 à 17, en 7 secondes.
<animate attributeName="top" from="10" to="20"
dur="10s"
repeatDur="7s" />
L'auteur peut aussi sélectionner si une animation répétitive doit répéter le comportement original pour chaque itération, ou si elle doit le construire à partir des résultats précédents, les accumulant avec chaque itération. Par exemple, un tracé de mouvement qui décrit un arc peut se répéter en se déplaçant le long du même arc à maintes reprises, ou il peut débuter chaque itération à l'endroit où la dernière s'est arrêtée, faisant rebondir l'élément animé à travers la fenêtre. Ceci est appelé une animation cumulative.
Normatif
Chaque élément d'animation doit être défini comme étant soit cumulatif, soit non-cumulatif. Un élément d'animation peut être défini comme cumulatif seulement si l'addition est définie pour l'attribut cible. La fonction d'animation cumulative,
fc(t), pour toute fonction d'animation simplef(t)est
fc(t) = fr(t), si l'élément est non-cumulatif.Si l'élément est cumulatif :
Soitfi(t)la fonction d'animation cumulative pour une itérationidonnée.La première itération
f0(t)n'est pas affectée par l'attribut accumulate, et ainsi est la même que la fonction d'animation simple d'origine. Chaque itération ultérieure s'ajoute au résultat des précédentes itérations :f0(t) = f(t)
fi(t) = (f(d) * i) + f(t - (i*d))pour tout entieri > 0.La fonction d'animation cumulative est alors
fc(t) = fi(t), oùi = floor(t/d).
Notez que fi+1(t) commence à
f(d)*i + f(0). Pour éviter les sauts, les
auteurs choisiront typiquement des fonctions d'animation qui commence à 0.
Par exemple, la notation du tracé d'un arc simple (détaillé dans la section « L'élément animateMotion ») peut être utilisée pour décrire un mouvement de rebond :
<img ...>
<animateMotion path="m 0 0 c 30 50 70 50 100 0 z" dur="5s"
accumulate="sum" repeatCount="4" />
</img>
L'image se déplace de la position de départ le long de l'arc pendant 5 secondes. Comme l'animation se répète, elle se construit sur la valeur précédente et débute le deuxième arc quand le premier est terminé, comme c'est illustré sur la Figure 1, ci-dessous. De cette façon, l'image « rebondit » à travers l'écran. La même animation pourrait être décrite complètement avec 4 arcs, mais dans le cas général la description de la trajectoire peut être assez grande et lourde à éditer.
Figure 1 - Illustration d'une animation répétitive avec
accumulate="sum".
Figure 1 - Une animation répétitive cumulative. Chaque itération se construit à partir de la précédente.
Notez qu'une animation cumulative contrôle seulement comment une seule animation accumule les résultats de la fonction d'animation simple comme elle se répète. Elle ne contrôle pas spécifiquement comment une animation interagit avec les autres animations pour produire une valeur de présentation. Ce dernier comportement est décrit dans la section « L'animation additive ». De façon similaire, si un élément recommence, l'accumulation de la première exécution n'est pas appliquée à la seconde. Voir « La relance des animations ».
N'importe quel attribut numérique qui supporte l'addition peut gérer une
animation cumulative. Par exemple, nous pouvons définir une animation « pulsante »
qui agrandira la « largeur » d'un élément SVG <rect> par
100 pixels en 50 secondes.
<rect width="20px"...>
<animate attributeName="width" dur="5s"
values="0; 15; 10" additive="sum"
accumulate="sum" repeatCount="10" />
</rect>
Chaque durée simple augmente la largeur du rectangle de 15 pixels et fini 10 pixels plus large. La forme a une largeur de 20 pixels au début, et après 5 secondes elle a une largeur de 30 pixels. L'animation se répète, et se construit sur les valeurs précédentes. La forme s'agrandira de 45 pixels et ensuite finira avec une largeur de 40 pixels après 10 secondes, et finira éventuellement avec une largeur de 120 (20 + 100) pixels après les 10 répétitions.
Les éléments d'animation suivent la définition de l'attribut fill du module de temporisation. Cette section étend cette spécification pour couvrir la sémantique d'animations spécifiques.
Par défaut, quand un élément d'animation se termine, son effet n'est plus appliqué à la valeur de présentation de l'attribut cible. Par exemple, si une animation déplace une image et que l'élément d'animation se termine, l'image « retournera » à sa position d'origine.
<img top="3" ...> <animate begin="5s" dur="10s" attributeName="top" by="100"/> </img>
Comme montré dans la Figure 2, l'image semblera immobile à la valeur top de
"3" pendant 5 secondes, puis elle se déplacera vers le bas de 100 pixels en
10 secondes. Quinze secondes après le début du document, l'animation se
terminera, l'effet ne sera plus appliqué, et l'image retournera de 103 à
3 pixels où elle a commencé (i.e., à la valeur sous-jacente DOM de
l'attribut top).
Figure 2 - Illustration d'une animation sans gel.
Figure 2 - Une animation simple sans gel. Après que l'élément animé est terminé, l'effet de l'animation est annulé.
L'attribut fill peut être employé pour maintenir la valeur de l'animation après l'écoulement de la durée active de l'élément d'animation :
<img top="3" ...> <animate begin= "5s" dur="10s" attributeName="top" by="100" fill="freeze" /> </img>
L'animation se termine 15 secondes après le commencement du document, mais l'image reste avec une valeur top de 103 (Figure 3). L'attribut gèle la dernière valeur de l'animation pour la durée de l'effet de gel. Cette durée est contrôlée par le conteneur de temps (pour les détails, voir la section « La temporisation et la synchronisation de SMIL »).
Figure 3 - Illustration d'une animation avec
fill="freeze".
Figure 3 - Une simple animation gelée. Après que l'élément animé est terminé, l'effet de l'animation est conservé.
Si la durée active écourte la durée simple (en incluant les cas de répétitions partielles), la valeur d'effet d'une animation gelée est définie pour la durée simple écourtée. Dans l'exemple suivant, la fonction d'animation simple se répète entièrement deux fois et puis encore une demi-fois la durée simple. Dans ce cas, la valeur alors gelée sera 53 :
<img top="3" ...> <animate begin= "5s" dur="10s" attributeName="top" by="100" repeatCount="2.5" fill="freeze" /> </img>
Figure 4 - Illustration d'une animation combinant les attributs
repeat
partiel et fill="freeze".
Dans l'exemple suivant, l'attribut dur
est manquant, et donc la durée simple est indéfinie. La durée active est contrainte
par la valeur end
qui est de 10 secondes.
L'interpolation n'est pas définie et la valeur alors gelée sera
la valeur de l'attribut from,
qui est de 10 :
<animate from="10" to="20" end="10s" fill="freeze" .../>
Exposons ceci formellement :
Normatif errata-E31-7
La fonction d'animation gelée,
ff(t), pour un élément avec une durée activeAD,0<=t<=ADest donnée parff(t) = fc(t)pour tout tempst:0<=t<ADSi
ADn'est pas un multiple de la durée simpled,ff(AD) = fc(AD).Si
ADest un multiple ded, i.e.AD = d*ipour un certain entier positifi, et l'animation est non-cumulative,ff(AD) = f(d).Si
ADest un multiple ded, i.e.AD = d*ipour un certain entier positifi, et l'animation est cumulative,ff(AD) = f(d) * i.
En plus de répéter et d'accumuler les valeurs d'une seule animation, une animation peut être exprimée comme une variation par rapport à la valeur d'un attribut, plutôt que comme une valeur absolue. Ceci peut être employé dans une animation seule pour modifier la valeur sous-jacente DOM ou pour produire des animations complexes en combinant plusieurs animations simples.
Par exemple, une animation simple de « grossissement » peut augmenter la largeur d'un objet
de 10 pixels :
<rect width="20px" ...>
<animate attributeName="width" from="0px" to="10px" dur="10s"
additive="sum"/>
</rect>
La largeur est de 20 pixels au début, et augmente à 30 pixels en 10 secondes. Si une animation a été déclarée non-additive, les mêmes valeurs from et to feraient aller la largeur de 0 à 10 pixels en 10 secondes.
De nombreuses animations complexes sont mieux exprimées comme des combinaisons d'animations plus simples. Par exemple, un tracé « vibrant » peut être décrit par un mouvement répété de haut en bas ajouté à n'importe quel autre mouvement :
<img ...> <animateMotion from="0,0" to="100,0" dur="10s" /> <animateMotion values="0,0; 0,5; 0,0" dur="1s" repeatDur="10s" additive="sum"/> </img>
La fonction d'effet d'animation, , reprend cette sémantique
pour un seul élément d'animation:
Normatif
La fonction d'effet d'animation,
F(t,u), pour un élément d'animation avec une durée simple x et une durée active y, est une fonction faisant correspondre t, 0<=t<=AD et u, une valeur du type de l'attribut cible de l'animation avec une valeur du même type. errata-E31-5Chaque élément d'animation doit être défini comme étant soit additif, soit non-additif. Un élément peut être défini comme additif seulement si l'addition est définie pour le type de l'attribut cible.
Si l'animation est additive,F(t,u) = u + ff(t).
Si l'animation est non-additive,F(t,u) = ff(t).
Quand il y a plusieurs animations définies pour un attribut donné qui se superposent à n'importe quel moment, soit les deux s'additionnent, soit une surclasse l'autre. Des animations se superposent quand elles sont toutes deux actives ou gelées au même moment. L'ordonnancement des animations (par exemple, laquelle animation surclasse l'autre) est déterminé par une priorité associée à chaque animation. La priorité des animations est donnée en fonction du moment où chacune commence. La première animation qui a démarré a la priorité la plus basse et celle qui a commencé en dernier a la priorité la plus haute.
Les animations de plus haute priorité qui ne sont pas additives surclasseront toutes les animations précédentes (de priorité plus basse) et fixeront simplement la valeur d'attribut. Les animations qui sont additives s'appliquent (i.e., s'ajoutent) au résultat des précédentes animations activées. Pour les détails de comment les animations sont combinées, voir « Le modèle en sandwich d'une animation ».
Une animation additive est définie pour des attributs numériques et autres types de données pour lesquels une fonction d'addition est définie. Ceci inclut les attributs numériques pour les concepts tels que la position, la largeur et la hauteur, la taille, etc. Ceci inclut également la couleur (se référer à « L'élément animateColor »), et peut inclure d'autres types de données comme ceux spécifiés par le langage hôte.
Il est souvent utile de combiner des animations additives avec un comportement fill, par exemple quand on définit une série de mouvements qui devrait se construire sur une autre :
<img ...> <animateMotion begin="0" dur="5s" path="[un certain tracé]" additive="sum" fill="freeze" /> <animateMotion begin="5s" dur="5s" path="[un certain tracé]" additive="sum" fill="freeze" /> <animateMotion begin="10s" dur="5s" path="[un certain tracé]" additive="sum" fill="freeze" /> </img>
L'image se déplace le long du premier tracé, puis entame le second tracé à partir de la fin du premier, puis elle suit le troisième tracé à partir de la fin du second et reste au point final.
Bien que de nombreuses animations d'attributs numériques soient additives, ce n'est pas toujours le cas. Comme exemple d'animation qui est définie non-additive, considérez une animation d'extension hypothétique « poursuiteSouris » qui entraîne un objet à suivre la trajectoire de la souris.
<img ...> <animateMotion dur="10s" repeatDur="indefinite" path="[un joli tracé]" /> <poursuiteSouris begin="mouseover" dur="5s" additive="replace" fill="remove" /> </img>
L'animation de poursuite de la souris s'exécute pendant 5 secondes chaque fois
que l'utilisateur pointe la souris sur l'image. Elle ne peut pas être additive,
ou elle compensera juste le chemin de mouvement de façon étrange.
poursuiteSouris a besoin d'ignorer
animateMotion
alors qu'il est actif. Quand poursuiteSouris se termine, son effet n'est plus
appliqué et animateMotion
contrôle à nouveau la valeur de présentation pour la position.
En outre, quelques attributs numériques (e.g. un attribut pour un numéro de téléphone) peuvent ne pas gérer correctement l'addition. Spécifier quels attributs supportent une animation additive est laissé au langage hôte. Les types d'attribut pour lesquels l'addition n'est pas définie, tels que les chaînes et les booléens, ne peuvent pas gérer l'animation additive.
L'attribut accumulate ne devrait pas être confondu avec l'attribut additive. L'attribut additive définit comment une animation est combinée avec d'autres animations et la valeur de base de l'attribut. L'attribut accumulate définit seulement comment la fonction d'animation simple interagit avec elle-même, au cours des itérations de répétition.
Typiquement, les auteurs s'attendent à ce que les animations cumulatives soient additives (comme dans l'exemple décrit pour accumulate ci-dessous), mais ce n'est pas obligatoire. L'exemple suivant est cumulatif mais n'est pas additif.
<img ...> <animate dur="10s" repeatDur="indefinite" attributeName="top" from="20" by="10" additive="replace" accumulate="sum" /> </img>
L'animation surclasse n'importe quelle valeur originale qui a été fixée pour "top", et commence à la valeur 20. Elle se déplace vers le bas de 10 à 30 pixels, puis recommence. Elle est cumulative, donc la seconde itération commence à 50 (la valeur 30 de la précédente itération plus la valeur de from, 20) et se déplace à nouveau vers le bas de 10 à 60, et ainsi de suite.
Quand une animation cumulative est aussi définie additive, les deux
caractéristiques fonctionnent normalement. L'effet accumulé pour
F(t,u) est utilisé comme la valeur de l'animation
et est ajouté à la valeur sous-jacente de l'attribut cible. Par exemple :
<img top="10" ... > <animate dur="10s" repeatdur="indefinite" attributename="top" from="20" by="10" additive="sum" accumulate="sum" /> </img>
L'animation s'ajoute à la valeur d'origine 10 qui a été fixée pour "top", et commence à la valeur 30. Elle se déplace vers le bas de 10 à 40 pixels, puis recommence. Elle est cumulative, donc la seconde itération commence à 60 (la valeur 40 de la précédente itération plus 20) et se déplace à nouveau vers le bas de 10 à 70, et ainsi de suite.
Se référer également à la section « Le modèle en sandwich d'une animation ».
Les éléments d'une animation suivent la définition de l'attribut restart du module de temporisation de SMIL. Cette section est descriptive.
Quand une animation redémarre, la sémantique la définissant est que celle-ci se
comporte comme si c'était la première fois que l'animation commençait,
indépendamment de tout comportement précédent. La fonction d'effet
d'animation F(t,u) est définie indépendamment
du comportement de l'attribut restart.
L'effet d'une animation lancée antérieurement n'est plus appliqué et seule l'effet de l'animation en cours
F(t,u) est appliqué.
Si une animation additive est relancée alors qu'elle est active ou gelée,
alors l'effet précédent de l'animation (i.e., avant la relance) n'est
plus appliqué à l'attribut. Notez en particulier qu'une animation cumulative
est définie seulement pendant la durée active d'une animation. Quand une
animation est relancée, tout le contexte accumulé est écarté,
et l'effet de l'animation F(t,u) débute en s'accumulant
à nouveau à partir de la première itération de la durée
active relancée.
Beaucoup d'animations spécifient la fonction d'animation simple
f(t) comme une séquence de valeurs à appliquer
dans le temps. Pour certains types d'attributs (e.g., les nombres), il est également
possible de décrire une fonction d'interpolation entre les valeurs.
Comme formule simple pour décrire les valeurs, les éléments d'animation peuvent spécifier une valeur from et une valeur to. Si l'attribut prend des valeurs qui gèrent l'interpolation (e.g., un nombre), la fonction d'animation simple peut interpoler des valeurs dans l'intervalle défini par from et to, pendant la durée simple. Une variante utilise une valeur by à la place de la valeur to, pour indiquer un changement additif de l'attribut.
Des formules plus complexes spécifient une liste de valeurs, ou même une description d'un tracé pour un mouvement. Les auteurs peuvent également contrôler la temporisation des valeurs, pour décrire des animations à partir « d'images clés », et même des fonctions plus complexes.
Dans tous les cas, la fonction d'effet d'animation, F(t,u),
doit produire des valeurs légales pour l'attribut cible. Trois classes de valeurs
sont décrites :
L'élément animate peut interpoler des valeurs scalaires sans unité, et les deux éléments animate et set peuvent manipuler des valeurs de chaîne sans aucune connaissance sémantique de l'élément ou de l'attribut cible. Les éléments animate et set doivent gérer les valeurs scalaires sans unité et les valeurs de chaîne. Le langage hôte doit définir quelles valeurs abstraites supplémentaires du langage devraient être gérées par ces éléments. Notez que l'élément animateColor gère implicitement les valeurs abstraites des valeurs de couleur et que l'élément animateMotion gère implicitement les valeurs de position et de tracé.
Afin de gérer une interpolation sur les attributs qui définissent des valeurs numériques avec plusieurs sortes d'unités ou de qualificatifs (e.g., "10px", "2.3feet", "$2.99"), une gestion supplémentaire est nécessaire pour analyser et interpoler ces valeurs. Une possibilité est d'exiger que l'environnement de développement de l'animation ait une connaissance intégrée des types de valeur des unités qualifiées. Cependant, ceci viole le principe d'encapsulation et n'évolue pas au-delà de CSS vers les langages XML qui définissent des nouveaux types de valeur d'attribut de cette forme.
L'approche recommandée pour l'implémentation de l'animation dans un environnement hôte donné est de gérer deux interfaces qui font abstraction de la gestion des valeurs abstraites du langage. Ces interfaces ne sont pas spécifiées formellement, mais sont simplement décrites comme suit :
La gestion de ces deux interfaces assure que le moteur d'une animation n'a pas besoin de reproduire l'analyseur et toute autre logique sémantique supplémentaire associée aux valeurs abstraites du langage.
Ceci n'est pas une tentative pour spécifier comment une implémentation fournit cette gestion, mais plutôt une condition pour la façon dont les valeurs sont interprétées. Les comportements d'une animation ne devraient pas avoir à comprendre ni être capable de conversion entre toutes les unités de longueur CSS, par exemple. En outre, ce mécanisme permet l'application d'animation aux nouveaux langages XML, si l'implémentation d'un langage peut fournir un support d'analyse et de conversion pour les valeurs d'attribut.
Malgré les recommandations ci-dessus, il est parfois utile d'interpoler les valeurs dans un espace d'unité spécifique et d'appliquer le résultat en utilisant les unités spécifiées plutôt que les unités canoniques. Ceci est spécialement vrai pour certaines unités relatives telles que celles définies par CSS (e.g., les unités em). Si une animation spécifie toutes les valeurs dans les mêmes unités, une implémentation peut utiliser une connaissance de la syntaxe associée pour interpoler dans l'espace d'unité et appliquer le résultat dans le sandwich d'animation, en termes d'unités spécifiées plutôt que d'unités canoniques. Comme noté ci-dessus, cette solution ne s'adapte pas bien au cas général. Néanmoins, dans certaines applications (telles que les propriétés CSS), il peut être souhaitable d'adopter cette approche.
Si la durée simple d'une animation est indéfinie (e.g., si la valeur
dur
n'est pas spécifiée), l'interpolation n'est généralement pas
significative. Quand il est possible de définir une fonction d'animation qui n'est
pas basée sur une durée simple définie (e.g., certains algorithmes
générateurs de nombres aléatoires), la plupart des animations
définissent la fonction selon la durée simple. Si une fonction d'animation
est définie sur la durée simple et que la durée simple
est indéfinie, la première valeur de la fonction d'animation (i.e.,
f(0)) devrait être utilisée (en fait comme une constante) pour la fonction d'animation.
Le module BasicAnimation de SMIL 2.0 fournit :
Le module BasicAnimation définit les attributs et éléments en suivant le modèle présenté dans la section « Le modèle d'animation ».
Les éléments du module BasicAnimation ont en commun les attributs utilisés pour identifier l'attribut cible et, moins universellement, les attributs par lesquels les fonctions d'animation sont spécifiées.
La cible de l'animation est définie comme un attribut spécifique d'un élément particulier. Les moyens pour spécifier l'attribut cible et l'élément cible sont détaillés dans cette section.
L'attribut cible à animer est spécifié avec attributeName. La valeur de cet attribut est une chaîne qui spécifie le nom de l'attribut cible, comme défini dans le langage hôte.
Les attributs d'un élément qui peuvent être animés sont souvent définis par différents langages et/ou dans différents espaces de nommage. Par exemple, dans beaucoup d'applications XML, la position d'un élément (qui est un attribut cible typique) est définie comme une propriété CSS plutôt que comme attributs XML. Dans certains cas, le même nom d'attribut est associé aux attributs ou aux propriétés dans plus d'un langage, ou espace de nommage. Pour permettre à l'auteur de lever l'ambiguïté sur la correspondance du nom, un attribut supplémentaire attributeType est fourni pour spécifier l'espace de nommage voulu.
L'attribut attributeType est facultatif. Par défaut, l'environnement d'exécution de l'animation résoudra les noms selon les règles suivantes : s'il y a un conflit de noms et que attributeType n'est pas spécifié, la liste des propriétés CSS gérées par le langage hôte est examinée (si CSS est géré par le langage hôte) ; si aucune correspondance CSS n'est établie (ou que CSS ne s'applique pas), l'espace de nommage par défaut pour l'élément cible sera mis en correspondance.
Si un attribut cible est défini dans un espace de nommage XML autre que celui par défaut pour l'élément cible, l'auteur doit spécifier l'espace de nommage de l'attribut cible en utilisant le préfixe de l'espace de nommage associé, comme défini dans la portée de l'élément d'animation. Le préfixe est ajouté au début de la valeur de l'attribut attributeName.
Pour plus d'informations sur les espaces de nommage XML, voir [XML-NS].
Un élément d'animation peut définir l'élément cible d'une animation soit explicitement, soit implicitement. Une définition explicite utilise un attribut pour spécifier l'élément cible. La syntaxe requise est décrite ci-dessous.
Si aucune cible explicite n'est donnée, l'élément cible implicite est l'élément parent de l'élément d'animation dans l'arbre du document. Il est prévu que le cas commun sera qu'un élément d'animation est déclaré comme enfant de l'élément à animer. Dans ce cas, aucune cible explicite n'a besoin d'être donnée.
Si une référence explicite à l'élément cible ne peut pas être résolue (e.g., si un tel élément ne peut être trouvé), l'animation n'a aucun effet. De plus, si l'élément cible (implicite ou explicite) ne gère pas l'attribut cible spécifié, l'animation n'a aucun effet. Voir également la section « La gestion des erreurs de syntaxe ».
Les deux attributs suivants peuvent être employés pour identifier explicitement l'élément cible :
Quand on intègre des éléments d'animation dans le langage hôte, le concepteur du langage devrait éviter d'inclure ces deux attributs. Si cependant, le concepteur du langage hôte choisit d'inclure ces deux attributs dans le langage hôte, alors, quand les deux sont spécifiés pour un élément d'animation donné, l'attribut XLink href a la priorité sur l'attribut targetElement.
L'avantage d'utiliser l'attribut targetElement est la syntaxe simplifiée de la valeur de l'attribut comparé à l'attribut href. L'avantage d'utiliser l'attribut XLink href est qu'il évoluera vers un mécanisme de liens complet dans les futures versions de l'animation de SMIL, et que l'élément d'animation peut être traité par des processeurs XLink génériques. La forme XLink est aussi donnée pour les langages hôtes qui sont conçus pour utiliser XLink pour toutes les références de ce genre. Les deux exemples suivants illustrent ces deux approches.
Cet exemple utilise la syntaxe simplifiée de targetElement:
<animate targetElement="foo" attributeName="bar" .../>
Cet exemple utilise la syntaxe plus souple du localisateur XLink, pour une cible équivalente:
<foo xmlns:xlink="http://www.w3.org/1999/xlink"> ... <animate xlink:href="#foo" attributeName="bar" .../> ... </foo>
Quand on utilise un attribut XLink href sur un élément d'animation, les attributs XLink supplémentaires suivants doivent être définis dans le langage hôte. Ils peuvent être définis dans un DTD, ou le langage hôte peut les exiger dans la syntaxe du document pour gérer les processeurs XLink génériques. Pour plus d'information, se référer à [XLINK].
Les attributs XLink suivants sont requis par la spécification XLink. Les valeurs sont fixées, et ainsi peuvent être spécifiées comme dans un DTD. Tous les autres attributs XLink sont facultatifs et n'affectent pas la sémantique de l'animation de SMIL.
Des détails supplémentaires sur la spécification de l'élément cible rapportés au document et au langage hôte sont décrits dans « Les définitions et conditions requises pour les cibles d'animation ».
Chaque fonction d'animation définit la valeur de l'attribut à un temps particulier. L'intervalle de temps pour lequel la fonction d'animation est définie est la durée simple. La fonction d'animation ne produit pas des résultats définis pour des temps en dehors de l'intervalle qui va de 0 à la durée simple.
Une animation est décrite soit comme une liste de l'attribut values, soit dans une forme simplifiée qui décrit les valeurs from, to et by. La forme from/to/by est définie dans « Les fonctions d'animation simples définies par from, to et by ».
Si aucune valeur n'est légale, l'animation n'aura aucun effet (voir aussi « La gestion des erreurs de syntaxe »).
L'animation appliquera les valeurs dans l'ordre pendant le déroulement de l'animation. Pour des animations discrete et linear, les valeurs dans l'attribut values sont régulièrement espacées pendant la durée de l'animation. Pour des animations paced, les valeurs sont espacées afin qu'un taux uniforme de changement soit obtenu.
L'exemple suivant qui utilise la syntaxe de l'attribut values anime la largeur d'une forme SVG pendant 10 secondes, en interpolant d'une largeur de 40 à une largeur de 100 et revenant à 40.
<rect ...> <animate attributeName="width" values="40;100;40" dur="10s"/> </rect>
La fonction d'animation simple pour cet exemple (avec un temps en secondes) est
f(t) = 40 + 60*t/5, 0 <= t < 5,et
f(t) = 100 - 60*(t-5)/5, 5 <= t <= 10.
La fonction d'animation simple définie par les attributs values et calcMode peut être spécifiée formellement :
Normatif errata-E22
Soit i = floor((t*n)/d),
d la durée simple de l'élément d'animation,
n le nombre d'entrées dans l'attribut values
et value[i] la ième entrée (en partant de 0) :
n périodes
de temps égale, une par valeur. La fonction d'animation prend les valeurs dans
l'ordre, une valeur pour chaque période de temps :
f(t) = value[i]
n-1
périodes égales et la fonction d'animation est une interpolation
linéaire entre les valeurs aux temps associés :
f(t) = value[i] + (value[i+1]-value[i]) * (t-ti)/d.
dist(v1,v2), la distance totale
balayée D(i) jusqu'à
value[i] incluse est
D(0) = 0, et
D(i) = dist(value[0],value[1]) + dist(value[1],value[2]) +...+ dist(value[i-1],value[i]), pour les entiersiavec0<i<=n.
La fonction d'animation prend les valeurs dans l'attribut values aux temps déterminés par ces distances :
T(i) = (D(i)/D(n)) * d,
pour les entiers i avec 0<=i<=n.
f(t) = value[i] + (value[i+1]-value[i]) * (t-T(i))/d,
où i est le plus grand
entier non-négatif tel que T(i)<=t.
Notez qu'une animation linear ou paced tournera en boucle régulière si la première valeur est répétée en dernière valeur.
Les trois figures 5a, 5b et 5c ci-dessous montre comment la même animation de base changera une valeur dans le temps, selon des modes d'interpolation différents. Tous les exemples sont basés sur l'exemple suivant, mais avec des valeurs différentes pour l'attribut calcMode :
<animate dur="30s" values="0; 6; 5; 11; 10; 16" calcMode="[comme spécfié]" />
Figure 5 - Animation discrete, linear et paced
 |
Figure 5a : Animation discrete par défaut. |
 |
Figure 5b : Animation linear par défaut |
 |
Figure 5c : Animation paced par défaut |
L'exemple suivant décrit une animation discrete simple :
<animate attributeName="foo" dur="8s"
values="bar; fun; far; boo" />
La valeur de l'attribut "foo" sera positionnée à chacune des quatre chaînes pendant 2 secondes chacune. Parce que les valeurs de chaîne ne peuvent pas être interpolées, seule une animation discrete est possible ; tout attribut calcMode sera ignoré.
L'exemple suivant décrit une animation linear simple :
<animate attributeName="x" dur="10s" values="0; 10; 100"
calcMode="linear"/>
La valeur de "x" changera de 0 à 10 dans les 5 premières secondes, et puis de 10 à 100 dans les 5 secondes suivantes. Notez que les valeurs de l'attribut values sont espacées de façon homogène dans le temps ; dans ce cas, le résultat est un changement réel plus important dans la valeur pendant la seconde moitié de l'animation. Remarquez le contraste avec le même exemple modifié pour utiliser une interpolation "paced" :
<animate attributeName="x" dur="10s" values="0; 10; 100"
calcMode="paced"/>
Pour produire un rythme régulier dans les changements de l'attribut "x", le second segment défini par la liste de l'attribut values obtient la majeure partie de la durée simple : La valeur de "x" changera de 0 à 10 dans la première seconde, et puis de 10 à 100 dans les 9 secondes suivantes. Alors que cet exemple pourrait facilement être réalisé comme une animation from-to sans interpolation paced, de nombreux exemples (tels que les tracés de mouvement) restent beaucoup plus difficiles à construire sans la valeur paced pour calcMode.
Comme décrit dans « La fonction d'effet d'animation F(t,u) », la fonction d'animation simple peut être :
La fonction d'effet d'animation F(t,u) définit la sémantique de ces attributs, et donne des exemples. Cette section donne seulement la syntaxe.
Voir le module BasicInlineTiming pour les définitions des attributs repeatCount, repeatDur et fill.
Le comportement additif et cumulatif des animations à répétition est contrôlé avec les attributs additive et accumulate, respectivement :
f(t).
Une animation est décrite soit comme une liste de l'attribut values, décrit précédemment, soit dans une forme simplifiée qui utilise les valeurs from, to et by.
La syntaxe plus simple from/to/by prévoit plusieurs variantes. Pour utiliser une de ces variantes, on spécifie soit by soit to ; une valeur from est facultative. Il n'est pas légal de spécifier les deux attributs by et to en même temps ; si les deux sont spécifiés, seul l'attribut to sera pris en compte (by sera ignoré). Les combinaisons des attributs produisent les classes d'animation suivantes.
from et une valeur to
définit une animation simple. La fonction d'animation est définie
pour commencer à la valeur from et pour terminer à la valeur
to.from à
vf et une valeur to à vt
est équivalente à la même animation avec une liste de l'attribut
values de 2 valeurs, vf et
vt.
from et une valeur by
définit une animation simple dans laquelle la fonction d'animation est
définie pour commencer à la valeur from et pour changer pendant
la durée simple selon une variation spécifiée par l'attribut
by.
Ceci peut seulement être utilisé avec des attributs qui gèrent
l'addition (e.g., la plupart des attributs numériques).from à
vf et une valeur by à vb
est équivalente à la même animation avec une liste de l'attribut
values de 2 valeurs, vf et
(vf+vb).
by définit une animation
simple dans laquelle la fonction d'animation est définie pour commencer par
la valeur sous-jacente pour l'attribut, en utilisant une variation qui évolue au cours de la
durée simple, en commençant par une variation de 0 et
en terminant avec la variation spécifiée
par l'attribut by. Ceci peut seulement être
utilisé avec des attributs qui gèrent les animations additives.by à vb
est équivalente à la même animation avec une liste de l'attribut
values de 2 valeurs, 0 et
vb, et additive="sum". Toute autre
spécification de l'attribut additive dans une animation by
est ignorée.
to.
En utilisant cette forme, un auteur peut décrire une animation qui commencera
avec n'importe quelle valeur courante pour l'attribut, et qui terminera à la
valeur to désirée.Exemples
L'exemple "animation from-to" suivant anime la largeur d'une forme SVG durant 10 secondes de 50 à 100.
<rect ...> <animate attributeName="width" from="50" to="100" dur="10s"/> </rect>
L'exemple "animation from-by" suivant anime la largeur d'une forme SVG durant 10 secondes de 50 à 75.
<rect ...> <animate attributeName="width" from="50" by="25" dur="10s"/> </rect>
L'exemple "animation by" suivant anime la largeur d'une forme SVG durant 10 secondes de la largeur d'origine qui est 40 à 70.
<rect width="40"...> <animate attributeName="width" by="30" dur="10s"/> </rect>
Les animations from-to et from-by gèrent également les animations cumulatives, comme dans l'exemple suivant :
<rect width="20px"...>
<animate attributeName="width" dur="5s" from="10px" to="20px"
accumulate="sum" repeatCount="10" />
</rect>
Le rectangle grossira de 10 à 20 pixels dans les 5 premières secondes, et ensuite de 20 à 30 dans les 5 secondes suivantes, et ainsi de suite jusqu'à 110 pixels après 10 répétitions. Notez que puisque la valeur par défaut est replace pour additive, la valeur d'origine est ignorée. L'exemple suivant crée explicitement une animation additive :
<rect width="20px"...>
<animate attributeName="width" dur="5s" from="10px" to="20px"
accumulate="sum" additive="sum" repeatCount="10" />
</rect>
Les résultats sont les même que précédemme