Share
Le didacticiel précédent de la série vous a montré comment animer différentes propriétés CSS d'un élément à l'aide de KUTE.js. Cependant, le moteur principal ne vous permet pas d'animer des propriétés spécifiques aux éléments SVG. De même, vous ne pouvez pas animer le morphing SVG de différentes formes de chemin ou le dessin de différents éléments SVG à l'aide de traits. Vous devrez utiliser le plug-in SVG KUTE.js pour accomplir ces tâches..
Avant de commencer, n'oubliez pas que vous devrez inclure à la fois le moteur principal KUTE.js et le plug-in SVG pour que les exemples de ce tutoriel fonctionnent..
Morphing une forme SVG dans une autre est une caractéristique très commune que vous rencontrerez. Le plugin KUTE.js SVG nous donne tout ce dont nous avons besoin pour créer nos propres animations de morphing avec facilité.
Il existe trois façons de transformer des formes SVG à l'aide de cette bibliothèque:
Accentsconagua
de à() méthode pour spécifier le chemin SVG initial et final de votre élément. à() méthode et évitez de spécifier le chemin initial. Dans ce cas, la valeur de départ pour le morphing sera déterminée en fonction de la valeur du ré attribut de l'élément sélectionné que vous voulez transformer. KUTE.fromTo ('# forme-a', chemin: '# forme-a', chemin: '# forme-b'); KUTE.to ('# forme-a', chemin: '# forme-b'); KUTE.fromTo ('# forme-a', chemin: '# forme-a', chemin: 'Le chemin de # forme-b en tant que chaîne valide.'); KUTE.to ('# forme-a', chemin: 'le chemin de # forme-b en tant que chaîne valide.');Lors de l'initialisation, la bibliothèque échantillonne certains points en fonction des chemins que nous avons fournis. Ces points sont ensuite stockés dans deux tableaux différents. Enfin, ces tableaux sont utilisés pour l'interpolation. Vous pouvez configurer un certain nombre d’options pour contrôler le comportement du morphing pour différents chemins..
morphPrecision: Comme vous l'avez peut-être deviné, cette option vous permet de spécifier la précision ou l'exactitude du morphing. Il est spécifié sous forme de nombre et une valeur inférieure signifie une précision supérieure. Gardez à l'esprit qu'une précision plus élevée se traduira par une plus grande précision, mais sera également préjudiciable à la performance. Cette option ne s'applique pas lorsque vous utilisez des formes ou des chemins polygonaux où l'attribut d consiste uniquement en h, l, et v. Dans ce cas, les chemins de polygones d'origine sont utilisés au lieu d'échantillonner de nouveaux..reverseFirstPath: Vous pouvez définir la valeur de cette option sur vrai afin d'inverser le chemin de dessin pour votre première forme. Sa valeur par défaut est faux.reverseSecondPath: Vous pouvez définir la valeur de cette option sur vrai afin d'inverser le chemin de dessin pour votre deuxième forme. Sa valeur par défaut est aussi faux.morphIndex: Parfois, les points sur un chemin doivent couvrir une grande distance lors du morphing. Vous pouvez contrôler ce comportement en utilisant le morphIndex paramètre. Lorsqu'il est spécifié, ce paramètre vous permet de faire pivoter le chemin final de manière à ce que tous les points parcourent la distance la plus courte possible..Utilisons ce que nous avons appris jusqu’à présent pour transformer une icône de batterie en icône de signet. Vous devriez noter que j'ai utilisé des minuscules l afin de spécifier le chemin en termes relatifs. C'est le balisage requis:
Le code JavaScript suivant crée l’objet d’interpolation et lance l’animation lors d’un clic sur un bouton:
var morphA = KUTE.to ('# batterie-a', chemin: '# bookmark-a', durée: 5000); startButton.addEventListener ("click", function () morphA.start ();, false);Voici une démo qui montre le code ci-dessus en action. J'ai aussi ajouté un élément supplémentaire où l'animation morph met reverseFirstPath à vrai. Cela vous aidera à comprendre l'impact global des différentes options de configuration sur le morphing. La durée de l'animation a été réglée à 5 secondes pour que vous puissiez observer de près les animations et repérer les différences..
Dans l'exemple précédent, le chemin principal ne contenait aucun sous-chemin. Cela a rendu le morphing très simple. Cependant, cela pourrait ne pas toujours être le cas.
Ajoutons un sous-chemin supplémentaire à notre marque-page, ainsi que l'icône de la batterie. Si vous transformez les icônes maintenant, vous verrez que seul le premier sous-chemin s'anime. Le deuxième sous-chemin disparaît au début de l'animation et réapparaît à la fin. Dans ce cas, le seul moyen d'animer tous les sous-chemins consiste à les changer en chemins individuels. Voici un exemple:
Un autre effet d'animation lié à SVG populaire consiste à partir de rien, puis à dessiner une forme prédéfinie à l'aide de traits SVG. Cela peut être utilisé pour animer le dessin de logos ou d’autres objets. Dans cette section, vous apprendrez à utiliser KUTE.js pour créer une animation de courses pour l'icône de vélo Font Awesome.
Il existe trois façons d’animer des traits SVG dans KUTE.js. Vous pouvez animer de 0% à 100% en réglant la de à des valeurs comme 0% 0% et 0% 100%. Vous pouvez également dessiner une partie de la forme SVG en définissant les valeurs sur quelque chose comme 0% 5% et 95% 100%. Enfin, vous pouvez définir la valeur finale sur 0% 0% afin de créer un effet d'effacement au lieu d'un effet de dessin.
Voici le code JavaScript que j'ai utilisé pour animer notre vélo:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", draw: "0% 100%", durée: 10000); var partialAnimation = KUTE.fromTo ("#icon", draw: "0% 5%", draw: "95% 100%", durée: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", draw: "0% 0%", durée: 5000);Comme vous pouvez le voir dans l'exemple ci-dessous, vous n'avez pas à vous soucier de plusieurs sous-chemins dans un chemin. KUTE.js anime tous ces sous-chemins individuellement sans aucun problème. La durée de l'animation est utilisée pour déterminer l'heure de l'animation du plus long chemin. La durée du trait pour le reste des sous-chemins est ensuite déterminée en fonction de leur longueur..
Nous avons déjà appris à animer des valeurs de transformation CSS dans le deuxième tutoriel de la série. Le plugin KUTE.js SVG vous permet également d’utiliser le svgTransform attribut afin de faire pivoter, traduire, redimensionner ou incliner différents éléments SVG sur une page Web.
le tourner attribut accepte une valeur unique qui détermine l'angle de rotation. Par défaut, la rotation s'effectue autour du centre de l'élément, mais vous pouvez spécifier un nouveau centre de rotation à l'aide de la commande transformerOrigin attribut.
le Traduire attribut accepte les valeurs dans le format traduire: [x, y] ou traduire: x. Lorsqu'elle est fournie avec une valeur unique, la valeur de y est supposé être zéro.
Lorsque vous inclinez des éléments, vous devrez utiliser skewX et pince. Il n'y a pas de soutien pour oblique [x, y] en SVG. De même, le échelle attribut accepte également une seule valeur. La même valeur est utilisée pour redimensionner les éléments dans les directions x et y.
Voici un extrait de code qui applique toutes ces transformations à un rectangle et à un cercle..
var rotation = KUTE.allTo ("rect, circle", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rect, circle", svgTransform: scale: 1.5, repeat: 1, yoyo: true); var translation = KUTE.allTo ("rect, circle", svgTransform: translate: [100, -50], repeat: 1, yoyo: true); var skewing = KUTE.allTo ("rect, circle", svgTransform: skewX: 25, repeat: 1, yoyo: true);J'ai mis le yo-yo paramètre à vrai de sorte qu'après la lecture de l'animation en sens inverse, les propriétés de transformation sont définies sur leur valeur initiale. De cette façon, nous pouvons rejouer les animations encore et encore en cliquant sur les boutons.
Si vous appuyez sur le Tourner bouton dans la démo, vous remarquerez que cela ne semble pas avoir d’effet sur le cercle. Pour observer la rotation du cercle, vous devrez lui appliquer une transformation oblique afin de changer sa forme, puis cliquer sur faire pivoter immédiatement..
Nous avons commencé ce didacticiel en abordant les bases de la modélisation SVG et des animations de contour. Vous avez appris à transformer correctement des chemins complexes comportant des sous-chemins et à créer un effet de trait effacé au lieu d'un effet de dessin en choisissant les bonnes valeurs pour le motif. dessiner attribut. Après cela, nous avons discuté de la façon dont nous pouvons utiliser le svgTransform attribuer afin d'animer différentes transformations.
Dans divers tutoriels, nous avons vu à quel point le JavaScript était devenu puissant. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Le tutoriel avait pour but de vous présenter toutes les fonctionnalités du plug-in SVG KUTE.js et de vous aider à démarrer rapidement. Vous pouvez en apprendre plus sur le plugin SVG en lisant la documentation.
