Regard sur l'animation SVG (Scalable Vector Graphics)
Aujourd’hui, nous allons poursuivre notre discussion sur Graphique vectoriel évolutif (SVG), et cette fois nous allons travailler avec Animation SVG. Ne soyez pas effrayé cependant, SVG Animation est relativement facile et dans ce post nous allons commencer par les bases.
Mise en œuvre de base
L'animation en SVG peut être réalisée à travers
Comme vous pouvez le voir dans l'extrait de code ci-dessus, nous ajoutons le
Nom d'attribut: Cet attribut spécifie quel attribut d'élément sera affecté dans l'animation.
de: Cet attribut est optionnel, nous pouvons spécifier une valeur exacte ou le laisser pour le laisser partir de là où il était.
à: Cet attribut spécifie la direction de l'animation. En fonction de la valeur spécifiée dans Nom d'attribut, les résultats peuvent varier. Mais dans cet exemple, cela étendra la la taille.
dur: Cet attribut spécifie la durée de l'animation. La valeur de cet attribut est exprimée en syntaxe de valeur d'horloge. Par exemple, 02:33 représente 2 minutes et 33 secondes, tandis que 3h est égal à 3 heures, mais nous n'avons pas besoin de cela si longtemps, nous avons donc spécifié la durée pour seulement 3s ou 3 secondes;
La même chose va à r).
- Démo d'implémentation de base
Élément mobile
En déplaçant des éléments SVG, il suffit de cibler la coordonnée de l'élément X et y;
Dans l'exemple ci-dessus, nous déplaçons le rectangle de 0 à 200 dans 3 secondes, le rectangle apparaîtra en se déplaçant horizontalement de gauche à droite. En outre, si vous regardez attentivement, nous avons également ajouté un autre attribut à la remplir.
remplir attribut ici n’a rien à voir avec la couleur de fond comme dans les autres éléments SVG. Cet attribut spécifie le comportement de l'animation à la fin de la durée. Dans cet exemple nous gel l'élément affecté de sorte qu'il reste où l'animation se termine.
Il fonctionne également de la même manière que le cx ou cy, ainsi:
- Démo d'élément mobile
Animer plusieurs attributs
Jusqu'à présent, nous ne ciblons qu'un seul attribut à animer, mais il est également possible d'animer plusieurs attributs à la fois. L'exemple ci-dessous montre comment nous le faisons:
Comme vous pouvez le constater, cela fonctionne de la même manière, c’est seulement maintenant que nous avons deux
- Démo d'attributs multiples
Suivre un chemin
Dans notre précédent post sur Travailler avec du texte en SVG, nous vous avons montré comment faire passer le texte sur un chemin. Il est également possible de faire la même chose dans Animation SVG, nous pouvons animer un élément pour suivre un chemin. Voici un exemple.
Le chemin est mieux défini dans un identifiant avec
Ça y est, voyons le maintenant en action;
- Suivant la démo du sentier
Transformations
Nous pouvons également utiliser la transformation comme échelle, Traduire et tourner pour l'animation, et pour ce faire, nous utiliserons
Les transformations en SVG partagent des principes similaires avec CSS3, et nous en avons traité de manière assez détaillée dans notre précédent post sur CSS3 2D Transformation..
- Transformation Demo
Dernières pensées
En fonction de vos compétences en animation SVG, vous pouvez créer quelque chose comme ceci..
L’un des avantages de l’animation SVG par rapport à l’animation Flash est qu’elle ne repose pas sur des plug-ins tiers et qu’elle fonctionne considérablement plus rapidement que Flash. Une fois que Adobe a cessé de prendre en charge Flash dans Android, vous pouvez commencer à essayer cette approche afin de diffuser des animations sur votre prochain site Web..
Références supplémentaires
- Documentation SVG Animate
- Techniques d'animation SVG avancées
- Voir la démo
- Source de téléchargement
