Une petite expérience qui explore l'utilisation d'animations de dessins au trait SVG qui précèdent l'apparition de graphiques ou d'éléments de site, simulant leur chargement.

Sources de démonstration

Alors, quel concept explorons-nous ? La première consiste à dessiner des lignes d'animation qui disparaissent dans l'image ou l'illustration « réelle » dès que la forme correspondante se trouve dans la zone de visualisation. Cela peut être un excellent effet pour tout type d’illustration de site Web. Le deuxième concept explore l'utilisation de l'animation SVG pour simuler le chargement d'un site Web : des parties du site sont représentées par des dessins à plat de contours qui sont animés, et une fois l'animation terminée, les « vrais » éléments sont affichés. La technique elle-même est implémentée de manière statique, où nous utilisons SVG pour chacun des éléments qui disparaissent. Les idées pour le diagramme du site proviennent d'un superbe cliché Dribbble de Chris Bannister.

De belles illustrations des appareils sont réalisées par Pixeden, fichiers PSD que vous pouvez retrouver ici :

Les dessins au trait SVG de ces illustrations ont été soigneusement créés par le talentueux Emanuel Serbanoiu. Consultez son profil Dribbble ou visitez son site Web.
La première démo consiste à dessiner des lignes d'animation avec une illustration en fondu :

La deuxième démo dessine des lignes pour l'animation en fondu du site Web :

Et la troisième démo, similaire à la démo 2, seule l'animation et le fondu des éléments se produisent séquentiellement, mais dans un intervalle de temps aléatoire :

Nous espérons que vous avez aimé les effets et que vous y avez trouvé l'inspiration !

Sources de démonstration

Traduit pour le site wordpress-club.com : Alexandre Ovcharenko

5 janvier 2014 à 16h27

Animation de l'élément de chemin SVG

• Développement de sites Web,
• Visualisation de données

• Didacticiel

Je pense que beaucoup ont vu des critiques de consoles de jeux de nouvelle génération de Polygone (Vox Media). Voici celles où les consoles ont été dessinées à la manière d'un plan :

Les critiques semblaient sympas, assez inhabituelles et nouvelles. Vous pouvez découvrir sous la coupe comment la principale caractéristique des critiques est implémentée - l'animation SVG, comment faire quelque chose de similaire vous-même et quelles autres capacités « secrètes » le bon vieux SVG cache en termes d'animation de l'élément de chemin.

Interpolation Stroke-Dasharray, théorie

En général, la technique d'une telle animation en ligne n'est pas nouvelle, c'est juste que jusqu'à récemment, SVG et tout ce qui s'y rapporte, à mon avis, était injustement voué à l'oubli, mais heureusement, la situation est en train de changer. Ainsi, l’astuce pour animer l’élément path est possible grâce à la propriété Stroke-Dasharray de l’élément Path. Cette propriété permet de définir les paramètres d'une ligne pointillée, à savoir la longueur du trait et l'espace entre les traits. Si nous définissons la longueur du trait égale à toute la longueur de la ligne, nous obtenons une ligne continue ordinaire. Si nous définissons la longueur du trait égale à zéro et la longueur de l'espace à nouveau égale à toute la longueur de la ligne, nous obtenons alors une ligne invisible. Et en augmentant progressivement la longueur du trait avec une longueur d'intervalle égale à la longueur de la ligne entière, nous pouvons simuler son dessin. Avec cette approche, le dessin se fera dès le début de la ligne. Si vous avez soudainement besoin de dessiner à partir de la fin, vous devez alors utiliser une propriété supplémentaire : Stroke-dashoffset . Cette propriété spécifie le décalage du premier trait. Ainsi, en diminuant le décalage et en augmentant la longueur du trait, on obtient un dessin à partir de la fin de la ligne.

Les gars de Vox Média ils ont utilisé une option hybride (qui, à mon avis, est redondante), d'ailleurs, vous pouvez (et devriez) lire comment ils ont fait cela sur leur blog : Polygon feature design : animations SVG pour le plaisir et le profit.

Implémentation de l'animation SVG

DANS Vox Média ils suggèrent d'utiliser requestAnimationFrame pour une animation fluide, mais nous avons des objectifs légèrement différents, nous allons donc emprunter un itinéraire plus simple, utiliser la bibliothèque D3.js et l'animation basée sur la durée qui y est implémentée.

Voici le code de travail réel utilisé pour animer la console depuis le début de l'article.

Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); function ready(error, xml) ( //Ajout de notre fichier svg au document HTML var importéNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("largeur"), svgHeight = svg.attr("hauteur"); var paths = svg.selectAll("chemin") .call(transition) ; fonction transition(chemin) ( path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() ( d3.select(this).call(transition) ; )); // boucle infinie ) fonction tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolation du trait -dasharray attr return function(t) ( return i(t); ); ) )

Commençons par nous déplacer simplement le long de la ligne, sans tourner pour l'instant.

Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(ready); function ready(error, xml) ( //Ajout de notre fichier svg au document HTML var importéNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var chemin = svg.select("chemin#wiggle"), startPoint = cheminStartPoint(chemin); var marqueur = svg.append("cercle"); marqueur.attr(" r", 7).attr("transform", "translate(" + startPoint + ")"); transition(); //Obtenir le point de départ du chemin pour placer le marqueur, fonction pathStartPoint(path) ( var d = path.attr( "d"), dsplitted = d.split(" "); return dsplitted.split(","); ) function transition() ( Marker.transition() .duration(7500) .attrTween("transform", translateAlong( path.node())) .each("end", transition);// boucle infinie ) function translateAlong(path) ( var l = path.getTotalLength(); return function(i) ( return function(t) ( var p = path.getPointAtLength(t * l); return "translate(" + p.x + "," + p.y + ")";//Déplacer le marqueur ) ) ) )
Ici, pathStartPoint(path) extrait les coordonnées du début de la ligne à partir de l'attribut de l'élément path. Dans TranslateAlong(path), les coordonnées de notre marqueur sont définies à l'aide d'un interpolateur. Un exemple peut être vu ici : Animation de marqueur le long d'un élément de chemin SVG avec D3.js. Vous pouvez également combiner une animation de dessin au trait et un mouvement de marqueur ; cela pourrait ressembler à ceci : Animation de marqueur le long d'un élément de chemin SVG avec D3.js II .

Compliquons la tâche, ajoutons une rotation (enfin, et changeons le marqueur d'un cercle en quelque chose de plus intéressant). Comme marqueur, nous aurons une fusée d'une largeur de 48 et d'une longueur de 24. Étant donné que le point d'ancrage par défaut du marqueur est le coin supérieur gauche, nous devons le décaler pour qu'il s'aligne sur le centre du marqueur. Vous devez également en tenir compte lors de la rotation, car cela se produit également par défaut autour du coin supérieur gauche. Il semble que nous ayons réglé le problème du déplacement. Passons maintenant directement à la rotation, ici la définition d'une tangente nous aidera, nous déterminerons l'angle à l'aide de l'arctangente.

La fonction translateAlong(path) définissant l'interpolateur ressemblera à ceci :

Fonction translateAlong(path) ( var l = path.getTotalLength(); var t0 = 0; return function(i) ( return function(t) ( var p0 = path.getPointAtLength(t0 * l);//point précédent var p = path.getPointAtLength(t * l);////point actuel var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//angle pour la tangente t0 = t ; //Déplacement du centre vers le centre de la fusée var centerX = p.x - 24, centerY = p.y - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12 "+""; ) ) )
La mise en œuvre peut être consultée ici.

Nous avons longtemps promis de faire une vidéo sur l'animation des éléments SVG sur les pages, mais cela n'a jamais fonctionné. Aujourd'hui, nous avons enfin le plaisir de vous présenter la première vidéo de la série, dans laquelle nous vous parlerons des options d'animation SVG : utilisation de CSS, SMIL et JavaScript (en utilisant Snap.svg comme exemple).

En fait, avec cette vidéo, c'était comme avec les Mistral. Il n'y avait aucune circonstance pour l'enregistrement. Eh bien, maintenant, c’est enfin réglé.

Animations SVG

Essayons encore une fois de tout rassembler avec des liens. Il existe trois manières d'animer des éléments SVG sur une page, dont deux s'appliquent également aux éléments HTML. Je parle bien sûr des animations CSS et JavaScript. Mais pour SVG, vous pouvez également utiliser des animations SMIL (Synchronized Multimedia Integration Language).

Animations SMIL

C'est une technologie très intéressante si nous devons animer des chemins et en même temps stocker le tout dans un seul fichier SVG. Oui, des animations CSS peuvent également être incluses dans le fichier, mais elles ne peuvent pas être utilisées pour animer l'attribut d des chemins, donc SMIL s'avère être une technologie beaucoup plus intéressante. En fait, JavaScript peut également être inclus directement dans les fichiers SVG, mais la prise en charge du navigateur est un peu différente, vous devez donc réfléchir à quoi et comment l'utiliser.

SMIL est supporté dans tous les navigateurs depuis des temps immémoriaux (premières versions), à l'exception d'Internet Explorer, qui ne supporte pas ces animations jusqu'à présent.

Animations CSS

Tout est très clair ici, nous avons depuis longtemps l'habitude d'utiliser CSS pour de petites animations d'éléments HTML. La même chose peut être faite avec SVG : la plupart des attributs peuvent être animés et la prise en charge du navigateur est bien meilleure. Eh bien, parce qu'au moins Internet Exporer 10 a découvert un phénomène tel que les animations CSS.

Animations Javascript

La solution la plus fiable et la plus pratique, comme toujours, est JavaScript, il n'y a pas d'échappatoire. Lorsque vous travaillez avec des interfaces, c'est la seule option pour créer un script. Heureusement, il existe déjà de nombreuses bibliothèques permettant de travailler avec SVG.

Certains incluent même des fonctionnalités d'animation, comme Snap.svg. Je recommanderais cette bibliothèque à tout le monde, même si beaucoup sont habitués à travailler avec Velocity.js, cette approche a aussi le droit d'exister.

Dans la conception Web moderne, on ne peut s'empêcher de remarquer la popularité de l'animation utilisant CSS et SVG. En effet, l’animation des éléments de sites Web connaît aujourd’hui une renaissance. de nombreux effets utilisés sont devenus plus utiles pour l'utilisateur et semblent plus corrects du point de vue de la convivialité de la ressource Web et de l'UX. Les technologies ont simplifié les tâches complexes d'animation de graphiques et d'éléments sans sacrifier les performances du site Web (comme ce fut le cas avec Flash). De plus, cela ne nécessite rien de compliquer, et même une simple animation de page peut obtenir des résultats impressionnants et rendre le site plus impressionnant.

L'animation a toujours occupé une place particulière dans la créativité du design et a attiré aussi bien les développeurs débutants que professionnels. Maintenant que l'individualité et le caractère unique des effets spéciaux sont à la mode, il est temps de prêter attention aux capacités modernes de CSS, ainsi que de SVG. Avec la résolution d’écran accrue de tous types d’appareils, l’intérêt de faire évoluer les éléments Web sans perte de qualité est compréhensible. La chose la plus intéressante dans la créativité Web moderne est qu’il est tout à fait possible de créer soi-même des effets d’animation élégants.

Cette sélection de belles et modernes animations SVG/CSS décrit brièvement les principaux points de mise en œuvre. Pour un exemple visuel et une inspiration : sites utilisant ces effets.

01. Bulles pop-up

Exemple d'application sur le site : 7UP
Code complet sur CodePen

L'animation des bulles CSS sur 7UP est géniale. Le processus d'animation se compose de plusieurs parties : le rendu SVG, puis l'animation de chaque bulle en deux étapes.

La première animation modifie la transparence et élève les bulles vers le haut de la fenêtre, tandis que la seconde ajoute des vibrations réalistes. La libération et le mouvement se produisent de manière chaotique avec des délais et des durées variables. En utilisant SVG, deux calques sont créés - pour les grandes et les petites bulles.

... ...

Cette méthode d'animation fractionnée en SVG nécessitera une animation élément par élément. Un élément SVG peut être utilisé de la même manière qu'un DIV en HTML ; nous devons envelopper chaque bulle dans une balise de regroupement.

CSS offre de puissantes capacités d'animation et son code très simple crée des effets complexes. Pour les bulles remontant sur l'écran, nous modifions la transparence jusqu'à ce qu'elles disparaissent complètement.

@keyframes en place( 0% ( opacité : 0; ) 10%, 90% ( opacité : 1; ) 100% ( opacité : 0; transform : translationY (-1024px) ; ) )

Pour créer une oscillation, il vous suffit d'ajouter du mouvement à gauche et à droite - suffisamment pour remarquer l'effet, mais pas plus.

@keyframes vacille( 33% ( transformation : traduireX (-50px) ; ) 66% ( transformation : traduireX (50px) ; ) )

L'animation des bulles nécessitera l'utilisation des groupes et des nièmes de type précédemment appliqués pour identifier les groupes individuels. Dans un souci d'accélération matérielle, nous utiliserons la valeur de transparence et la propriété will-change.

.bubbles-large > g ( opacité : 0; will-change : transformation, opacité; ) ( ...) ... .bubbles-small g:ntième-de-type(10) { ...}

Pour définir la durée et les délais de l'animation, il est préférable de la limiter à quelques secondes et de la répéter à l'infini. De plus, nous utilisons la fonction de synchronisation facilitée pour rapprocher le look du naturel.

.bubbles-large g:ntième-de-type(1)(animation : jusqu'à 6,5s infinies ; ) .bubbles-large g:ntième-de-type(1) cercle( animation : wobble 3s facilité d'entrée et de sortie infinie ; ) ... bulles-petit cercle g:ntième-de-type(9)( animation : oscillation 3s 275ms facilité d'entrée-sortie infinie ; ) .bubbles-small g:ntième-de-type(10)( animation : jusqu'à 6s 900ms infini ; )

02. Icône de défilement

Exemple d'application sur le site Internet : Baltic Training
Coder sur CodePen

Il faut montrer au visiteur qu'il y a du contenu ci-dessous. Nous mettons en œuvre une invitation au défilement avec une légère animation de l'icône de la souris. Bien que ce problème puisse être résolu avec des éléments HTML, nous utilisons les constructions SVG les plus appropriées. Créez un rectangle arrondi et un élément circulaire que nous animerons. L’avantage du SVG est son évolutivité.

Les styles sont appliqués à l'icône SVG créée pour déterminer sa taille et son emplacement dans le conteneur. Nous lions le lien et plaçons l'icône en bas de l'écran.

Commençons par animer l'icône. Nous fixons le début du mouvement : de 0 à 20 pour cent. Pour son intervalle, 20 % sont appliqués par répétition sans fin.

Défilement des @keyframes( 0%, 20% ( transformer : translationY (0) scaleY (1) ; ) )

Ajoutez de la transparence le long de la verticale Y, en utilisant 100 % au point final du mouvement animé pour faire disparaître le cercle.

Défilement des @keyframes( ... 10% ( opacité : 1; ) 100% ( transform : translationY (36px) scaleY (2); opacité : 0.01; ) )

Enfin, nous appliquons l'animation avec un code assez clair. La fonction de synchronisation cubique-bézier est utilisée pour ramener le cercle vers le haut.

.scroll ( nom de l'animation : défilement ; durée de l'animation : 1,5 s ; fonction de synchronisation de l'animation : bézier cubique (0,650, -0,550, 0,250, 1,500) ; nombre d'itérations d'animation : infini ; origine de la transformation : 50 % 20,5px ; changera : transformer ; )

03. Inscription apparaissant progressivement

Avec un préchargement animé, Toy Fight démontre son , en appliquant l'effet d'apparition progressive de lettres manuscrites. Voyons implémenter l'effet en utilisant SVG. Il existe deux options : animer la légende et utiliser du texte SVG. Chaque méthode a ses propres avantages et inconvénients.

L'animation d'images clés est créée à l'aide de Stroke-dashoffset , Stroke-dasharray . Nous obtenons l'effet de l'écriture manuscrite. Ici, nous nous tournons vers Sass/SCSS et le nième de type.

Masquage ( transformation : échelle (0); transformation-origine : 50 % 50 % ; changement de volonté : transformation ; )

Encore une fois, le langage SVG est utilisé pour créer des formes, des motifs et des masques. Une fois cela fait, nous utilisons le CSS et préparons tout pour l'animation.

@keyframes scale ( 0%, 50% ( opacity: 1; ) 80% ( opacity: 0; ) 100% ( transform: scale(1.4); opacity: 0; ) ) Enfin, nous devons appliquer l'animation au masque ; .masking ( ... animation : échelle 4s linéaire infinie ; )

05. Oiseaux volants

Exemple d'application sur le site : Père et Fils
Options avec un seul oiseau et une volée d'oiseaux

Nous commencerons par une approche entièrement vectorielle, en dessinant chaque forme pour notre animation, en dessinant les différentes phases du vol de l'oiseau. Cela aidera à manipuler le placement des vecteurs et des lignes avec des contours. De ce fait, les formulaires sont placés les uns après les autres dans des cases de taille appropriée. Nous exportons le fichier au format SVG.

Le code HTML est très simple. Tout ce que vous avez à faire est d'emballer chaque oiseau dans un conteneur, permettant ainsi plusieurs animations - une pour faire voler l'oiseau et une autre pour le faire voler à travers l'écran.

Nous utilisons notre SVG comme arrière-plan du div oiseau et sélectionnons les tailles de forme. Nous utilisons la largeur pour calculer grossièrement le positionnement en arrière-plan. Nous décuplons la largeur, puis ajustons le nombre pour l'adapter.

Oiseau (image d'arrière-plan : url("bird.svg"); taille d'arrière-plan : auto 100 % ; largeur : 88 px ; hauteur : 125 px ; changement : position d'arrière-plan ; ) @keyframes fly-cycle ( 100 % (arrière-plan -position : -900px 0 ; ) )

Pour l'animation - quelques astuces CSS qui ne vous sont peut-être pas familières. La fonction de synchronisation d'animation est utilisée pour un affichage étape par étape - de la même manière que les pages avec une image sont feuilletées dans un bloc-notes pour la « faire revivre ».

Nom de l'animation : cycle de vol ; fonction de synchronisation d'animation : étapes (10); nombre d'itérations d'animation : infini ; durée de l'animation : 1 s ; délai d'animation : -0,5 s ;

Maintenant que le cycle de vol est créé, l’oiseau bat des ailes, mais reste en place. Le déplacement sur l'écran est déterminé par une autre animation d'image clé. Les oiseaux se déplacent horizontalement sur l'écran, modifiant leur hauteur verticale dans une certaine plage (pour plus de réalisme).

L'animation de l'icône du hamburger est souvent trouvée sur les sites Web modernes : les lignes se croisent/se retournent, ou l'icône change de forme. Jusqu'à récemment, cet effet était obtenu à l'aide d'éléments HTML, mais le format SVG est mieux adapté à cette tâche. Il n'est plus nécessaire de gonfler votre code avec plusieurs étendues.

En raison des caractéristiques de l'animation, le code SVG n'a pas beaucoup changé - les techniques sont les mêmes. Vous devez d’abord utiliser quatre éléments : des étendues dans le cas d’un div ou des chemins dans le cas d’un SVG. Lors de l'utilisation de spans, le positionnement à l'intérieur du div est résolu à l'aide de CSS (en SVG, ce problème a déjà été résolu).

Nous plaçons les lignes 2 et 3 au centre - l'une au-dessus de l'autre, et les lignes 1 et 4 - au-dessus et en dessous. Deux propriétés sont utilisées ici : l'opacité et la rotation. Tout d'abord, nous avons besoin que les lignes 1 et 4 disparaissent - pour cela nous utiliserons le selector:nth-child .

Menu-icon.is-active (type-d'élément):nth-child(1), .menu-icon.is-active (type d'élément):nth-child(4) ( opacité : 0; )

Il reste à faire pivoter les lignes les unes vers les autres de 45 degrés.

Menu-icon.is-active (type d'élément):nth-child(2) ( transformation : rotation (45deg); ) .menu-icon.is-active (type d'élément) :nth-child(3) ( transformation : rotation (-45deg); )

07. Télécharger le préchargeur

L'icône de préchargement se compose de quatre cercles de couleur alternée.

En CSS, nous appliquons des styles de base aux cercles, puis utilisons le sélecteur :nth-of-type pour attribuer à chaque cercle des valeurs de trait-dasharray différentes. Avec « facilité d'entrée », l'animation de préchargement aura l'air plus amusante.

Cercle: nième de type (1) ( trait-dasharray: 550; ) cercle: nième de type (2) ( trait-dasharray: 500; ) cercle: nième de type (3) ( trait-dasharray : 450;) cercle: nième-de-type (4) ( trait-dasharray: 300; )

Nous avons maintenant besoin d'une animation par images clés. C'est simple : il suffit de faire pivoter le cercle de 360 ​​​​degrés. Appliquez l'animation à 50% et remettez le cercle à sa position d'origine.

Préchargeur @keyframes ( 50% ( transform: rotate(360deg); ) )

Il ne reste plus qu'à exécuter l'animation créée avec les paramètres nécessaires. Nous lui donnons un nom, définissons la durée, le nombre d'itérations et appliquons la fonction de timing.

Nom de l'animation : préchargeur ; durée de l'animation : 3 s ; nombre d'itérations d'animation : infini ; fonction de synchronisation d'animation : facilité d'entrée ;

Le préchargeur circulaire fonctionne, mais ses pièces tournent en même temps. Corrigeons cela en ajoutant un délai, utilisez Sass pour la boucle.

@for $i de 1 à 4 ( &:nth-of-type(#($i)) ( animation-delay: #($i * 0.15)s; ) )

Grâce aux retards, les cercles tournent un à un, se rattrapant. Le seul problème est qu'au départ, lorsque la page est chargée, certaines parties du chargeur commencent à se déplacer de manière synchrone. Pour compenser cela sans provoquer de retards indésirables au début, nous définissons simplement la valeur du retard sur une valeur négative.

Délai d'animation : -#($i * 0,15)s ;

Ils s'intègrent très bien dans la conception Web moderne grâce à leur légèreté et sont affichés avec une haute qualité. Moniteurs rétine.
Une façon de créer efficacement des graphiques et des animations SVG consiste à utiliser bibliothèques. Ils vous permettent de créer des choses simples et complexes Animations SVG en commençant par la rotation des objets, en changeant leurs tailles et leurs formes pour créer une intrigue animée à part entière. Objets d'animation vectorielle Ceux-ci peuvent inclure du texte, des images, une interface utilisateur, un logo, etc. Vous trouverez ci-dessous quelques bibliothèques qui facilitent le travail avec l'animation SVG.
Abonnez-vous au groupe et restez à l'écoute des mises à jour.

Rapidité

L'une des bibliothèques les plus populaires qui donne vie aux graphiques. L'objectif principal de Velocity est lecture d'animation rapide. Pour ceux qui sont familiers avec l'animation dans , la bibliothèque ne posera aucune difficulté à son utilisation. La bibliothèque utilise une API comme jQuery $.animer().
La particularité de la bibliothèque est qu'elle prend entièrement en charge l'animation des éléments SVG, y compris des propriétés telles que x, rx, largeur de trait etc. Travailler avec la couleur est également pris en charge.

SVG.JS

Poids léger bibliothèque pour travailler avec des graphiques vectoriels. Prend en charge l'animation avec position, taille, couleur et transformation. SVG.JS inclut également la possibilité de lier des événements à des éléments, de créer un dégradé dynamique, de définir la transparence et de personnaliser l'animation du texte.

Passerelle

Poids léger bibliothèque pour dessiner des lignes et des polygones. Éléments de support de passerelle chemin, ligne Et polyligne. Ayant une direction si étroite, il remplit bien sa fonction.

Raphaël.JS

Petit bibliothèque pour simplifier le travail avec des graphiques vectoriels. Conformément aux directives SVG du W3C, chaque objet graphique devient également un objet DOM, permettant de le modifier ultérieurement à l'aide de JavaScript. Très bonne prise en charge des navigateurs, y compris les versions d'IE6 et supérieures.

Snap.Svg

Snap.Svg a une API JavaScript simple créer une animation et rend le contenu plus attractif. La bibliothèque peut être utilisée pour Animations SVG, créé à l'aide de programmes graphiques tels qu'Illustrator, Inkscape ou Sketch. Snap.svg est open source et distribué sous la licence Apache 2.

Bonsaï

Bonsai comprend un ensemble complet d'outils pour travailler avec des graphiques et des animations. Il dispose d'une API graphique qui facilite la création d'animations SVG.
Vous pouvez visualiser toutes les fonctions de Bonsai dans l'éditeur en ligne. Une bibliothèque très puissante avec laquelle il est amusant de travailler.

Peintre de lignes paresseuses

Petit plugin pour l'animation de dessin au trait SVG. Il fait bien son travail et avec style. Vous devez passer par trois étapes pour obtenir l'animation terminée : exporter l'animation linéaire depuis Illustrator sous forme de fichier svg, l'insérer dans le convertisseur sur le site Web et obtenir le code JS terminé.

Vivus

Très fort bibliothèque de dessins au trait. Permet de choisir le style d'animation des lignes : différée, asynchrone ou l'une après l'autre. Regardez l'exemple sur le site de la bibliothèque et vous comprendrez tout. Pour les images plus complexes, il vous permet de définir un script de dessin.