Libérez la puissance des animations de chemin avec SVGator

(Cet article est sponsorisé.) L'année dernière, une introduction complète à l'utilisation de base de SVGator a été publiée ici dans Smashing Magazine. Si vous souhaitez en savoir plus sur les principes fondamentaux de SVGator, sur la configuration de vos premiers projets et sur la création de vos premières animations, nous vous recommandons vivement de le lire avant de poursuivre avec cet article.

Aujourd'hui, nous allons jeter un second regard sur explorez quelques-unes des nouvelles fonctionnalités ajoutées au cours des derniers mois, dont le tout nouveau Path Animator .

Note : Path Animator est une prime. SVGator n’est pas disponible pour les utilisateurs à l’essai. Au cours d'un essai de sept jours, vous pouvez voir le fonctionnement de Path Animator dans l'exemple de projet que vous trouverez dans l'application, mais vous ne pourrez pas l'appliquer à vos propres SVG à moins que vous n'ayez opté pour un paiement. plan. SVGator est un service basé sur un abonnement. Actuellement, vous pouvez choisir entre un forfait mensuel (18 USD / mois) et un forfait annuel (144 USD au total, 12 USD par mois). Pour les projets plus longs, nous vous recommandons d’envisager l’option annuelle.

Path Animator n’est que la première des fonctionnalités haut de gamme que SVGator prévoit de publier dans les prochains mois. Toutes les nouvelles fonctionnalités seront disponibles pour tous les utilisateurs payants, peu importe le moment de leur abonnement.

Les animations de Charm Of Path

Les animations de chemin SVG ne sont en aucun cas une nouveauté. Au cours des dernières années, cette méthode d’enrichissement en graphismes vectoriels a été largement utilisée sur le Web:

Les animations de chemin gagnent en popularité principalement à cause de leur relative simplicité: bien qu'elles puissent paraître impressionnantes et complexes au premier abord, la règle sous-jacente est en réalité très simple.

Comment les animations de chemin fonctionnent-elles?

Vous pourriez penser que les animations de chemin SVG nécessitent des fonctions de dessin et de transformation extrêmement compliquées. Mais c'est beaucoup plus simple qu'il n'y paraît. Pour obtenir des effets similaires à l'exemple ci-dessus, vous n'avez pas besoin de générer, dessiner ou animer les chemins réels, vous devez simplement animer leurs traits. Ce brillant concept vous permet de créer des animations apparemment complexes en animant un seul attribut SVG: stroke-dashoffset .

L'animation de cette unique propriété est responsable de la totalité de l'effet. Une fois que vous avez une ligne en pointillé, vous pouvez jouer avec la position des tirets et des espaces. Si vous le combinez avec les bons paramètres, vous obtiendrez l'effet souhaité d'un chemin SVG auto-dessiné.

Si cela vous semble encore assez mystérieux ou si vous souhaitez simplement apprendre à définir plus en détail les animations de chemin, vous trouverez des ressources utiles sur ce sujet à la fin de l'article.

Aussi simples que soient les animations de chemin comparées à leur apparence, il ne faut pas penser que les coder est toujours simple. Au fur et à mesure que vos fichiers deviennent plus compliqués, il en va de même pour les animer. Et c’est là que SVGator vient à la rescousse.

En outre, vous préférerez peut-être parfois ne pas toucher aux fichiers SVG bruts. Ou peut-être n'aimez-vous pas vraiment écrire du code? Ensuite, SVGator vous couvre. Avec le nouveau Path Animator, vous pouvez créer même les animations de chemin SVG les plus complexes sans toucher à une ligne de code. Vous pouvez également combiner le codage avec SVGator.

Pour mieux comprendre les possibilités que nous offre Path Animator, nous allons couvrir trois exemples distincts présentant différents cas d'utilisation des animations de chemin.

Exemple n ° 1: Texte animé

Dans Dans le premier exemple, nous animerons un texte pour créer l’impression de lettres auto-écrites.

Souvent utilisé pour le lettrage, cet effet mignon peut également être appliqué à d'autres éléments, tels que des dessins et des illustrations. Il y a cependant un inconvénient: l'élément animé doit être stylisé avec des traits plutôt que des remplissages. Cela signifie, pour notre texte, que nous ne pouvons utiliser aucune police existante.

Les polices définies, quelle que soit leur épaisseur, donnent toujours lieu à des formes fermées plutôt qu’à des chemins ouverts. Il n'y a pas de polices standard basées sur des lignes et des traits.

Par conséquent, si nous souhaitons animer un texte à l'aide d'animations de chemin, nous devons le dessiner nous-mêmes (ou trouver des lettres vectorielles toutes faites qui conviennent à cet usage). Lorsque vous tracez vos lettres, n'hésitez pas à utiliser certaines polices ou typographies existantes à titre de référence – ne violez aucun droit d'auteur, cependant! N'oubliez pas qu'il n'est pas possible d'utiliser des polices prêtes à l'emploi.

Préparation du fichier

Plutôt que de commencer avec une police de caractères existante, nous allons commencer par un simple croquis dessiné à la main:

Il est maintenant temps de redessiner l'esquisse dans un outil de conception. J'ai utilisé Figma mais vous pouvez utiliser n'importe quelle application prenant en charge les exportations SVG, telle que Sketch, Adobe XD ou Adobe Illustrator.

En règle générale, je commence par l'outil Plume et suis en suivant l'esquisse importée sous la forme suivante: une couche en dessous:

Une fois cela fait, j'enlève l'esquisse de l'arrière-plan et j'affine les chemins jusqu'à ce que le résultat me convienne. Quels que soient les outils ou techniques que vous utilisez, l'important est de préparer le dessin sous forme de lignes et d'utiliser uniquement des traits, pas de fond.

Dans cet exemple, nous avons quatre chemins de ce type. Le premier est la lettre "H"; la seconde est les trois lettres du milieu "ell"; et "o" est le troisième. Le quatrième chemin est la ligne du point d’exclamation.

Le point de "!" Est une exception: c’est le seul calque que nous stylerons avec un remplissage, plutôt qu’un trait. Il sera animé de manière différente des autres calques, sans utiliser Path Animator.

Notez que tous les chemins que nous allons animer avec Path Animator sont ouverts, à l'exception du «o», qui est une ellipse. Bien que l’animation de chemins fermés (tels que des ellipses ou des polygones) avec Path Animator soit tout à fait simple et réalisable, cela vaut également la peine d’en faire un chemin ouvert, car c’est le moyen le plus simple de contrôler exactement où commence l’animation. Pour cet exemple, j'ai ajouté un petit espace dans l'ellipse à la fin de la lettre "l", car c'est généralement là que vous commencez à écrire "o" dans l'écriture manuscrite.

Avant d’importer nos calques dans SVGator, il est préférable de nettoyer la structure des calques et de les renommer de manière descriptive. Cela vous aidera à vous retrouver rapidement dans votre fichier une fois que vous travaillerez dans SVGator.

Si vous souhaitez en savoir plus sur la préparation de vos formes pour les animations de chemin, je vous recommande de consulter ce tutoriel de SVGator.

Cela vaut la peine de préparer vos couches avec soin et d’avancer autant que possible. Au moment de la rédaction de ce document, vous ne pouvez pas réimporter le fichier dans une animation existante dans SVGator. Lors de l'animation, si vous découvrez un problème qui nécessite une modification du fichier d'origine, vous devrez l'importer à nouveau dans SVGator en tant que nouveau projet et commencer à travailler sur votre animation à partir de zéro.

Création d'une animation

Si vous êtes satisfait de la structure et du nom de vos couches, importez-les dans SVGator. Ajoutez ensuite le premier chemin à la timeline et appliquez-y Path Animator en le choisissant dans la liste Animators ou en appuyant sur Shift + T .

Pour obtenir un effet d’auto-dessin, notre objectif est de transformer le trait du chemin en une ligne pointillée. La longueur d'un tiret et d'un espace doit être égale à la longueur de tout le chemin. Cela nous permet de couvrir tout le chemin avec un écart pour le faire disparaître. Une fois caché, changez stroke-dashoffset au point où tout le chemin est recouvert d'un tiret.

SVGator nous le rend très pratique en fournissant automatiquement la longueur du chemin. Tout ce que nous avons à faire est de le copier en un clic et de le coller dans les deux paramètres requis par SVGator: Dashes et Offset . Le collage de la valeur dans les tirets transforme le trait en une ligne pointillée. Vous ne pouvez pas le voir tout de suite car le premier tiret de la ligne couvre tout le chemin. Le réglage du décalage changera stroke-dashoffset de sorte que le vide recouvre ensuite le chemin.

Une fois cela fait, créons une animation en ajoutant une nouvelle image clé plus loin dans la timeline. Ramenez Offset à zéro et… ta-da! Vous venez de créer une animation de lettres auto-dessinante.

Il y en a un peu problème avec notre animation, cependant. La lettre est animée – mais de face en face. C'est-à-dire que l'animation commence à la mauvaise extrémité du chemin. Il y a au moins quelques façons de le réparer. Premièrement, plutôt que d’animer le décalage d’une valeur positive à zéro, nous pouvons commencer par un décalage négatif et le ramener à zéro. Malheureusement, cela peut ne pas fonctionner comme prévu dans certains navigateurs (par exemple, Safari n'accepte pas les décalages de trait négatifs). En attendant que ce bogue soit corrigé, choisissons une approche différente.

Modifions la valeur Tirets pour que le chemin commence par un espace suivi d'un tiret (par défaut, les lignes pointillées commencent toujours par un tiret). Puis inversez les valeurs de l'animation Offset. Ceci animera la ligne dans le sens opposé.

Maintenant que nous avons terminé avec le «H», nous pouvons passer à l’animation de tous les autres chemins de la même manière. Finalement, nous finissons par animer le point du point d'exclamation. Comme il s’agit d’un cercle avec remplissage et non d’un contour, nous n’utilisons pas Path Animator. Au lieu de cela, nous utilisons Scale Animator pour faire apparaître des points à la fin de l'animation.

N'oubliez jamais de vérifier la position de l'origine de la transformation d'un élément lors de la lecture. avec des animations à l'échelle. En SVG, tous les éléments ont leur origine de transformation dans le coin supérieur gauche du canevas par défaut. Cela fait souvent des fonctions de transformation de codage une tâche très difficile et fastidieuse. Heureusement, SVGator nous évite tous ces problèmes en calculant toutes les transformations par rapport à l’objet, plutôt qu’à la toile. Par défaut, SVGator définit l'origine de la transformation de chaque élément dans son propre coin supérieur gauche. Vous pouvez modifier sa position dans la timeline en utilisant un bouton en regard du nom du calque.

Une fois que nous avons une idée générale de ce en quoi consiste notre animation, nous pouvons dessiner les formes qui nous permettront de la créer. Commençons par le cercle. Comme nous allons utiliser l'animation de chemin, nous devons créer un chemin qui couvre tout le trajet de la ligne, en commençant par une barre droite au milieu du menu des hamburgers et en terminant par un cercle autour de celle-ci.

Les deux autres barres de l’icône de menu ont une tâche plus simple: nous allons simplement les faire pivoter et les aligner au centre du cercle. Une fois que nous combinons toutes les formes, nous sommes prêts à exporter le fichier au format SVG et à l’importer au format SVGator.

Création d’une animation

Commençons par ajouter la première forme à la chronologie et y appliquer Path Animator. Pour l'état initial, nous voulons que seule la ligne horizontale au milieu soit visible, tandis que le reste du chemin reste masqué. Pour ce faire, réglez la longueur du tiret sur la longueur des lignes du hamburger. Cela fera notre ligne médiane droite de l'icône du menu. Pour trouver la valeur correcte, vous pouvez utiliser la longueur d'une des autres lignes du hamburger. Vous pouvez le copier à partir de la timeline ou du panneau Propriétés dans la barre latérale droite de l'application

puis définissez la longueur de l'écart suivant sur une valeur supérieure à la longueur restante du chemin afin qu'elle devienne transparente.

L'état initial de notre animation est maintenant prêt. Ce qui se passe ensuite, c’est que nous transformons cette ligne en cercle. Pour ce faire, deux choses doivent se produire simultanément. Premièrement, nous utilisons Offset pour déplacer la ligne le long du chemin. Deuxièmement, nous modifions la largeur du tiret pour allonger la ligne et couvrir tout le cercle.

Le cercle étant prêt, occupons-nous de l’icône de fermeture. Comme auparavant, nous devons ajouter deux animations en même temps. Premièrement, nous voulons que la ligne supérieure se penche vers le bas (45 degrés) et que la ligne du bas monte vers le haut (-45 degrés) jusqu'à ce qu'ils se croisent de manière symétrique. Deuxièmement, nous devons déplacer les lignes légèrement vers la droite afin qu'elles restent alignées avec le cercle.

Comme vous vous en souvenez peut-être de l'exemple précédent, dans SVGator, les origines de la transformation se situent par défaut dans le coin supérieur gauche. C’est très pratique pour nous car, dans ce cas, c’est exactement où nous voulons qu’ils soient. Il suffit d’appliquer les angles de rotation corrects.

Lorsqu’il s’agit d’aligner les lignes sur le cercle, notez que nous n’avons pas à les déplacer séparément. Plutôt que d'ajouter des animateurs aux deux lignes, nous pouvons ajouter un groupe les contenant tous les deux à la timeline et les animer avec un seul animateur de position. C’est l’un de ces moments où une structure de fichier propre et agréable porte ses fruits.

Vous devez ensuite ajouter une animation inversée transformant le bouton de fermeture en menu hamburger. Pour y parvenir, nous pouvons essentiellement suivre les étapes précédentes dans l’ordre inverse. Pour accélérer un peu les choses, copiez et collez les images clés existantes dans la chronologie – voilà une autre amélioration introduite par SVGator au cours des derniers mois.

t oubliez pas de régler les fonctions de synchronisation. Ici, j’ai décidé d’utiliser un effet Ease-in-out sur tous les éléments. Notre icône est prête à fonctionner.

Mise en oeuvre

Bien que la mise en œuvre de micro-interactions dépasse de loin le cadre de cet article, je voudrais prendre quelques instants pour décrire brièvement comment une telle animation peut être réalisée. à la vie dans un projet réel.

Les illustrations et les animations décoratives sont généralement plus simples. Très souvent, vous pouvez utiliser des fichiers SVG générés par SVGator. Nous ne pouvons pas en dire autant de notre icône. Nous voulons que la première partie de l'animation soit déclenchée lorsque les utilisateurs cliquent sur le bouton pour ouvrir le tiroir de menu et que la seconde partie de l'animation soit lue une fois qu'ils cliquent dessus une seconde fois pour fermer le menu.

, nous devons découper notre animation en plusieurs parties distinctes. Nous ne discuterons pas ici des détails techniques de la mise en œuvre d’une telle animation, car cela dépend beaucoup de l’environnement et de la pile technologique avec laquelle vous travaillez; Mais examinons au moins le fichier SVG généré pour extraire les états d’animation cruciaux.

Commençons par masquer l’arrière-plan et en ajustant la taille du canevas pour qu’elle corresponde aux dimensions de l’icône. Dans SVGator, nous pouvons le faire à tout moment et il n’ya aucune restriction quant à la taille de notre toile. Nous pouvons également modifier les styles de l'icône, tels que la couleur et la largeur du trait, et tester l'apparence de votre graphique sur un arrière-plan sombre à l'aide d'un commutateur situé dans le coin supérieur droit.