Tout sur les animations SVG

Dans cet article, je veux souligner les subtilités du travail avec les graphiques SVG, l'animation SVG (y compris le chemin), les problèmes et les méthodes pour les résoudre, ainsi que divers pièges, dont il existe de nombreux SVG. Je positionne cet article comme un guide détaillé.



Il n'y aura pas de plugins, bibliothèques, etc., nous ne parlerons que de SVG pur.
Le seul outil que j'utiliserai est Adobe Illustrator.

Préface

Tout a commencé par une conférence ennuyeuse et dans l'espoir de me divertir avec au moins quelque chose, j'ai décidé d'étudier le graphisme SVG, à savoir l'animation. À ma grande surprise, il y avait très peu d'informations sur Internet. Partout, il y avait des informations en double expliquant les bases, mais sur l'animation en général à partir de la force de 2-3 liens avec des informations absolument identiques, qui est une traduction de l'article Un guide des animations SVG (SMIL) de Sarah Suydan.

Son article parle de tout, mais superficiellement. Néanmoins, je vous recommande fortement de vous familiariser avec elle. * Lien vers la traduction *

Les semaines suivantes, j'ai passé à recueillir des informations pièce par pièce auprès de diverses sources. Le résultat de ces recherches est cet article.

Exportation SVG appropriée depuis Illustrator

Cette section se concentre sur les fonctionnalités et les problèmes d'Adobe Illustrator, donc si vous n'utilisez pas Illustrator, vous pouvez ignorer cette partie.

La préparation d'un document pour l'animation est une étape très importante, dont la négligence peut entraîner des conséquences très désagréables. Pour vous apprendre à mieux dessiner dans Illustrator, je ne le ferai pas. La seule chose que je dirai, c'est que lorsque vous dessinez des formes, vous devez garder une trace des valeurs, il est souhaitable qu'elles n'aient qu'un seul nombre après la virgule décimale, et il vaut mieux être entier. Il n'est pas nécessaire de suivre cette règle, mais cela réduira la taille du fichier, simplifiera l'animation et réduira visuellement la quantité d'informations. Jetez un oeil

<path d="M 17.7 29 C 28.2 12.9 47 5.6 62.8 10.4 c 28.2 8.5 30 50.5 24.8 53.1 c -2.6 1.3 -10.4 -6.1 -29.2 -34.6"/> <path d="M 17.651 28.956 c 10.56 -16.04 29.351 -23.359 45.12 -18.589 c 28.151 8.516 29.957 50.5 24.841 53.063 c -2.631 1.318 -10.381 -6.148 -29.235 -34.643"/> 

Dans l'exemple, la même courbe, mais dans le premier cas, un chiffre après le point décimal, et dans les trois autres. Cette courbe n'a que 4 points et le deuxième exemple est un tiers plus long que le premier. Imaginez combien d'espace une courbe de 20 points prendra.

Une fois le filaire dessiné, vous devez enregistrer l'image en tant que fichier SVG. Il existe deux façons de procéder: Enregistrer sous ou Exporter sous. Mais quelle voie choisir? Si vous me faites confiance, mieux vaut utiliser "enregistrer sous". Si vous voulez savoir pourquoi, déployez un spoiler.

Façons d'importer un document SVG en HTML

Avant de commencer directement avec l'animation, je veux parler de la façon d'incorporer SVG sur une page. Chaque méthode a ses propres «fonctionnalités» qui ont un impact direct sur l'animation. Et si vous n'en parlez pas, l'article sera incomplet.
Supposons que vous disposez déjà d'un SVG prêt à l'emploi avec animation interactive et qu'il reste à intégrer ce document sur le site. Comment faire ça?

L'option numéro un est de se rappeler que SVG est également une image et peut être importé à l'aide d'outils HTML standard. Vous pouvez créer une balise <img> avec un lien vers un document

 <img src="Hello_SVG.svg" /> 

Ou définissez SVG comme image de fond

 #box { background-image: url("Hello_again.svg"); } 

Le principal inconvénient de cette méthode est l'isolement de l'image. SVG en tant qu'exposition au musée - vous pouvez regarder, sans toucher. L'animation à l'intérieur fonctionnera, mais il ne peut être question d'aucune interactivité. Si, par exemple, une animation est déclenchée par un clic de l'utilisateur ou s'il est nécessaire de modifier dynamiquement le contenu d'un document SVG, cette méthode n'est pas pour vous.

L'option numéro deux consiste à créer un objet à partir de SVG à l'aide des balises <object> ou <embed> . Il est également possible d'utiliser <iframe> pour créer un cadre, mais je ne recommande pas d'utiliser cette méthode, car une béquille est requise pour tous les navigateurs afin que cette option s'affiche correctement

 <object data="My_SVG.svg" type="image/svg+xml"></object> <embed src="My_SVG.svg" type="image/svg+xml" /> <iframe src="My_SVG.svg"></iframe> 

Ici, les choses vont mieux. Les animations ont la possibilité d'être interactives, mais uniquement si elles sont déclarées dans un document SVG et que le contenu est disponible pour JavaScript externe. <objet> et <iframe> peuvent toujours afficher un stub si soudainement l'image ne se charge pas.

L'option numéro trois consiste à coller simplement le contenu du document SVG directement dans le code HTML. Oui, c'est possible. Le support SVG est apparu dans la norme HTML5 . Étant donné que SVG fait essentiellement partie de la page elle-même, son accès est partout. Les animations et les styles d'éléments peuvent être déclarés à la fois à l'intérieur du SVG et dans des fichiers externes. L'inconvénient est que ces images ne sont tout simplement pas mises en cache séparément de la page

 <body> ... <svg> <!--  --> </svg> </body> 

Animation SVG

Il existe deux façons principales d'animer un élément SVG:

• Animation CSS
• Animation SMIL intégrée à SVG (en fait, c'est une animation SVG qui est basée sur SMIL et étend ses fonctionnalités)

Personnellement, je les sépare en animations «externes» et «internes». Cette division est conditionnelle, mais ils ont encore des différences fonctionnelles. Si nous parlons des différences en général: CSS - a un meilleur support pour les navigateurs; SMIL - a une grande fonctionnalité. Il est difficile de dire lequel est préférable d'utiliser car ils se ressemblent beaucoup. Le choix dépend de la tâche, donc je vais juste dire les principales raisons d'utiliser SMIL au lieu de CSS

SMIL - en cas de besoin:

1. Ce que CSS ne pouvait pas faire (animer un attribut non pris en charge, etc.)
2. Ayez un contrôle plus précis sur l'animation.
3. Faire du morphing de chemin (animation de l'attribut d au tag de chemin )
4. Synchroniser les animations
5. Créez des animations interactives

Si j'ai écrit que SMIL devrait être utilisé pour des animations interactives, cela ne signifie pas que la même chose ne peut pas être faite avec CSS. Simply SMIL est un outil plus fonctionnel et sophistiqué. Et c'est pourquoi il ne doit être utilisé qu'en cas de besoin. Si l'animation est simple et que CSS peut être supprimé, alors cela devrait être fait.

Animation CSS

Rien de nouveau ici. Nous pouvons animer n'importe quel élément SVG de la même manière que nous le faisons avec HTML. Toutes les animations sont créées à l'aide de @keyframes . Puisque l'animation CSS est un autre sujet, je ne m'attarderai pas sur ce point en détail, le réseau est plein de documentation et de guides sur ce sujet. Tout ce qui y est décrit s'applique au SVG, mais je vais juste donner quelques exemples.

Le document SVG a des feuilles de style internes, nous allons donc y écrire des animations

 <svg> <style> <!--   --> </style> <!--   SVG  --> </svg> 

L'animation d'un attribut SVG est aussi simple que les attributs CSS

 @keyframes reduce_radius { from { r: 10; } to { r: 3; } } @keyframes change_fill { 0% { fill: #49549E; } 75% { fill: #1bceb1; } 100% { fill: #1bce4f; } } 

Vous pouvez spécifier des valeurs en pourcentage et une construction de-à

Il ne reste plus qu'à appliquer les animations créées à l'élément souhaité

 .circle { animation: change_fill 1s, popup 2s; } 

Tout ce que j'ai décrit ci-dessus, ce sont des animations statiques, il n'y a aucune odeur d'interactivité là-bas. Et si vous en avez vraiment envie? Eh bien, quelque chose peut encore être fait de manière interactive et en CSS. Par exemple, si vous utilisez la transition en combinaison avec la pseudo- classe de survol

 .circle { fill: #49549E; transition: .3s; } .circle:hover { fill: #1bceb1; } 

Lorsque vous survolez un élément, sa couleur passe du bleu au bleu pendant 300 ms.

Animation des attributs et un petit morceau d'interactivité - c'est là que s'arrêtent les fonctionnalités de l'animation CSS. Mais cette fonctionnalité est suffisante, car la plupart des tâches se résument à l'animation d'un attribut. Presque tous les attributs SVG peuvent être animés. Et quand j'écris "presque n'importe quoi", je veux dire que si vous choisissez un attribut aléatoire et qu'il s'avère non invariant, alors vous êtes TRÈS chanceux.

Animation SMIL

Il vaut la peine de dire tout de suite que l'animation SMIL est aussi vieille que le monde et qu'elle s'éteint, la prise en charge du navigateur est décente, mais toujours moins que l'animation CSS, mais il y a une raison pour laquelle SMIL est toujours attrayant - cela peut parce que CSS ne peut pas.

Je parlerai davantage de SMIL, car il existe de nombreux pièges sur lesquels ils écrivent rarement. Et ce sujet est moins populaire que CSS. Les balises principales pour l'animation sont <animate> , <set> , <animateTransform> , <animateMotion> .

<animer>

Commençons par l'artillerie lourde. <animer> - utilisé pour animer n'importe quel attribut et est l'outil principal. Les balises restantes sont hautement spécialisées, mais tout d'abord.

Comment appliquer une animation à un élément?

Il existe deux façons de spécifier l'élément auquel l'animation sera appliquée.

1. Mettez la balise à l'intérieur de l'élément. Cette méthode vous permet d'encapsuler l'animation à l'intérieur de l'objet, ce qui facilite la lecture du code
   
   

    <circle ...> <animate .../> </circle> 

   Dans ce cas, l'animation sera appliquée à l'élément cercle .
2. Passez le lien vers l'article. Utile si vous souhaitez que toutes les animations soient collectées en un seul endroit
   
   

    <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="blue" .../> ... <animate xlink:href="#blue" .../> </svg> 

   L' attribut xlink: href est utilisé ici, dans lequel nous spécifions l' id de l' élément auquel l'animation doit s'appliquer. Pour que cette méthode fonctionne, vous devez définir l'espace de noms xlink . Cela se fait dans la balise <svg>.
   

Avec SVG 2, l' attribut xlink: href est obsolète, la spécification recommande d'utiliser href à la place, ce qui ne nécessite pas d'espace de noms xlink .

 <circle id="blue" .../> ... <animate href="#blue" .../> 

Mais ici, tout n'est pas si fluide - href n'est pas pris en charge par Safari. Il se trouve que la situation est dans l'impasse, un attribut est obsolète, l'autre n'est pas pris en charge en partie. Alors quelle méthode utiliser, chacun décide pour lui-même.

Pour ceux qui ont remarqué des similitudes avec les sélecteurs CSS: je suis désolé de décevoir, je ne pourrai pas accéder aux éléments par classe

 <circle class="blue_circle" .../> <animate href=".blue_circle" .../> 

Ça ne marche pas!

Comment spécifier un attribut pour l'animation?

Il y a AttributeName pour cela. La valeur est le nom de l'attribut que nous allons animer.

 <circle r="25" ...> <animate attributeName="r" ... /> </circle> 

En spécifiant r dans attributeName , nous signalons que nous allons animer le rayon du cercle

Qu'est-ce que attributeType et pourquoi n'en avez-vous pas besoin?

Parce qu'il est inutile
En théorie, un moment peut survenir lorsque les noms d'attribut en CSS et XML correspondent, ce qui peut entraîner des problèmes. Et pour résoudre ce conflit, vous devez spécifier explicitement un espace de noms. Il existe deux types de chaises : spécifiez un préfixe ou utilisez attributeType . Commençons par le préfixe.

Partout, ils écrivent quelque chose comme ceci:

Vous pouvez spécifier un préfixe XMLNS pour un attribut pour spécifier explicitement son espace de noms

Cette méthode est mentionnée en passant et sans exemples. Je ne changerai donc pas les traditions. (Je vous conseille de vous arrêter ici, d'oublier les préfixes comme un cauchemar et d'aller sur attributeType , je vous ai prévenu)


Pour indiquer explicitement à quoi appartient l'attribut animé, attributeType est utilisé. Il prend 3 valeurs: CSS , XML , auto . À moins que attributeType ne soit explicitement spécifié, auto sera utilisé. Dans ce cas, les propriétés CSS sont vérifiées en premier, et s'il n'y a pas de correspondance, les attributs de l'élément cible sont vérifiés. Dans l'exemple, nous indiquons que nous allons animer exactement la propriété CSS

 <animate attributeType="CSS" attributeName="opacity" .../> 

Eh bien, attributeType vous permet d'indiquer facilement et sans béquilles à quoi appartient l'attribut animé, résolvant ainsi le "problème", qui n'existe même pas.

De façon inattendue, non? Comme je l'ai dit au début du chapitre, SMIL s'éteint et cela est dû au fait que l'animation est traduite en rails CSS. La plupart des attributs en double sont absolument identiques les uns aux autres, c'est-à-dire peu importe si l'attribut CSS ou SMIL appartient - le résultat sera le même. Et en combinaison avec la valeur automatique par défaut, la nécessité de définir explicitement attributeType n'est plus nécessaire.

Un moment de faits intéressants: attributeType n'est pas pris en charge par SVG. D'où venait-il alors? Il nous est venu de SMIL Animation, sur lequel l'animation SVG est basée. Et attributeType est également supprimé après la deuxième édition de SVG 1.1. Toutes les preuves ici

Comment déterminer les valeurs d'animation?

Il ne suffit pas de spécifier un attribut pour l'animation, vous devez définir ses valeurs. Voici venir de , à , par , valeurs .

Commençons par un couple toujours ensemble: de et vers . La signification de leur existence est évidente, de indique le début à la fin

 <circle r="25" ...> <animate attributeName="r" from="10" to="45" .../> </circle> 

Le résultat de l'animation sera un changement en douceur du rayon du cercle de 10 à 45

Même si j'ai dit qu'ils sont toujours ensemble, to peut également être utilisé sans déclarer explicitement from . Dans ce cas, from prendra la valeur définie dans l'élément cible. Pour l'exemple ci-dessus, l'animation commencera à 25.

S'il est nécessaire de spécifier un ensemble de plusieurs valeurs, des valeurs sont utilisées. Les valeurs sont répertoriées avec un point-virgule.

 <circle r="25" ...> <animate attributeName="r" values="15;50;25" .../> </circle> 

La valeur du rayon diminue à 15, puis augmente à 50, puis revient à sa position d'origine.

Dernière ligne par . Il ne se soucie pas «où» et «où», tout ce qui l'intéresse, c'est «combien». En d'autres termes, au lieu de valeurs absolues, cela fonctionne avec des valeurs relatives

 <circle r="25" ...> <animate attributeName="r" by="15" .../> </circle> 

À la suite de l'animation, le rayon augmentera de 15, c'est-à-dire que vous obtenez 25 + 15 = 40

Une légende fait le tour des étendues de manuels qui " par peuvent être utilisés pour indiquer la quantité d'avance des animations" . Je le comprends de cette façon: si de = 20 , à = 50 , et donné par = 10 , alors ce chemin doit être surmonté en "sautant" en 10, c'est-à-dire 20, 30, 40, 50. Mais peu importe comment j'ai essayé, avec et sans, l'animation n'a pas changé du tout. De plus, je n'ai pas trouvé de confirmation dans les spécifications. Il semble que ce soit juste une erreur.

Les valeurs ont la priorité la plus élevée, puis de - à , en dernier. La priorité la plus basse de explique pourquoi une «légende» ne peut pas fonctionner en principe. Cependant, en travaillant conjointement avec from , dans ce cas, from remplace simplement la position actuelle de l'élément

 <circle cy="50" ...> <animate attributeName="cy" from="70" by="30" .../> </circle> 

Ici, l'animation au lieu de 50 commence à 70 et se termine à 100

En savoir plus sur les animations relatives

Vous pouvez faire fonctionner d'autres attributs de la même manière que par . Cela se fait en utilisant l'attribut additif , qui a deux positions - remplacer et additionner .Le premier est la valeur par défaut, nous sommes donc intéressés par le second. Avec une valeur de somme, tous les attributs seront ajoutés à la valeur actuelle de l'élément cible, c'est-à-dire lors de l'animation d'un rayon de 20 avec les valeurs forme = 5 et à = 15 , l'animation sera de 20 + 5 à 20 + 15

 <circle r="20" ...> <animate attributeName="r" from="5" to="15" additive="sum" .../> </circle> 

Lors de l'exécution de l'animation, il y aura un saut brusque à la position 25, ce qui n'est pas bon (sauf si, bien sûr, cela est prévu). Cela peut être évité avec form = 0 , mais alors le sens de l'utilisation de sum est perdu , car le même effet peut être obtenu sans additif en utilisant par

 <animate attributeName="r" from="0" to="15" additive="sum" .../> <animate attributeName="r" by="15" .../> 

Quant à moi, la deuxième méthode est beaucoup plus compréhensible et pratique:

où spécifier la durée de l'animation?

Le dernier attribut requis est laissé pour faire fonctionner l'animation - et c'est dur . La valeur d'attribut détermine la durée de l'animation, qui peut être spécifiée à la fois en secondes et en millisecondes

 <animate dur="0.5s" .../> <animate dur="500ms" .../> <animate dur="00:00:00.5" .../> 

Depuis la dernière ligne, vous pouvez deviner qu'il y a autre chose ...

Vous pouvez également indiquer les valeurs en minutes et même en heures

 <animate dur="1.2min" .../> <animate dur="0.02h" .../> 

, , , , ...


, ?

fill ( ) . :

• remove ( ) – ,
• freeze –

Est-il possible de boucler l'animation?

La réponse est oui. Pour ce faire, l'attribut repeatCount spécifie une valeur indéfinie . L'attribut détermine le nombre de répétitions de l'animation et par défaut à 1, mais vous pouvez spécifier n'importe quel nombre

 <animate repeatCount="indefinite" .../> <animate repeatCount="3" .../> 

Le premier se répétera à l'infini, le second fonctionnera 3 fois.

Maintenant, les animations sans fin me font chier, puis-je les désactiver après un certain temps?

Pour ces personnes ennuyeuses, répéterDur . Cet attribut arrête l'animation après un certain temps à partir du début de l'animation! Autrement dit, repeatDur limite la durée de l'animation. La principale différence avec repeatCount est que l'animation peut être arrêtée au milieu

 <animate dur="2s" repeatCount="indefinite" repeatDur="3s" .../> 

L'animation s'arrêtera au milieu de la deuxième itération.

Et si je veux que l'animation ne démarre pas tout de suite?

Alors pour vous, mon ami, l'attribut begin est fourni. Il est responsable du début de l'animation. Cet attribut est très utile car il est également utilisé pour synchroniser plusieurs animations, mais plus à ce sujet plus tard.

Si vous devez spécifier le délai habituel de lancement, nous écrivons à quelle période de temps l'animation doit commencer après l'ouverture du document

 <animate begin="1.5s" .../> 

La lecture démarre après 1,5 seconde.

Vous pouvez également spécifier une valeur négative. Ensuite, l'animation ne commencera pas depuis le début, mais à l'endroit où elle se trouverait après une période de temps spécifiée

 <animate begin="-2s" dur="4s" .../> 

,



begin , , «on». , , «onclick» click

 <circle ...> <animate begin="click" .../> </circle> 

, . , id

 <circle id="button" .../> ... <animate begin="button.click" .../> 

.

 <animate begin="click; 0s" .../> 

L'animation démarre lorsque le document est chargé et en cliquant sur

. Tous les événements ne sont pas pris en charge, mais la plupart des événements liés à la souris fonctionnent. Je ne les énumérerai pas tous, les événements disponibles peuvent être trouvés quelque part ici . De plus, personne n'a annulé la méthode de piquer scientifique.

L'animation redémarre sans atteindre la fin, comment puis-je la réparer?

Je vais donner un exemple simple. Ici, l'animation commence par un clic. Si l'utilisateur n'appuie toujours pas, le démarrage automatique est fourni en 3 secondes

 <animate begin="click; 3s" dur="7s" .../> 

Mais il y a un problème: si l'utilisateur appuie avant le chronomètre automatique, puis lorsque 3 secondes se sont écoulées, l'animation redémarre et n'atteint jamais la fin. L'attribut restart dans la valeur whenNotActive viendra à la rescousse . Au total, il en a trois

• always –
• whenNotActive – ,
• never –

 <animate begin="click; 3s" dur="7s" restart="whenNotActive" .../> 

, ,



, , , , . , , id begin , end , repeat

 <animate id="pop" begin="click" .../> <animate begin="pop.begin" .../> <animate begin="pop.end" .../> 

Si avec les deux premiers tout est clair, alors avec répéter tout n'est pas si évident. Le nombre de répétitions est écrit entre parenthèses, après quoi vous devez démarrer l'animation (ce nombre ne peut pas être la dernière répétition)

 <animate id="flip" repeatCount="5" .../> <animate begin="flip.repeat(2)" .../> 

L'animation démarre après deux répétitions et pas toutes les deux répétitions

. Vous pouvez également spécifier un délai par rapport à l'événement. Par exemple, si je veux lire l'animation 2 secondes après le début d' une autre

 <animate id="another" .../> <animate begin="another.begin + 2s" .../> 

Ou lancez l'animation une seconde avant la fin d' une autre

 <animate begin="another.end - 1s" .../> 

Quoi d'autre peut commencer ...
Je voulais appeler cette section, mais il est plus correct de l'appeler "Que devrait-il pouvoir, mais pas?". Selon mes spécifications préférées , begin devrait avoir deux autres valeurs qu'il devrait prendre. Le premier est accessKey , qui démarre l'animation en appuyant sur une touche spécifiée au format Unicode. La seconde est l' horloge murale , qui détermine le début de l'animation en temps réel. Et là, vous pouvez spécifier non seulement l'horloge, mais même le mois et l'année, en général, un ensemble complet.

Malheureusement, aucun d'entre eux ne voulait travailler. Bien que la perte ne soit pas grande, car leur besoin est encore douteux

 <animate begin="accessKey(\u0077)" .../> <animate begin="wallclock(2019-04-09T19:56:00.0Z);" .../> 

Je ne sais pas quel est le problème, peut-être que mon navigateur ne les prend pas en charge, ou peut-être autre chose ...

Puis-je interrompre l'animation?

Cela peut être fait avec l'attribut end . Dans son utilisation, il est identique pour commencer , vous pouvez également spécifier l'heure, les événements, etc. Comme vous pouvez le voir, ce n'est pas le premier (et pas le dernier) moyen d'interrompre l'animation, car il y a repeatDur , où vous pouvez également fixer la durée de l'animation. Et bienque vous puissiez également spécifier l'heure directementà la fin , ses caractéristiques distinctives sont la liaison d'événements et la possibilité de spécifier une liste de valeurs.

Supposons que nous ayons un élément qui a un état de repos et d'activité. Le second est activé lorsque vous cliquez dessus. Et nous voulons interrompre l'animation restante avec le début de l'activité. Vous pouvez implémenter une idée similaire comme celle-ci

 <animate id="idle" end="action.begin" begin="0s" repeatCount="indefinite" .../> <animate id="action" begin="click" .../> 

.

end begin

, begin , end , , , . , , … ? .

, – . begin - enddéfinit une «répétition». Et le temps entre la fin d'une «répétition» et le début de la suivante détermine le retard. Je les appelle des «répétitions» pour une raison, l'animation ne s'arrête pas et continue, mais est interrompue et recommence depuis le début. Il s'avère que nous pouvons ajuster séparément la durée de chaque répétition et définir différents délais après chaque répétition

 <animate dur="3s" begin="1s; 5s; 9s" end = "2s; 8s; 11s" .../> 

Dans l'exemple, l'animation comporte 3 «répétitions». Le premier commencera une seconde après le chargement du document et ne durera qu'une seconde sur trois. Puis un délai de 3 secondes, puis une animation complète de 3 secondes. Encore une fois, un retard, mais en 1 seconde. La dernière répétition sera interrompue après deux secondes d'animation.

Pouvez-vous quand même interrompre l'animation d'une manière ou d'une autre?
Quelques attributs inutiles à la tirelire
Keeneeee, il y a deux autres attributs - min et max . Comme son nom l'indique, min définit le minimum et max définit ladurée maximale. Tout d'abord, la durée de l'animation est calculée à l'aide des valeurs dur , repeatCount , repeatDur ,fin . Et après cela, la durée obtenue est ajustée aux images spécifiées par min et max . Tout est beau sur papier, voyons comment ça marche dans la pratique.

Avec max, tout est simple, c'est un autre attribut qui définit la limite supérieure. Si la durée calculée est inférieure à max , alors elle est ignorée, et si elle est plus longue, alors la durée de l'animation devient égale à max

 <animate dur="10s" repeatDur="7s" end="5s" max="4s" .../> 

Il sera interrompu pendant 4 secondes,

mais min a été moins chanceux. Si la durée d' animation calculée est supérieure à min , elle est ignorée, ce qui est logique. Cependant, si la durée calculée est inférieure à min , alors elle ... est parfois ignorée, et parfois non.
Pourquoi pourquoi?! Ce moment est très facile à confondre, alors lisez attentivement.

Nous avons deux options lorsque la durée calculée est inférieure à min :

1. Parce que l'animation elle-même est terminée, c'est-à-dire dur * repeatCount < min
   
   

    <animate dur="2s" repeatCount="2" min="5s" .../> 

   Dans cette option, l'attribut min est simplement ignoré, l'animation s'arrêtera à la quatrième seconde
2. repeatDur end .
   
   
   • repeatDur , , min , min
     
     

      <animate dur="1s" repeatCount ="indefinite" repeatDur="3s" end="5s" min="4s" .../> 

     repeatDur , min , 3
   • repeatDur , end min , end , min
     
     

      <animate dur="1s" repeatCount ="indefinite" end="2s" min="4s" .../> 

     4 , .. min end

En raison de l'abondance d'attributs qui interrompent l'animation, il y a beaucoup de confusion. En conséquence, il n'y a pas de grand sens en max et min , car une animation bien écrite élimine leur besoin.

Comment gérer les images clés et où indiquer la fonction temporelle?

Pour ce faire, vous devez connaître les attributs keyTimes , keySplines , calcMode . Après avoir spécifié la liste en valeurs , nous déclarons les images clés, mais elles sont réparties uniformément. Grâce à l'attribut keyTimes . , , . , (0 – 0%; 0,5 – 50%; 1 – 100%).

: 0 1, - , 0, 1, . , , keyTimes values .

 <animate values="15; 10; 45; 55; 50" keyTimes="0; 0.1; 0.6; 0.9; 1" .../> 

Par défaut, toutes les conversions se produisent de façon linéaire, pour changer cela, vous devez spécifier un mode différent dans calcMode . Et il n'y a pas beaucoup d'options:

• linéaire - valeur standard, aucune explication nécessaire
• stimulé - les intervalles de temps sont calculés de sorte que la vitesse entre les images clés soit constante
• discret - l'animation bascule entre les images clés en sauts, sans interpolation
• spline - on peut dire que c'est un mode de contrôle manuel (à ce sujet plus tard)

Malheureusement, ce sont toutes des fonctions intégrées, ici vous ne trouverez pas de facilité dans \ out comme dans CSS. Ces besoins devront donc satisfaire le régime que j'ai appelé "manuel".

Le plus difficile à comprendre est rythmé , je vais donc l'expliquer plus en détail. Pour commencer, voyez comment l'animation fonctionne en mode standard. L'animation dure 2 secondes et nous avons 3 images clés - initiale, intermédiaire, finale

 <animate dur="2s" values="100; 200; 150" .../> 

, , . 100, – 50, .. . , , . calcMode="paced" , .

 <animate dur="2s" values="100; 200; 150" calcMode="paced" .../> 

. , , – .

spline keySplines . ……


Si spline définit un mode manuel, l'attribut keySplines définit les valeurs de ce mode. Évidemment, l'un ne fonctionne pas sans l'autre. Les valeurs dans keySplines sont définies par une liste où les coordonnées de deux points pour Bézier cubique sont indiquées.


Le nombre de valeurs dans keySplines doit être inférieur de 1 aux valeurs . Cela est dû au fait que nous indiquons des valeurs non pas pour les images clés, mais pour les intervalles entre elles.

 <animate values="100; 200; 150" keySplines=".25 .1 .25 1; 0 0 .58 1" calcMode="spline" .../> 

Les coordonnées des points de la fonction Bézier sont séparées par des espaces ou des virgules, et les valeurs de liste sont séparées par des points-virgules.

Le premier inconvénient, et le plus désagréable, est que vous ne pouvez pas définir une fonction de temps commune pour toutes les images clés, vous devrez dupliquer la fonction pour chaque image.
Deuxièmement - si vous souhaitez définir la fonction de temps pour les attributs de - à ou par , vous avez besoin d'une béquille: vous devrez définir keyTimes avec les valeurs "0; 1"

 <animate from="10" to="50" keyTimes="0; 1" keySplines=".25 .1 .25 1;" calcMode="spline" .../> 

from - to values ,

?

– , . , … , .

, : accumulate ( none ) sum

 <animate by="100" repeatCount="3" accumulate="sum".../> 

Il ne faut pas oublier que si vous utilisez des valeurs ou de - à , toutes les répétitions, sauf la première, se comporteront comme si additive = "somme" . Et accumuler est ignoré si un seul est spécifié .

Nous comprenons le morphing du contour

Maintenant que j'ai expliqué les bases, il est temps de passer à des choses vraiment cool et complexes. Je suis sûr que quelqu'un a ouvert cet article uniquement pour le plaisir de cette section.

Le morphing de chemin est une animation de l'attribut d de la balise de chemin , qui vous permet de créer l'effet de changer en douceur la forme de la forme. Actuellement, avec les outils intégrés, cela ne peut être fait qu'à l'aide de SMIL. Dansvaleurs indique la liste des valeurs de l'attribut d par laquelle passe l'élément. Vous pouvez également utiliser de - à . En général, la forme du contour ressemble à ceci

 <animate attributeName="d" values=" 1;  2; ..." .../> 

:

– d , . , ( «» ). , « », «», - , .. ( ).

, , . , – , calcMode="discrete" . , . , .

, «». , . , , . Adobe Illustrator , . , , . , .

À l'heure actuelle, la seule solution au problème est la conversion du «code tordu» dans l'application Web Shape Shifter . C'est l'option que j'utilise. En plus de corriger le code cassé, Shape Shifter vous permet de voir le résultat, d'ajouter éventuellement un autre type d'animation et d'exporter le résultat dans un format pratique.

Ensuite, un tutoriel étape par étape où je vous dirai comment créer une si belle animation

<set>

La balise set est une version abrégée d' animation , sauf qu'elle ne peut pas interpoler. Il est utilisé pour changer instantanément l'attribut pendant une certaine période de temps, c'est-à-dire fonctionne sur le principe d'un interrupteur. Par conséquent, il ignore les attributs associés à l'interpolation et ne prend pas en charge les animations cumulatives ou relatives. La valeur est définie exclusivement à l'aide de l' attribut to , les valeurs , from , by sont ignorées.

 <set attributeName="cx" to="200" begin="click" dur="5s" .../> 

L'élément change de position en cliquant, après 5 secondes, il revient à sa position d'origine.

Si vous ne spécifiez pas l'attribut dur , l'élément restera dans cet état jusqu'à ce que le document soit rechargé. Sinon, c'est similaire à animer .

<animateTransform>

Comme son nom l'indique, il est utilisé pour appliquer diverses transformations à un élément. Tous les types de transformations sont identiques aux transformations CSS. Avec l'utilisation simultanée des transformations CSS et SMIL, elles se remplaceront mutuellement, il est donc préférable d'utiliser une chose ou de veiller à ce qu'elles ne se chevauchent pas.

Comment transformer?

L'attribut animé est transform . Le mode de transformation est indiqué dans l'attribut type et prend 4 types de valeurs - mouvement, rotation, mise à l'échelle, décalage le long des axes.

translate - déplacer un élément par rapport à sa position actuelle. Il prend un décalage au format [x, y] , où y est un paramètre facultatif

 <animateTransform attributeName="transform" type="translate" from="0, -10" to="0, 10" .../> 

Déplace l'élément le long de l'axe Y

rotation - fait pivoter l'élément par rapport au centre de rotation. Il prend l'angle de rotation et les coordonnées du centre de rotation [deg, x, y] comme valeurs, les coordonnées du centre sont optionnelles. Par défaut, le centre de rotation se trouve dans le coin supérieur gauche du document SVG

 <animateTransform attributeName="transform" type="rotate" from="0, 150, 150" to="45, 150, 150" .../> 

Faire pivoter de 45 degrés autour d'un point avec les coordonnées 150, 150

De plus, le centre de rotation peut être modifié à l'aide de la propriété CSS de l' origine de la transformation , où en plus des coordonnées, vous pouvez spécifier des pourcentages. Par défaut, les pourcentages sont calculés par la taille de l'ensemble du document, de sorte que les pourcentages soient calculés par rapport à l'élément, vous devez définir la propriété CSS transform-box avec la valeur fill-box .

scale - met à l'échelle l'élément. Comme valeurs, il prend des nombres à virgule flottante au format [échelle] pour les deux axes, ou séparément pour chaque axe [scaleX, scaleY] (1 correspond à la taille normale de l'élément). Si vous ne changez pas la boîte de transformationComme je l'ai mentionné ci-dessus, l'élément est mis à l'échelle par rapport à l'ensemble du document. L'espace vide autour de l'élément change également avec lui, il semble donc visuellement que l'élément est décalé sur le côté

 <animateTransform attributeName="transform" type="scale" from="1, 1" to="2, 1" .../> 

Étire un élément le long de l'axe X

skewX ou skewY - décale un élément par rapport à l'axe. La valeur prend l'angle d'inclinaison [deg] . Par défaut, le centre de décalage est le coin supérieur gauche, donc la même blague avec transform-box et transform-origin fonctionne ici commedans d'autres transformations

 <animateTransform attributeName="transform" type="skewX" from="0" to="45" .../> <animateTransform attributeName="transform" type="skewY" from="90" to="0" .../> 

L'un décale le long de X, l'autre le long de Y

Sommation et redéfinition des transformations

Dans animateTransform , vous pouvez toujours faire des animations cumulatives et relatives, mais ici l'attribut additif se comporte différemment. Dans la valeur de replace, la transformation remplace toutes les précédentes. Dans la valeur somme , latransformation est additionnée à la précédente

 <rect transform="skewY(115)" ...> <animateTransform type="translate" from="-10" to="10" additive="replace" .../> <animateTransform type="rotate" from="0" to="90" additive="sum" .../> </rect> 

Dans cet exemple, le décalage du rectangle sera redéfini pour se déplacer et pivoter

<animateMotion>

, . animateMotion animate 3 – path , rotate , keyPoints .



– from , to , by values , path <mpath> . .

from , to, en indiquant les coordonnées des points, les mêmes valeurs , mais déjà sous forme de liste

 <animateMotion from="0,0" to="50,100" .../> <animateMotion values="0,0; 0,100; 100,100; 0,0" .../> 

L'effet de cette méthode est comparable à la transformation habituelle du déplacement. Un élément se déplace rectiligne d'un point à un autre. Et ici, tout comme dans animateTransform , les coordonnées sont relatives . Le point 0,0 n'indique pas le coin supérieur gauche du document, mais la position actuelle de l'élément cible. Cette caractéristique est présente dans d'autres méthodes de détermination de la trajectoire.

L'attribut path spécifie un ensemble de commandes, comme pour l'attribut d . Si dans l'attribut d les commandes sont interprétées comme le contour de la figure, alors dans l'attribut path elles sont la ligne le long de laquelle l'élément se déplacera. Les coordonnées des points sont également relatives, donc le chemin commence au point 0,0

 <animateMotion path="M 0 0 c 3.4 -6.8 27.8 -54.2 56 -37.7 C 73.3 -27.5 89.6 -5.1 81.9 5.9 c -5.8 8.3 -24.7 8.7 -45.4 -0.4" .../> 

Ce chemin décrit une telle courbe


La dernière façon consiste à utiliser un élément <path> tiers comme chemin . Pour ce faire, vous devez spécifier un lien vers cet élément dans la balise <mpath> , et la balise elle-même doit être placée dans <animateMotion> . Cette option a la même fonctionnalité avec des coordonnées relatives. À la base, cette méthode «copie» la valeur de l'attribut d de l'élément dans l'attribut <path>

 <path id="movement" .../> ... <animateMotion ...> <mpath href="#movement"/> </animateMotion> 

L'élément qui définit le chemin d'accès peut même ne pas apparaître dans le document. Vous pouvez simplement le définir dans <defs>

Faire pivoter un élément par rapport à la trajectoire.

Il est possible de faire tourner l'élément dans le sens du mouvement en utilisant l'attribut de rotation . Il accepte 3 types de valeurs: auto , auto-reverse et un nombre indiquant la rotation en degrés

 <animateMotion rotate="auto" .../> 

Par défaut, la rotation est de 0. Toute valeur numérique capture l'angle tout au long de l'animation. Les modes automatiques auto et auto-reverse modifient l'angle de rotation de l'élément, respectivement, tangent à la trajectoire. Et ils diffèrent dans le sens de cette tangente. En auto, il est dirigé vers l'avant, tandis qu'en auto-reverse , il est dirigé vers l'arrière.


Comment contrôler le mouvement le long du chemin?

La trajectoire est une courbe qui a un début et une fin, ces points sont désignés par les nombres 0 et 1, respectivement. Toute position sur la courbe peut être déterminée par un nombre dans cette plage. En répertoriant les points dans l'attribut keyPoints , vous pouvez définir tout type de mouvement le long du chemin. Mais cela ne suffit pas pour contrôler le mouvement, pour cela vous avez besoin de tout un système d'attributs.

Vous devez d'abord définir calcMode sur linéaire ou spline . Contrairement à d'autres balises, animateMotion par défaut est stimulé (pour une raison quelconque, l'animation ne veut pas fonctionner dans ce mode). Vous devez également spécifier un attribut.keyTimes . Ce n'est qu'en suivant ces étapes que l'animation fonctionnera comme il se doit

 <animateMotion keyPoints="0.5; 1; 0; 0.5" keyTimes="0; 0.25; 0.75; 1" calcMode="linear" .../> 

Dans l'exemple, l'animation commence au milieu du chemin, se déplace à la fin, puis au début, et termine à nouveau le mouvement au milieu

PS

En traitant avec animateMotion , je suis tombé sur des informations selon lesquelles la même chose peut, comme, être faite sur CSS. Mais à la fin de cet article, je n'avais ni la force ni l'envie de traiter cela. Pour les passionnés, je laisse juste un lien vers la documentation.

Remerciements spéciaux

Bhudh pour l'énorme travail de correction de l'article