L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment créer, modifier et animer des SVG en un seul endroit avec SVGator 3.0
SVGator évolue et évolue beaucoup. Il y a trois ans, nous avons publié une introduction complète à l'utilisation de base de SVGator. À cette époque, il s'agissait d'une application destinée uniquement à animer des fichiers SVG créés dans d'autres applications. Il y a deux ans nous vous présentions une nouvelle version de SVGator et ses capacités d'animation améliorées. Cette fois, nous présentons une nouvelle version majeure de SVGator qui offre un environnement complet et mûr pour dessiner à partir de zéro et animer des graphiques SVG.
Note : Certaines des fonctionnalités de SVGator couverts dans ce tutoriel sont payés. Avec le plan gratuit, vous pouvez créer et exporter un nombre illimité de graphiques SVG. Vous pouvez également utiliser les fonctionnalités d'animation de base et exporter 3 animations par mois. Des fonctionnalités d'animation avancées sont disponibles dans le cadre d'un forfait payant, à partir de 11 USD / mois.
Dans cet article, nous allons suivre un processus de création d'un chargeur SVG personnalisé, depuis le dessin à partir de zéro et l'application de divers effets visuels, en passant par la création de différents types d'animations, pour exporter votre fichier et le préparer pour une utilisation sur le Web.
Nous commençons par créer un nouveau fichier vierge et changer sa couleur d'arrière-plan
De là, nous pouvons commencer à dessiner l'illustration que nous allons animer plus tard. SVGator vous permet de dessiner toutes les formes SVG standard telles que les ellipses, les rectangles et les polygones, ainsi que d'utiliser les outils Stylo et Crayon pour dessiner les vôtres. Vous pouvez également utiliser des fonctions booléennes pour combiner des formes entre elles.
Pour me faciliter la tâche dans la création de la forme désirée, j'ai commencé par dessiner un cercle comme guide au centre du canevas. Heureusement, SVGator simplifie l'alignement et la mesure des éléments, grâce à un système intelligent de guides et de fonctions d'accrochage. Vous pouvez également utiliser des grilles et des règles pour une meilleure précision et fidélité.
Ensuite, en utilisant un outil Plume, nous dessinons la première goutte en suivant à peu près la forme du cercle en dessous. L'outil Crayon conviendrait également à cette fin. Ce qui est vraiment cool à propos de celui-ci, c'est que l'outil Crayon de SVGator crée généralement des formes avec beaucoup moins de points de nœuds que les outils comparables dans d'autres applications, ce qui rend le résultat non seulement plus lisse, mais aussi beaucoup plus léger sur la taille du fichier.
La création et l'édition de formes dans SVGator peuvent sembler un peu différentes de celles des autres outils vectoriels, mais une fois que vous vous y êtes habitué, c'est vraiment une brise. Il est également important de noter que toutes les fonctionnalités de dessin de SVGator sont entièrement gratuites afin que vous puissiez l'utiliser comme logiciel de création de SVG autant que vous le souhaitez sans frais.
Avec un premier blob prêt, il est temps de le styliser un peu. Ici, nous tombons sur l'un des plus grands avantages concurrentiels de l'application. D'autres applications graphiques vectorielles populaires qui vous permettent d'exporter des fichiers SVG doivent généralement tirer parti de leurs fonctionnalités pour s'adapter à une pléthore de formats et de cas d'utilisation. Dans le même temps, les applications axées principalement sur les interfaces utilisateur, traitent principalement de ce qui est possible avec les propriétés HTML et CSS, accordant rarement beaucoup d'amour aux fonctionnalités spécifiques à SVG telles que les marqueurs de trait ou les filtres.
SVGator, visant uniquement à créer SVG tire pleinement parti de ce que ce format, en particulier, a à offrir. Cela inclut des options spécifiques à la façon dont SVG gère les traits, les remplissages, les éléments de dégradé (avez-vous entendu parler de l'attribut spreadMethod des dégradés SVG?), Les filtres (tels que le flou, l'ombre ou le sépia), et bien d'autres. [19659013] Il vous permet également de styliser (vos remplissages, traits, effets, etc.) avec la certitude que le résultat final sera comme prévu, car toutes ces fonctionnalités ont été créées spécialement pour les fichiers SVG.
Dans notre cas, un seul remplissage dégradé et un trait dégradé feront l'affaire. J'ai également appliqué un filtre de flou léger sur l'élément comme touche finale. Notez que comme SVGator utilise des filtres SVG natifs au lieu de CSS, il vous permet de contrôler les propriétés de flou pour les deux axes séparément. Dans ce cas, je n'ai appliqué qu'un flou sur l'axe X.
Ensuite, nous pouvons dupliquer le blob et utiliser à nouveau l'outil Plume pour créer deux autres blobs différents. Le fonctionnement de l'outil Stylo facilite grandement la modification de la forme sans perdre la ligne lisse et continue de celle-ci.
Comme dernier élément de l'illustration, nous ajoutons quelques points lumineux placés au hasard. Ce ne sont rien de plus que des cercles avec un remplissage dégradé appliqué.
Notre chargeur dans son état initial est prêt. Maintenant, il est temps pour la partie la plus amusante: l'animation!
Peu importe quel élément de l'illustration nous allons animer en premier. Dans mon cas, j'ai commencé par animer les étincelles. En ajoutant un animateur de position à chaque élément, nous pouvons créer des animations de chemin complexes. Les animations de chemin nous permettent de faire suivre à un élément un chemin de n'importe quelle forme au fil du temps. Dans notre cas, fera circuler les étincelles autour de la toile pour créer une impression de vol autour des éléments centraux de l'illustration. Nous pouvons également utiliser des animateurs d'échelle et d'opacité pour faire en sorte que l'étincelle semble s'éloigner de plus en plus du spectateur et renforcer une illusion de mouvement dans un espace tridimensionnel.
Remarque : Si vous souhaitez en savoir plus sur la création d'animations de trajectoire, je vous recommande de regarder ce didacticiel: « Animation de trajectoire de mouvement – Animer n'importe quel objet le long d'un chemin personnalisé .» [19659040] Le dernier chemin de l'une des étincelles à suivre. Mon objectif était de donner une impression de l'étincelle volant autour des gouttes au milieu « /> Pour animer les blobs, un animateur Morph peut être utilisé. Cela nous permet de modifier une forme dans le temps et de créer des transitions douces entre ces états. Pour obtenir une transition agréable et nette entre deux formes, nous ajoutons une image clé à la chronologie de l'animateur Morph et modifions la forme avec un outil Plume – comme nous l'avons fait lorsque nous avons dessiné les gouttes supplémentaires. Si vous souhaitez en savoir plus sur la création d'animations de morphing, ce didacticiel vous présentera non seulement les bases, mais l'amènera également à un tout autre niveau: « Didacticiel d'animation de morphing avancé .» Une partie importante de chaque animation est sa fonction de chronométrage. Pour les étincelles, j'ai principalement utilisé les fonctions de synchronisation Ease In Out. Cela permet aux points de ralentir lorsqu'ils atteignent un tour étroit de l'orbite et d'accélérer sur des tronçons rectilignes, aidant le mouvement à regarder de plus près ce qu'il semblerait dans une telle perspective d'espace multidimensionnel. Pour les blobs, j'ai également utilisé une fonction Ease In Out. Vous pouvez remarquer que les deux fonctions de chronométrage sont différentes de l'apparence par défaut des fonctions Ease In Out. Je les ai «affûtés» un peu en utilisant l'interface de la courbe de Bézier. Cela m'a permis de rendre les mouvements lisses et naturels, sans virages brusques ni hoquet, mais aussi sans ralentissements trop visibles. Après quelques ajustements mineurs supplémentaires, le fichier est prêt à être exporté. La nouvelle version de SVGator combine la fonctionnalité de prévisualisation avec des fonctionnalités d'exportation. Grâce à cela, vous pouvez avoir un aperçu du navigateur en temps réel de vos animations pendant que vous testez et modifiez également les paramètres d'exportation. Dans notre cas , nous voulons que l'animation agisse comme une boucle infinie. Vous pouvez également contrôler le comportement du graphique, pour l'afficher au chargement ou lors d'une action de l'utilisateur telle que cliquer ou faire défiler. Le fichier exporté correspond parfaitement à l'animation que nous avons créée dans l'application et est prêt à être utilisé sur le Web. [19659055] Voir le stylo [SVGator Loader] (https://codepen.io/smashingmag/pen/wvJzWgp) par Mikołaj . J'espère que cet article vous a plu et qu'il vous inspirera à créer les choses les plus étonnantes avec SVG dans votre travail! Et maintenant? Vous trouverez ci-dessous quelques ressources utiles pour continuer votre aventure avec SVG et SVGator:
(vf, il)
Source link