Introduction à SVG 2d de HTML5: 11-User Interaction (Animation) Introduction et application

SVG a une bonne interactivité des utilisateurs, comme:

1. SVG peut répondre à la plupart des événements DOM2.

2. SVG peut bien capturer le mouvement de la souris de l'utilisateur à travers le curseur.

3. Les utilisateurs peuvent facilement atteindre la mise à l'échelle et d'autres effets en définissant la valeur de la propriété ZoomandPan de l'élément SVG.

4. Les utilisateurs peuvent facilement combiner des animations et des événements pour terminer certains effets complexes.

En attachant des événements aux éléments SVG, nous pouvons facilement effectuer certaines tâches interactives à l'aide du langage de script. SVG prend en charge la plupart des événements DOM2, tels que Onfocusin, OnFocusou, Onclick, Onmoudown, OnMouseup, OnMouseMove, OnMouseout, Onload, OnResize, Onscroll et d'autres événements. En plus de ceux-ci, SVG propose également des événements liés à l'animation uniques, tels que: Onroom, Onbegin, Onend, OneRepeat, etc.

Tout le monde connaît l'incident, donc je n'en parlerai pas.

SVG utilise du texte pour définir les graphiques, et cette structure de document est très adaptée à la création d'animations. Pour modifier la position, la taille et la couleur de la figure, il vous suffit d'ajuster les propriétés correspondantes. En fait, SVG possède des propriétés spécialement conçues pour divers traitements d'événements, et beaucoup d'entre eux sont même fabriqués sur mesure pour les animations. Dans SVG, il existe plusieurs façons de mettre en œuvre l'animation:

1. Utilisez les éléments d'animation de SVG. Cela sera mis en évidence ci-dessous.

2. Utilisez le script. L'utilisation des opérations DOM pour démarrer et contrôler les animations est déjà une technologie mature, et il y a un petit exemple ci-dessous.

3. Smil (langage d'intégration multimédia synchronisé). Si vous êtes intéressé, veuillez vous référer à: http://www.w3.org/tr/2008/rec-smil3-20081201/.

<svgViewbox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg" version = "1.1">

<SESC> Éléments d'animation de base </SESC>

<rect x = "1" y = "1"

fill = "non" tronçon = "blue" tram-width = "2" />

<! - Animation de la position et de la taille du rectangle ->

<rect id = "rectElement" x = "300" y = "100"

fill = "rgb (255,255,0)">

<animer attributeName = "x" attributeType = "xml"

Begin = "0s" dur = "9s" fill = "Freeze" de = "300" à = "0" />

<animer attributeName = "y" attributeType = "xml"

Begin = "0s" dur = "9s" fill = "Freeze" de = "100" à = "0" />

<animer attributeName = "width" attributeType = "xml"

Begin = "0s" dur = "9s" fill = "Freeze" de = "300" à = "800" />

<animer attributeName = "height" attributeType = "xml"

begin = "0s" dur = "9s" fill = "Freeze" de = "100" à = "300" />

</cct>

<! - Créez un nouvel espace de coordonnées utilisateur, donc le texte commence par un nouveau (0,0), et les transformations ultérieures sont destinées au nouveau système de coordonnées ->>

<g transform = "tradlater (100,100)">

<! - Les utilisations suivantes des utilisations pour animer la visibilité, puis utilisent AnimateMotion,

Animer et AnimateTransform Effectuez d'autres types d'animations ->

<text id = "textelement" x = "0" y = "0"

font-family = "Verdana" font-size = "35.27" visibilité = "Hidden">

C'est vivant!

<set attributeName = "visibilité" attributeType = "css" à = "visible"

begin = "3s" dur = "6s" fill = "gelez" />

<AnimateMotion Path = "M 0 0 L 100 100"

begin = "3s" dur = "6s" fill = "gelez" />

<animer attributeName = "fill" attributeType = "CSS"

de = "RGB (0,0,255)" à = "RGB (128,0,0)"

begin = "3s" dur = "6s" fill = "gelez" />

<animateTransform attributeName = "transform" attributeType = "xml"

type = "rotate" de = "- 30" à = "0"

begin = "3s" dur = "6s" fill = "gelez" />

<animateTransform attributeName = "transform" attributeType = "xml"

type = "échelle" de = "1" à = "3" supplémentaire = "sum"

begin = "3s" dur = "6s" fill = "gelez" />

</Text>

</g>

</svg>

Mettez ce code dans le corps du document HTML et exécutez-le pour connaître l'effet de l'animation.

XLINK: HREF

Cela devrait être très familier, pointant les éléments qui exécutent l'animation. Cet élément doit être défini dans le fragment de document SVG actuel. Si cet attribut n'est pas spécifié, l'animation sera appliquée à son élément parent.

attributeName = <attributeName>

Cette propriété spécifie les propriétés pour appliquer l'animation. Si cette propriété a un espace de noms (n'oubliez pas, SVG est essentiellement un document XML), cet espace de noms doit également être ajouté. Par exemple, dans l'exemple suivant, XLink reçoit un alias différent. Ici, lorsque Animate spécifie l'attribut, l'espace de noms est inclus:

<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<Title> Démonstration de la résolution des espaces de noms pour l'animation </Title>

<g xmlns: a = "http://www.w3.org/1999/xlink">

<animate attributeName = "a: href" xlink: href = "# foo" dur = "2s" to = "two.png" fill = "Freeze" />

</g>

<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">

<image xml: id = "foo" b: href = "one.png" x = "35" y = "50" />

</g>

</svg>

AttributeType = CSS | XML | Auto (valeur par défaut)

Cette propriété spécifie l'espace de noms où les valeurs de propriété sont prises. La signification de ces valeurs est la suivante:

CSS: L'attribut spécifié au nom d'AttributeName est l'attribut CSS.

XML: L'attribut spécifié par AttributeName est l'attribut sous l'espace de noms par défaut de XML (notez que le document SVG est essentiellement un document XML).

Auto: il signifie d'abord rechercher l'attribut spécifié par attributeName dans l'attribut CSS. S'il n'est pas trouvé, il recherchera l'attribut sous l'espace de noms XML par défaut.

Les propriétés suivantes sont des attributs de temps d'animation; Ils contrôlent la chronologie de l'exécution de l'animation, y compris comment démarrer et mettre fin à l'animation, si l'animation est exécutée à plusieurs reprises, si l'animation se termine, etc.

Begin = Bénéfice-valeur-liste

Cette propriété définit l'heure de début de l'animation. Il peut s'agir d'une série de valeurs de temps séparées par des demi-colons. Il peut également s'agir d'une autre valeur qui déclenche le début de l'animation. Par exemple, les événements, les clés de raccourci, etc.

Dur = Valeur d'horloge | Média | indéfini

Définit la durée de l'animation. Peut être défini sur une valeur affichée au format d'horloge. Il peut également être défini sur les deux valeurs suivantes:

Médias: Spécifie que le temps de l'animation est la durée de l'élément multimédia interne.

Indéfini: spécifiez le temps d'animation pour être infini.

Le format d'horloge fait référence aux formats de valeur juridique suivants:

: 30: 03 = 2 heures, 30 minutes et 3 secondes

: 00: 10,25 = 50 heures, 10 secondes et 250 millions de secondes

: 33 = 2 minutes et 33 secondes

: 10,5 = 10,5 secondes = 10 secondes et 500 millions de secondes

.2h = 3,2 heures = 3 heures et 12 minutes

min = 45 minutes

S = 30 secondes

MS = 5 millions de secondes

.467 = 12 secondes et 467 millions de secondes

.5s = 500 millions de secondes

: 00.005 = 5 millions de secondes

fin = liste de valeur finale

Définit l'heure de fin de l'animation. Peut être une série de valeurs séparées par des demi-colons.

min = Valeur d'horloge | médias

Max = Valeur d'horloge | médias

Définit la valeur maximale et minimale de la durée d'animation.

redémarrer = toujours | WHONTACTIVE | jamais

Configurez l'animation pour recommencer à tout moment. Signifie toujours que l'animation peut commencer à tout moment. Whenotactive signifie que vous ne pouvez recommencer que lorsqu'il n'y a pas de lecture, comme la lecture précédente se termine. Ne signifie plus jamais que l'animation ne peut plus être recommencée.

RepeatCount = valeur numérique | indéfini

Définissez le nombre de fois où l'animation est répétée. Indéfinie représente une répétition infinie.

RepeatDur = Clock-Value | indéfini

Définit le temps d'animation total des répétitions. Indéfinie représente une répétition infinie.

rempli = gel | supprimer (par défaut)

Définit l'état de l'élément une fois l'animation terminée. Freeze signifie que l'élément reste dans le dernier état de l'animation une fois l'animation terminée. Supprimer signifie que l'élément revient à l'état avant l'animation après la fin de l'animation, qui est la valeur par défaut.

Catégorie 3: Définissez les attributs des valeurs d'animation

Ces propriétés définissent la valeur des propriétés exécutées. En fait, certains algorithmes qui définissent les images clés et l'interpolation.

calcMode = discret | linéaire (par défaut) | rythmé | spline

Définissez la méthode d'interpolation de l'animation: discrète: discrète, pas d'interpolation; linéaire: interpolation linéaire; rythme: interpolation de taille de pas; Spline: interpolation spline. La valeur par défaut est linéaire (interpolation linéaire), mais si l'attribut ne prend pas en charge l'interpolation linéaire, une interpolation discrète sera utilisée.

VALEURS = <Sist>

Définit une liste de valeurs pour les images clés d'animation séparées par des demi-colons. Soutenir la valeur vectorielle.

keyTimes = <s list>

Définit une liste temporelle des images clés de l'animation séparées par des demi-colons. Cela correspond aux valeurs une par une. Cette valeur est affectée par l'algorithme d'interpolation. S'il s'agit d'interpolation linéaire et spline, la première valeur des temps clés doit être 0 et la dernière valeur doit être 1. Pour la non-interpolation discrète, la première valeur des temps clés doit être 0. Pour l'interpolation de la taille des pas, il est évident que les temps clés ne sont pas nécessaires. Et si la durée de l'animation est définie sur indéfini, les clés sont ignorés.

keysplines = <s list>

Cette propriété définit le point de contrôle lorsque l'interpolation de la spline (interpolation de Betzel), et ne fonctionne évidemment que si le mode d'interpolation est sélectionné comme spline. Les valeurs de cette liste varient de 0 à 1.

de = <value>

à = <value>

par = <value>

Définit les valeurs de début, de fin et de pas de l'attribut d'animation. Remarque ici: si les valeurs ont déjà formulé les valeurs pertinentes, tout From / à / par valeur sera ignoré.

Parfois, il est très utile de définir la valeur pertinente au lieu de la valeur absolue, mais la valeur incrémentielle, en utilisant la propriété additive, peut atteindre cet objectif.

additif = remplacer (valeur par défaut) | somme

Cette propriété contrôle si l'animation est incrémentielle. SUM signifie que l'animation aura une valeur d'attribut liée plus grande ou d'autres animations à faible priorité. Le remplacement est la valeur par défaut, indiquant que l'animation écrasera la valeur d'attribut pertinente ou d'autres animations de faible priorité. Voir un petit exemple:

<rect ...>

<animer attributeName = "width" de = "0px" à = "10px" dur = "10s"

additive = "sum" />

</cct>

Cet exemple démontre l'effet d'animation de la largeur des rectangles incrémente.

Parfois, il est également très utile si les résultats de l'animation répétés sont superposés, et l'utilisation de la propriété accumulée peut atteindre cet objectif.

accumuler = aucun (par défaut) | somme

Cette propriété contrôle si l'effet d'animation est cumulatif. Aucune est la valeur par défaut, indiquant que les animations en double ne s'accumulent pas. La somme signifie que les effets d'animation répétés sont accumulés. Pour une animation unique, cette propriété n'a aucun sens. Voir un petit exemple:

<rect ...>

<animer attributeName = "width" de = "0px" à = "10px" dur = "10s"

additionnel = "sum" accumulation = "sum" repeatCount = "5" />

</cct>

Cet exemple démontre que la longueur du rectangle augmente dans chaque itération.

SVG fournit les éléments d'animation suivants:

Il s'agit de l'élément d'animation le plus basique, qui peut directement fournir les valeurs de différents points temporels pour les attributs connexes.

Il s'agit de l'abréviation de l'élément animé et prend en charge tous les types d'attributs, en particulier lorsque les attributs animés (tels que la visibilité). L'élément défini est non incriment et les attributs pertinents ne sont pas valides. Le type de valeur d'extrémité d'animation spécifié doit être conforme au type de valeur de l'attribut.

Éléments d'animation de Lu Jin. La plupart des propriétés de cet élément sont les mêmes que ci-dessus, avec seulement les différences légèrement différentes suivantes:

calcMode = discret | linéaire | rythmé | spline

La valeur par défaut de cette propriété est différente et la valeur par défaut de cet élément est rythmée.

chemin = <path-data>

Le chemin du mouvement de l'élément d'animation est le même que le format de la valeur de l'attribut D de l'élément de chemin.

points clés = <list-of-numbers>

La valeur de cette propriété est une série de valeurs de points flottants donnés par les demi-colons, et la plage de valeur de chaque valeur est de 0 ~ 1. Ces valeurs représentent la distance à laquelle le point de temps correspondant est déplacé spécifié par l'attribut de clé. La distance spécifique ici est déterminée par le navigateur lui-même.

rotation = <nombre> | Auto | réversion automatique

Cette propriété spécifie l'angle auquel l'élément tourne lorsqu'il se déplace. La valeur par défaut est 0, le nombre représente l'angle de rotation et Auto représente le corps animal tournant dans le sens de la force routière. Auto-Reverse indique la direction dans laquelle la direction est opposée à la direction du mouvement.

De plus, les valeurs de l'élément AnimateMotion de, par, aux valeurs sont composées de paires de coordonnées; La valeur x et la valeur y sont séparées par des virgules ou des espaces, et chaque paire de coordonnées est séparée par un point-virgule, comme de = 33, 15, ce qui signifie que la coordonnée du point de départ X est 33 et la coordonnée Y est 15.

Il existe deux façons de spécifier un chemin de mouvement: l'un consiste à attribuer directement une valeur à l'attribut de chemin, et l'autre est de spécifier un chemin pour utiliser l'élément MPATH comme élément enfant d'AnimateMotionde. Si vous utilisez les deux méthodes, l'élément MPATH a une priorité élevée. Les deux méthodes ont une priorité plus élevée que les valeurs, de, par, à.

Voir un petit exemple:

<? xml version = "1.0" standalone = "no"?>

<! Doctype svg public "- // w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svgViewbox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg" version = "1.1"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<rect x = "1" y = "1"

fill = "non" tronçon = "blue" tram-width = "2" />

<path id = "path1" d = "m100,250 c 100,50 400,50 400,250"

fill = "non" tronçon = "blue" tram-width = "7.06" />

<cercle cx = "100" cy = "250" r = "17.64" fill = "blue" />

<cercle cx = "250" cy = "100" r = "17,64" fill = "blue" />

<cercle cx = "400" cy = "250" r = "17,64" fill = "blue" />

<chemin D = "M-25, -12,5 L25, -12,5 L 0, -87,5 Z"

rempli = "jaune" trait = "rouge" trait-width = "7.06">

<animateMotion dur = "6s" répéterCount = "indéfini" rotate = "auto">

<mpath xLink: href = "# path1" />

</ animateMotion>

</ path>

</svg>

Éléments d'animation de couleur. Il s'agit d'un élément obsolète, et essentiellement toutes les fonctions peuvent être remplacées par Animate, alors ne l'utilisez pas.

Transformer les éléments d'animation. Jetez un œil à des propriétés spéciales:

type = tradlater | Échelle | tourner | skewx | biologique

Cette propriété spécifie le type de transformation et Translate est la valeur par défaut.

Les valeurs de, par et pour correspondre aux paramètres de la transformation, ce qui est cohérent avec la transformation mentionnée ci-dessus. Les valeurs sont un ensemble de valeurs séparées par semi-colon.

Éléments et propriétés qui prennent en charge les effets d'animation

Fondamentalement, tous les éléments graphiques (chemin, rect, ellipse, texte, image ...) et éléments de conteneur (SVG, g, défenses, utilisation, commutation, clippathe, masque ...) prennent en charge l'animation. Fondamentalement, la plupart des propriétés prennent en charge les effets d'animation. Pour des instructions détaillées, veuillez vous référer à la documentation officielle.

L'animation SVG peut également être terminée à l'aide de scripts. Le contenu détaillé de DOM sera introduit plus tard. Voici un bref exemple:

<? xml version = "1.0" standalone = "no"?>

<! Doctype svg public "- // w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svg Viewbox = "0 0 400 200"

xmlns = "http://www.w3.org/2000/svg"

onload = "startAnimation (evt)" version = "1.1">

<script type = "application / ecmascript"> <! [cdata [

var timeValue = 0;

var timer_increment = 50;

var max_time = 5000;

var text_element;

fonction startAnimation (evt) {

text_element = evt.target.ownerDocument.getElementById ("TexteLlement");

ShowAndGrowElement ();

}

fonction showandgrowelement () {

TimeValue = TimeValue + TIMER_INCRAMENT;

if (timeValue> max_time)

retour;

// Échelle la chaîne de texte progressivement jusqu'à ce qu'elle soit 20 fois plus grande

ScaleFactor = (TimeValue * 20.) / max_time;

text_element.setAttribute ("Transform", "Scale (" + ScaleFactor + ")");

// Rendre la chaîne plus opaque

opacityFactor = timeValue / max_time;

text_element.setAttribute ("Opacity", opacityFactor);

// Appelez à nouveau ShowAndGrowElement <Mimer_inCment> MillionsCondes plus tard.

setTimeout ("showandgrowelement ()", timer_increment)

}

window.showandgrowElement = showandgrowelement

]]> </ script>

<rect x = "1" y = "1"

fill = "non" tronçon = "blue" tram-width = "2" />

<g transform = "tradlater (50,150)" fill = "red" font-size = "7">

<text id = "Textelement"> svg </XET>

</g>

</svg>

Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centre de développement: https://developer.mozilla.org/en/svg

Référence populaire: http://www.chinasvg.com/

Document officiel: http://www.w3.org/tr/svg11/

Technologie d'animation SVG: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx