Share
Dans ce didacticiel, nous allons présenter Snap.svg, une bibliothèque JavaScript qui aide à l’animation et à la manipulation du contenu SVG. Pour illustrer certaines des fonctionnalités disponibles, nous allons animer un œil SVG..
Snap.svg est une bibliothèque JavaScript qui facilite la création et la manipulation de graphiques SVG pour les navigateurs modernes. C'est le successeur de Raphaël de Dmitry Baranovskiy; la bibliothèque Javascript la plus populaire pour travailler avec SVG.
Raphäel.js est une super bibliothèque. Publié en 2008, sa plus grande victoire a été son support pour les navigateurs à partir de IE 5.5. Cependant, prendre en charge autant de navigateurs était contraignant et empêchait de mettre en œuvre les derniers développements, mais reposait sur un sous-ensemble commun de fonctionnalités SVG..
Après un certain temps, la communauté Raphäel.js s'est divisée en deux, un groupe qui s'en est inspiré pour la compatibilité entre navigateurs et un autre qui l'a utilisé pour créer des SVG. Ce dernier groupe a demandé des modifications pour prendre en charge davantage de fonctionnalités SVG que Raphäel.js ne pouvait pas gérer..
Ainsi, Snap.svg a été construit, entièrement écrit à partir de rien par Dmitry Baranovskiy (de l'équipe Adobe Web Platform), afin de travailler plus facilement avec SVG et d'utiliser les dernières nouveautés proposées par SVG; des fonctionnalités telles que le masquage, les motifs, les dégradés, les groupes, les animations, etc..
Jetez un coup d'œil à la documentation de leur API et vous verrez des fonctionnalités telles que masque, groupe, dégradé, filtre, animation et motif, que vous pourrez appliquer aux SVG..
Snap.svg vous aidera à générer des graphiques, mais il peut également fonctionner avec des SVG existants. Cela signifie que votre contenu SVG ne doit pas nécessairement être créé avec Snap.svg, vous êtes également libre de manipuler des graphiques créés avec des outils tels que Adobe Illustrator, Inkscape ou Sketch..
Tout d'abord, vous devez télécharger Snap.svg. Ceci fait, vous trouverez les éléments suivants dans les archives:
Après avoir téléchargé les ressources Snap.svg, commencez un nouveau projet Web qui doit inclure:
Créez un modèle HTML et faites référence aux scripts "scripts / snap.svg.js" et "scripts / main.js" quelque part sur votre page..
Après cela, placez un conteneur à l'intérieur du et donnez-lui un identifiant. Vous devriez avoir quelque chose comme ça:
Présentation de Snap.svg
Passons maintenant directement au codage. Pour suivre, vous aurez besoin de connaissances de base en JavaScript et de compréhension, mais cela n'a pas d'importance, car nous n'allons pas trop loin avec ce tutoriel..
Tout d'abord, nous allons initialiser Snap, en pointant vers le svg vient de créer et l'assigne à une variable. Dans notre cas, la variable s'appelle s
Accentsconagua
var s = Snap ("# svg");A partir de maintenant, dans le s variable, nous aurons accès à toutes les méthodes Snap.svg. Par exemple, disons que nous voulons créer un cercle ou un rectangle.
// Cercle de rayon 80px var circle = s.circle (90,120,80); // Square avec une largeur de côté de 160px var square = s.rect (210,40,160,160); // Ellipse avec rayon vertical 80px et rayon horizontal 50px var ellipse = s.ellipse (460, 120, 50, 80);
Le code ci-dessus générera le résultat suivant:
Comme vous pouvez le voir sur la capture d'écran ci-jointe, les formes ont par défaut un # 000 Couleur de remplissage (noir) sans autre style. Interagissons avec eux et ajoutons d'autres attributs de style, tels que la couleur de remplissage, l'opacité du remplissage, la couleur du trait, la largeur du trait, l'opacité du trait. Vous pouvez vérifier les attributs SVG pour plus de détails.
circle.attr (remplissage: 'corail', contour: 'corail', strokeOpacity: .3, strokeWidth: 10); square.attr (remplissage: 'lightblue', contour: 'lightblue', strokeOpacity: .3, strokeWidth: 10); ellipse.attr (remplissage: 'mediumturquoise', contour: 'mediumturquoise', strokeOpacity: .2, strokeWidth: 10);
Ces attributs ont rendu nos formes de svg beaucoup plus jolies!
Prenons notre exemple et allons au-delà des bases.
Snap.svg utilise une arme puissante appelée groupe, qui, comme son nom l'indique, regroupe les vecteurs, ce qui en fait une seule forme. Vous pouvez regrouper autant de formes que vous le souhaitez en les ajoutant sous forme de liste..
Créons deux cercles, regroupons-les et réduisons le remplissage de chaque cercle pour visualiser plus clairement ce qui se passe..
var circle_1 = s.circle (200, 200, 140); var circle_2 = s.circle (150, 200, 140); var cercles = s.group (circle_1, circle_2); cercles.attr (remplissage: 'corail', fillOpacity: .6);
Disons maintenant que nous voulons créer un œil imaginaire en utilisant les éléments groupés que nous avons déjà créés. Nous pouvons le faire en utilisant un masque. Nous devons d’abord créer une ellipse supplémentaire et la placer au milieu du groupe..
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); var cercles = s.group (circle_1, circle_2); ellipse var = s.ellipse (275, 220, 170, 90); cercles.attr (remplissage: 'corail', fillOpacity: .6,); ellipse.attr (opacity: .4);
Nous devons maintenant masquer les cercles avec notre ellipse, en ajoutant une couleur de remplissage différente à l’ellipse:
cercles.attr (remplissage: 'corail', remplissageOpacité: .6, masque: ellipse); ellipse.attr (remplissage: '#fff', opacité: .8);
En continuant avec notre exemple, nous pouvons faire clignoter cet œil en ajoutant une méthode animée. Pour animer l'ellipse que nous venons de créer, nous allons modifier le rayon vertical de 1 à 90 (qui est la valeur actuelle) et retour.
Créez l'animation et enroulez-la dans une fonction appelée cligner.
function blink () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90, 300);); ;
Cela indique que nous allons animer de ry: 90 à ry: 1 et de ry: 90 à ry: 1 avec un timing différent.
Maintenant, créez un setInterval appeler le clignerméthode une fois toutes les trois secondes, afin de créer un effet clignotant.
setInterval (clignotement, 3000);
Le code final devrait ressembler à ceci:
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); // Regrouper des cercles var circles = s.group (circle_1, circle_2); ellipse var = s.ellipse (275, 220, 170, 90); // Ajoute de la couleur et de l'opacité au cercle et applique // le masque circles.attr (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (remplissage: '#fff', opacité: .8); // Crée un effet de clignotement en modifiant la valeur de rx // pour une ellipse de 90px à 1px et en arrière blink () ellipse.animate (ry: 1), 220, function () ellipse.animate (ry: 90 , 300);); ; // Rappelle la méthode de clignotement une fois toutes les 3 secondes. SetInterval (blink, 3000);
Comme mentionné précédemment, ces fonctionnalités sont prises en charge par les navigateurs modernes: IE9+, Safari, Chrome, Firefox et Opera.
Snap.svg est disponible sous licence Apache 2, ce qui signifie qu'il est complètement open-source et totalement gratuit..
Snap.svg abaisse la barrière pour une manipulation SVG assez étonnante. J'espère que vous avez aimé suivre et que cela vous a incité à approfondir vos connaissances sur SVG!
