Introduction au SVG 2D en HTML5 11 : introduction à l'interactivité utilisateur (animation) et compétences du didacticiel application_html5

Interactivité
SVG a une bonne interactivité utilisateur, telle que :
1 SVG peut répondre à la plupart des événements DOM2.
2. SVG peut très bien capturer le mouvement de la souris de l'utilisateur via le curseur.
3. Les utilisateurs peuvent facilement obtenir un zoom et d'autres effets en définissant la valeur de l'attribut zoomAndPan de l'élément svg.
4. Les utilisateurs peuvent facilement combiner des animations avec des événements pour compléter certains effets complexes.
En attachant des événements aux éléments SVG, nous pouvons utiliser un langage de script pour effectuer facilement certaines tâches interactives. SVG prend en charge la plupart des événements DOM2, tels que onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll et d'autres événements. En plus de cela, SVG fournit également des événements uniques liés à l'animation, tels que : onroom, onbegin, onend, onrepeat, etc.
Tout le monde connaît l’incident, je n’entrerai donc pas dans les détails.

Méthode d'animation
SVG utilise du texte pour définir des graphiques Cette structure de document est très adaptée à la création d'animations. Pour modifier la position, la taille et la couleur des graphiques, 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 elles sont même spécialement conçues pour l'animation. En SVG, il existe plusieurs façons d'implémenter l'animation :
1. Utilisez des éléments d'animation SVG. Ceci sera souligné ci-dessous.
2. Utilisez des scripts. L'utilisation d'opérations DOM pour démarrer et contrôler des animations est déjà une technologie mature. Vous trouverez 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/.
L'exemple suivant contient plusieurs des animations les plus basiques en SVG :

Copier le code

Le code est le suivant :

xmlns="http://www.w3 .org /2000/svg" version="1.1">
Éléments d'animation de base
fill="none" Stroke="blue" Stroke-width="2" />
rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)" > x "attributType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
begin="0s" dur="9s" fill="freeze" from="300" à="800" />
start="0s" dur="9s" fill="freeze" from="100" to="300" />


animate et animateTransform sont utilisés pour effectuer d'autres types d'animation-->
font-family="Verdana" font-size="35.27" visibilité="hidden">
Il est vivant !
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur= "6s" fill="freeze" />
de="rgb(0,0,255)" à="rgb(128,0,0 )"
begin="3s" dur="6s" fill="freeze" />
type="rotate" from=" -30" to="0"
begin="3s" dur="6s" fill="freeze" />
type= "scale" de="1" à="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />

Mettez ce code dans le corps du document html et exécutez-le pour voir l'effet de l'animation.

Attributs publics des éléments animés
Catégorie 1 : Spécification des éléments et des attributs cibles
xlink:href
Cela devrait être familier, pointant vers l'élément sur lequel l'animation est effectuée. 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 = ""
Cet attribut spécifie l'attribut auquel l'animation est appliquée. Si l'attribut possède un espace de noms (n'oubliez pas que SVG est essentiellement un document XML), cet espace de noms doit également être ajouté. Par exemple, dans l'exemple suivant, différents alias sont donnés à xlink. Ici, animer utilise un espace de noms lors de la spécification des attributs :

Copier le code Le code est le suivant :

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








attributeType = "CSS | XML | auto (valeur par défaut)"

Cet attribut spécifie l'espace de noms de la valeur de l'attribut. Ceci Les significations de plusieurs valeurs sont les suivantes :
CSS : Représente que l'attribut spécifié parattributName est un attribut CSS.
XML : l'attribut spécifié parattributName est un attribut sous l'espace de noms XML par défaut (notez que les documents SVG sont essentiellement des documents XML).
auto : signifie d'abord rechercher l'attribut spécifié parattributName dans l'attribut CSS. S'il n'est pas trouvé, l'attribut sera recherché dans l'espace de noms XML par défaut.

Catégorie 2 : Attributs qui contrôlent le temps d'animation
Les attributs suivants sont tous des attributs de temps d'animation ; ils contrôlent la chronologie de l'exécution de l'animation, y compris la façon de démarrer et de terminer l'animation, et s'il faut la répéter. l'animation. S'il faut enregistrer l'état final de l'animation, etc. begin = "begin-value-list"
Cet attribut définit l'heure de début de l'animation. Peut être une série de valeurs temporelles séparées par des points-virgules. Il peut également s'agir d'une autre valeur qui déclenche le démarrage de l'animation. Tels que les événements, les touches de raccourci, etc.
dur = Clock-value | "media" | "indefinite"
définit la durée de l'animation. Peut être réglé sur une valeur affichée au format horloge. Il peut également être défini sur les deux valeurs suivantes :
media : Spécifie que le temps d'animation est la durée de l'élément multimédia interne.
indéfini : Spécifiez que la durée de l'animation est infinie.
Le format d'horloge fait référence aux formats de valeur légale suivants :

Copier le codeLe code est le suivant :

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

:00:10,25 = 50 heures, 10 secondes et 250 millisecondes
:33 = 2 minutes et 33 secondes
:10,5 = 10,5 secondes = 10 secondes et 500 millisecondes
.2h= 3,2 heures = 3 heures et 12 minutes
min = 45 minutes
s = 30 secondes
ms = 5 millisecondes
. 467= 12 secondes et 467 millisecondes
.5s = 500 millisecondes
:00.005 = 5 millisecondes


end = "end-value-list"
définit l'heure de fin de l'animation. Peut être une série de valeurs séparées par des points-virgules.
min = Clock-value | "media"
max = Clock-value | "media"
Définit la valeur maximale et minimale de la durée de l'animation.
restart = "always" | "whenNotActive" | "jamais"
Définissez si l'animation peut être redémarrée à tout moment. signifie toujours que l'animation peut démarrer à tout moment. whenNotActive signifie qu'il ne peut être redémarré que lorsqu'il n'est pas en cours de lecture, par exemple lorsque la lecture précédente est terminée. Never signifie que l'animation ne peut pas être redémarrée.
repeatCount = valeur numérique | "indéfini"
Définissez le nombre de fois que l'animation se répète. Indéfini représente une répétition infinie.
repeatDur = Clock-value | "indefinite"
Définissez la durée totale de répétition de l'animation. Indéfini représente une répétition infinie.
fill = "freeze" | "remove(default value)"
Définit l'état de l'élément après la fin de l'animation. Geler signifie que l'élément reste dans l'état final de l'animation après la fin de l'animation. Remove signifie qu'une fois l'animation terminée, l'élément revient à l'état d'avant l'animation. C'est la valeur par défaut.
Catégorie 3 : Attributs qui définissent les valeurs d'animation
Ces attributs définissent les valeurs des attributs animés. En fait, il définit certains algorithmes pour les images clés et l'interpolation.
calcMode = "discrete | linéaire (valeur par défaut) | rythmé | spline"
définit la méthode d'interpolation d'animation : discrète : discrète, pas d'interpolation ; linéaire : interpolation linéaire ; rythmée : interpolation par étapes : interpolation de bande d'échantillon. 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.
values ​​​​= ""
définit une liste de valeurs séparées par des points-virgules pour les images clés d'animation. Valeur vectorielle de support.
keyTimes = ""
Définit une liste de temps d'images clés d'animation séparés par des points-virgules. Cela correspond à des valeurs un à un. Cette valeur est affectée par l'algorithme d'interpolation. S'il s'agit d'une interpolation linéaire et spline, la première valeur de keyTimes doit être 0 et la dernière valeur doit être 1. Pour les méthodes discrètes de non-interpolation, la première valeur de keyTimes doit être 0. Pour la méthode d'interpolation par étapes, il est évident que keyTimes n'est pas nécessaire. Et si la durée de l'animation est définie sur infinie, les keyTimes sont ignorés.
keySplines = ""
Cet attribut définit les points de contrôle lors de l'interpolation spline (interpolation Bessel). Évidemment, cela ne fonctionne que lorsque le mode d'interpolation est sélectionné comme spline. Les valeurs de cette liste vont de 0 à 1.
from = ""
to = ""
by = ""
Définir la valeur de début, la valeur de fin et la valeur de pas de l'attribut d'animation . Notez ici : si des valeurs ont déjà été spécifiées, toutes les valeurs de/à/par seront ignorées.
Catégorie 4 : Propriétés qui contrôlent si l'animation est incrémentielle
Parfois, il est très utile que la valeur pertinente ne soit pas définie sur une valeur absolue, mais sur une valeur incrémentielle, en utilisant des propriétés additives peut servir cet objectif.
additive = "replace(default value) | sum"
Cet attribut contrôle si l'animation est incrémentielle. sum signifie que l'animation sera plus grande sur les valeurs d'attributs associées ou sur d'autres animations de faible priorité. replace est la valeur par défaut, ce qui signifie que l'animation écrasera les valeurs d'attribut associées ou d'autres animations de faible priorité. Regardez un petit exemple :

Copiez le code

Le code est le suivant :

additif="sum"/> ;
< ;/rect>

Cet exemple montre l'effet d'animation de l'augmentation de la largeur rectangulaire.
Parfois, il est également très utile de superposer les résultats de l'animation répétée. Cela peut être réalisé en utilisant l'attribut accumuler.
accumulate = "aucun (valeur par défaut) | sum"
Cet attribut contrôle si l'effet d'animation est cumulatif. None est la valeur par défaut, ce qui signifie que les animations répétées ne sont pas accumulées. la somme signifie que les effets d'animation répétés sont cumulatifs. Pour les animations à exécution unique, cette propriété n'a aucune signification. Regardons un petit exemple :

Copiez le code

Le code est le suivant :

additif="sum" accumuler ="sum" repeatCount= "5"/>

Cet exemple démontre que la longueur du rectangle augmente à chaque itération.
Résumé des éléments d'animation
SVG fournit les éléments d'animation suivants :
1 élément d'animation
Il s'agit de l'élément d'animation le plus basique et peut être directement. Utilisé pour les éléments d'animation associés, les propriétés fournissent des valeurs à différents moments.
2. set element
Il s'agit de l'abréviation d'animate element et prend en charge tous les types d'attributs, ce qui est particulièrement pratique lors de l'animation d'attributs non numériques (tels que la visibilité). L'élément set est non incrémentiel et les attributs associés n'ont aucun effet sur lui. Le type de valeur de fin d'animation spécifié par to doit être conforme au type de valeur de l'attribut.
3. Élément animateMotion
Élément d'animation Lu Jin. La plupart des attributs de cet élément sont les mêmes que ci-dessus, avec seulement les quelques différences suivantes :
calcMode = "discrete | Linear | Paced | Spline"
La valeur par défaut de cet attribut est différente. l'élément est rythmé.
path = ""
Le chemin le long duquel l'élément d'animation se déplace, le format est cohérent avec le format de la valeur de l'attribut d de l'élément path.
keyPoints = ""
La valeur de cet attribut est une série de valeurs à virgule flottante séparées par des points-virgules, et la plage de valeurs de chaque valeur est de 0 à 1. Ces valeurs représentent la distance parcourue au moment correspondant spécifié par l'attribut keyTimes. La distance spécifique ici est déterminée par le navigateur lui-même.
rotate = | auto | auto-reverse"
Cet attribut spécifie l'angle de rotation lorsque l'élément se déplace. La valeur par défaut est 0, le nombre représente l'angle de rotation et auto signifie une rotation dans la direction de la route. Objet. Auto-reverse signifie tourner dans la direction opposée à la direction du déplacement
De plus, les valeurs de, by, to et les valeurs de l'élément animateMotion 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. Par exemple, from="33,15" signifie que la coordonnée x du point de départ est 33 et la coordonnée y est. 15.
Il existe deux façons de spécifier le chemin de mouvement : l'une consiste à donner directement l'attribut de chemin, l'autre consiste à utiliser l'élément mpath comme élément enfant d'animateMotionde. Si les deux méthodes sont utilisées, la priorité d'utilisation de mpath. l'élément est supérieur aux valeurs, de, par, à 🎜>Regardez un petit exemple :

Copiez le code Le code est le suivant :

< ?xml version="1.0" standalone="no"?>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http:// www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/ 1999/xlink" >
fill="none" Stroke="blue" Stroke-width=" 2" />
fill="none" Stroke="blue" Stroke-width="7.06 "/>


M-25,-12,5 L25,-12,5 L 0,-87,5 z"
fill="jaune" Stroke="red" Stroke-width="7.06">

< mpath xlink:href="#path1"/>
/svg>



4. Élément animateColor

élément d'animation couleur. Il s'agit d'un élément obsolète. Fondamentalement, toutes les fonctions peuvent être remplacées par une animation, alors ne l'utilisez plus.
5. Élément animateTransform
Élément d'animation Transform. Jetez un œil à quelques attributs spéciaux :
type = "translate | scale | rotate | skewX | skewY" Cet attribut spécifie le type de transformation, translation est la valeur par défaut. Les valeurs de from, by et to sont des paramètres correspondants de la transformation. Ceci est cohérent avec la transformation mentionnée ci-dessus. valeurs est une série de valeurs séparées par des points-virgules.
Éléments et attributs prenant en charge les effets d'animation
Basiquement tous les éléments graphiques (chemin, rect, ellipse, texte, image...), éléments conteneurs (svg, g, defs, use, switch, clipPath, masque. . .) tous prennent en charge l'animation. Fondamentalement, la plupart des propriétés prennent en charge les effets d'animation. Veuillez vous référer à la documentation officielle pour des instructions détaillées.

Utilisez DOM pour implémenter l'animation

L'animation SVG peut également être réalisée à l'aide de scripts. Les détails de DOM seront présentés plus tard :
.


Copier le code

Le code est le suivant :

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> ;
xmlns="http://www.w3.org/2000/svg"
onload=" StartAnimation(evt)" version="1.1">

fill="none" Stroke="blue" Stroke-width="2"/>

SVG

实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85 ).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/

SVG动画技术：http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx