Animer des fichiers SVG avec SVGator

We're très excité par des outils comme SVGator, qui accélèrent vraiment le processus lorsque vous réalisez de simples animations SVG. Voici comment il est facile d'utiliser et comment vous pouvez obtenir une belle animation en un rien de temps.

( Cet article est aimablement sponsorisé par SVGator .) Les fichiers SVG animés sont devenus très populaires. Ils sont entièrement modulables (parce qu'ils sont des vecteurs), petits et 100% basés sur le code, ce qui permet de nombreuses transformations et modifications. Ceci, cependant, a un prix: la courbe d'apprentissage abrupte pour les débutants complets.

SVGator s'engage à résoudre ce problème, en rendant vraiment facile pour quiconque de faire des animations simples en utilisant une interface familière. Il s'agit d'une application d'animation Web qui vous permet d'importer, d'animer et d'exporter des animations SVG, et les débutants ne doivent plus apprendre à coder. Nous l'avons essayé, et nous l'avons vraiment aimé.

Commencez à utiliser l'application

Rendez-vous sur https://www.svgator.com pour commencer à utiliser l'application. Le processus d'inscription est assez simple (figures 1 à 3): Cliquez sur "Animer maintenant", puis sur "Créer un compte", remplissez vos coordonnées, et vous êtes prêt à partir.

Vous serez redirigé directement vers l'exemple de projet "Chronomètre", qui vous permettra d'explorer les fonctionnalités de SVGator. Si vous ne trouvez pas votre chemin dans l'application, il y a un tutoriel (figure 4) qui vous guidera dans la façon de commencer à l'utiliser: Importer un SVG statique, ajouter des éléments au scénario et ajouter des animateurs aux éléments et images clés animer les quatre propriétés actuellement disponibles (échelle, opacité, position et rotation).

Si vous avez déjà utilisé une application d'animation, l'interface utilisateur de SVGator devrait vous sembler familière, et tout sera probablement à sa place. . Vous n'ajoutez que des éléments que vous animez, ce qui permet de garder la ligne de temps propre et facile à analyser.

Le projet d'horloge animée de démarrage fait un excellent travail de présentation de SVGator. Vous pouvez toujours y revenir et l'utiliser comme référence.

Maintenant que nous avons les bases à l'abri, sautons dans la création de nos propres animations!

Ce que nous allons faire

icône d'enveloppe simple que nous avons conçue dans Sketch (figure 5). Il commence fermé, puis il s'ouvre, et une lettre apparaît, suivie de son contenu. Ensuite, la lettre saute hors de l'enveloppe et passe à l'échelle pour afficher la case verte.

Voici un résumé du processus:

• Nous allons commencer par créer un storyboard simple pour visualiser notre icône dans ses différents états. Pendant que nous y sommes, nous allons constamment nous synchroniser avec SVGator et importer les éléments de l'icône afin de nous assurer que tout fonctionne comme prévu.
• Ensuite, nous allons créer une copie maîtresse de l'icône, qui inclura: chaque élément dont nous aurons besoin, et l'exporter vers SVGator. Nous aurons peut-être besoin de beaucoup modifier cette copie principale tout au long du processus.
• Ensuite, nous ferons l'animation entière dans un seul projet SVGator et l'exporterons, en vérifiant que tout fonctionne comme prévu.
• inclure l'icône dans un formulaire de bulletin précodé simple pour voir à quoi il ressemble dans un environnement Web réel. Nous allons aussi le redimensionner pour les petites résolutions.
• Vous pouvez tout télécharger ici

Commençons!

Partie 1: Créer et exporter une icône à partir de l'esquisse

• Il y a quelques différences entre la conception d'une simple icône SVG et la conception d'une icône SVG que vous prévoyez d'animer plus tard. Pour commencer, il est important de noter qu'il doit être composé de formes assez simples, et vous devez planifier vos animations autour de simples transitions basées sur la manipulation seulement des éléments suivants: échelle, rotation, position et opacité. Ce sont les quatre seules propriétés que SVGator vous permet actuellement d'animer, donc si vous avez rédigé quelque chose de plus complexe, vous ne pourrez pas le faire.

Faire un Storyboard simple pour gagner du temps

Storyboarding vous permet de visualiser toutes vos transitions avant de les importer dans SVGator. Il est également facile de tester les transformations avant de s'engager à faire toute l'animation. Il arrive souvent que vous découvriez un problème avec l'illustration qui aurait dû être fait différemment dans Sketch, et vous devez donc revenir en arrière et le modifier. Ensuite, vous devez réimporter le fichier entier dans SVGator et commencer avec les animations à partir de zéro. Parce que vous ne voudriez pas faire cela à chaque fois, le storyboard vous aide à planifier les choses à l'avance.

Par exemple, j'avais initialement prévu que l'enveloppe reste plus vers le bas de l'écran, mais après l'avoir importé dans SVGator et joué avec la fermeture et l'ouverture, il était clair qu'il devait rester au milieu fermé et légèrement vers le bas lors de l'ouverture – un détail qui a été omis dans les images statiques.

Astuce: Consultez le storyboard dans le fichier Esquisse → Artboard "storyboard" .

Si vous nommez vos calques dans Sketch, cela fonctionnera comme prévu, et tous les noms que vous avez assignés dans Sketch seront transférés à votre projet dans SVGator. Mais si vous utilisez SVGO Compressor ou un plugin similaire pour réduire les fichiers SVG, les noms disparaîtront et SVGator les remplacera par ceux basés sur la balise HTML, et vous obtiendrez quelque chose de similaire. à ce qui est montré dans la figure 7.

Astuce: Si vous utilisez déjà SVGO Compressor pour d'autres SVG et que vous ne voulez pas le désactiver, faites simplement glisser le fichier depuis la zone d'aperçu d'export Esquissez à l'endroit désiré (figure 8). Cela évitera SVGO Compressor et exportera le SVG tel quel!

L'utilisation de groupes est également importante, car l'application les reconnaît et vous pouvez même animer simultanément une couche et son groupe parent, en ajoutant un peu plus de complexité.

Nous n'avons pas rencontré de limitation sur le nombre de couches utilisé, mais là encore, notre icône est assez simple.

Préparation de l'icône pour l'animation

Maintenant que nous avons l'idée dans un storyboard et que nous avons préparé le fichier maître, exportons-le de manière à ce que nous puissions donner un sens à SVGator. Veillez à vérifier la hiérarchie des calques. Pensez à la façon dont une couche interagit avec une autre et où elle doit être placée dans le panneau Calques. Dans la figure 9, vous verrez que nous avons sélectionné "top_opened" – c'est le volet supérieur ouvert de l'enveloppe. Il devrait se tenir derrière la feuille blanche. Et vice versa, "top_closed" est le rabat fermé de l'enveloppe, et il devrait rester au-dessus de tout; c'est pourquoi c'est la première couche dans notre groupe "contenu".

Astuce: Vous vous demandez peut-être pourquoi tout le rabat supérieur est fait de deux couches. C'est parce que nous ne pouvons pas faire tourner les formes ou les transformer vraiment dans l'espace 3D en utilisant SVGator. Nous émulions ceci en écrasant la première couche puis en étirant la seconde, créant ainsi l'illusion d'une transformation 3D

Si vous regardez notre storyboard, l'idée originale était de faire sortir la feuille de l'enveloppe et de l'agrandir pour éventuellement la cacher. Nous allons y parvenir en poussant la feuille originale vers le haut, tout en ayant une autre feuille cachée ("sheet_top") devant l'enveloppe (figure 10). Au moment où ils se rencontrent au point le plus haut, ils vont changer, et la feuille de devant tombera devant l'enveloppe. C'est aussi une illusion visuelle – nous ne pouvons pas vraiment déplacer la feuille dans l'espace z, donc c'est une façon de l'émuler.

En tenant compte de tout cela, nous pouvons maintenant exporter l'icône. C'est pratiquement un seul SVG qui contient tous les éléments dont nous aurons besoin, empilés les uns sur les autres d'une manière utile.

Astuce: Assurez-vous que tous les éléments soient visibles (non cachés) avant d'exporter. Vous pouvez regarder le fichier que nous avons utilisé comme export dans le fichier Sketch → Artboard "export" .

Partie 2: Animer l'icône

Ouvrez SVGator et cliquez sur "Importer nouveau" pour commencer un nouveau projet (figure 11):

Si vous avez tout fait correctement, vous devriez voir quelque chose comme la figure 12 et le clip court ci-dessous (clip 1): tous les calques empilés les uns sur les autres et prêts à être utilisés. Si, par hasard, vous ne voyez pas tout, retournez dans Sketch et vérifiez que toutes les couches sont visibles.

Animation de l'ouverture de l'enveloppe

Nous allons commencer par importer certains éléments dans la timeline. Le fonctionnement de SVGator est que vous commencerez avec un montage vide. Vous choisissez les éléments à ajouter dans la liste déroulante "Éléments". Vous devrez les vérifier manuellement en utilisant l'icône de l'œil pour voir quelle couche vous recherchez. Alternativement, vous pouvez cliquer directement sur l'élément à l'écran, ce qui fera la même chose.

Nous allons travailler sur les étapes 1 et 2 du storyboard, en particulier sur l'ouverture du volet. Désactivons les couches dont nous n'avons pas besoin pour le moment. nous y reviendrons plus tard (voir clip 1 pour voir comment faire). Il ne devrait rester que l'enveloppe de base, ce qui signifie que vous devez désactiver les couches suivantes: "sheet_top_content", "sheet_top_bgr" et "sheet_bottom_bgr".

Ensuite, cliquez sur "top_opened" et cliquez sur l'icône plus à gauche ou double-cliquez sur l'élément pour l'ajouter au montage. Faites de même pour "top_closed". Vous devriez maintenant avoir les deux calques dans la chronologie (figure 13).

Astuce: Si vous voulez avancer rapidement dans tout le processus, consultez le clip 2 (les actions peuvent ne pas être identiques ordre comme décrit ci-dessous) .

• Cliquez sur "top_closed" dans le scénario, puis dans la liste déroulante "Animators". Ajoutez un animateur Scale
• Ajoutez aussi un animateur Scale pour "top_opened".
• Ensuite, cliquez sur l'icône de la petite cible à côté du nom du calque dans le montage. C'est la propriété transform-origin et elle vous permet de définir un point de pivot pour la transformation de l'élément. Choisissons top-center pour "top_closed", parce que nous allons le rétrécir vers le haut (figure 14), et ensuite vers le bas pour "top_opened".
• Maintenant, avec "top_closed" sélectionné, cliquez sur le signe plus sur Mettre à l'échelle la propriété pour ajouter une image clé au scénario. Une forme de diamant jaune apparaîtra dans la chronologie. Passons à 0.4s et cliquez à nouveau sur le signe plus (figure 15). Cette deuxième image clé sera notre dernier point de transformation, lorsque le volet est déjà ouvert. Donc, faisons son échelle 100% 0%, en laissant la première image-clé 100% 100%.
• Activez Ease-in pour "top_closed" en cliquant sur l'icône petite cible à côté du nom du calque (figure 16). 19659027] Sous 0.4s, ajoutez une image-clé Opacité pour "top_closed" en double-cliquant sur Opacity dans le menu "Animators", puis en cliquant sur le signe plus en regard de la propriété Opacity dans le scénario. Changez-le à 0%.
• Retournez quelques images et ajoutez 100% pour Opacity. Nous faisons cela pour éviter les pépins dans la partie supérieure du rabat.

Astuce: L'accélération rendra le mouvement plus naturel, et parce que nous concevons une animation qui émule le mouvement d'un seul élément. , il est naturel de faciliter – au début et de faciliter la fin de l'animation .

Passons maintenant à la partie "top_opened", la fin de l'animation. Comme nous l'avons noté précédemment, nous faisons cela en deux parties pour émuler une ouverture 3D du volet.

• Saisissez le calque "top_opened" dans le scénario, allez à 0.4s dans le scénario, et ajoutez une image clé Scale, puis une autre image clé à 0.8s . Définissez l'échelle à 0.4s sur 100% 0% et laissez la valeur 0.8s Scale rester 100% 100%.
• Activez l'option Ease-out. Hit play pour prévisualiser l'animation.

Ça a l'air cool, mais maintenant, toute l'enveloppe doit être déplacée de manière à ce qu'elle s'insère dans l'arrière-plan encerclé. Trouvez un groupe appelé juste "g" dans les éléments, et ajoutez un animateur de position. Ajoutez une image clé de position à 0,2 seconde puis à 0,8 seconde. Changez la valeur de 0.8s à 0 35. Ajoutez Facilité-in-out pour une animation lisse. Et c'est tout! Nous avons réussi à animer l'enveloppe ouverte et même à la faire bouger un peu vers le bas

Ajout de complexité: la lettre apparaît

L'enveloppe d'ouverture est nette, mais on peut la rendre plus intéressante en y introduisant une feuille de papier. Pour ce faire, nous aurons besoin de révéler le calque de feuille, que nous avons appelé "sheet_bottom_bgr".

• Cliquez sur l'icône oeil à côté de "sheet_bottom_bgr" dans le menu "Elements" pour le rendre visible. Ajoutez-le à la chronologie (double-cliquez dessus)
• Maintenant, allez quelque part au milieu de l'animation – par exemple, 0.5s – et ajoutez une image clé Position. Ajouter un autre après 0.4s. Sélectionnez la première image clé et décalez le calque de 140 pixels sur l'axe des y (0 140).
• Ajoutez un effet de réduction des effets. Maintenant, nous avons une animation un peu plus intéressante

Astuce: Si vous préférez regarder ceci dans une vidéo, regardez le clip 3 ci-dessous

Encore plus de complexité: l'animation de l'échelle de la Lettre

Pour aller plus loin, animons la lettre qui sort de l'enveloppe, et révélons quelques lignes de texte «écrites» dans la lettre. Pour ce faire, nous devrons modifier un peu l'animation précédente. (Si vous voulez avancer rapidement, vous pouvez juste regarder le screencast et le répéter.)

• Commencez par déplacer la dernière image clé Position de "sheet_bottom_bgr" de 0.9s à 1.1s, et changez-la en 0 -190. Ce que nous faisons avec ceci est de sortir la feuille de l'enveloppe, de sorte que nous puissions l'échanger rapidement avec l'autre feuille que nous avons déjà préparée.
• Aller à 1.1s, activer "sheet_top_content" et "sheet_top_bgr" et ajoutez-les à la ligne temporelle avec les images clés Position pour les deux de 0 à 190.
• Ajoutez des images clés à 1.5s et faites-en 0 40.
• Activez l'option Ease-out pour les deux.

et cela devrait ressembler à ce que vous voyez sur la figure 17.

Maintenant, réparons la feuille arrière. Il devrait disparaître une fois que le recto apparaîtra, et la page de garde ne devrait apparaître qu'après cela.

• Allez à 1.1s, et sélectionnez "sheet_bottom_bgr". Ajoutez un animateur Opacity et une image clé. Réglez-le sur 0%
• Déplacez d'une image vers l'arrière et définissez une autre image-clé Opacité, en faisant 100%.

Procédons aux modifications respectives de la première page:

• Aller à 1.1s, sélectionnez "sheet_top_bgr "Et ajoutez une image-clé Opacité de 100%.
• Déplacez une image en arrière, et faites l'opacité 0%.

Vous devriez voir quelque chose comme la figure 18 ci-dessous. Nous pouvons repérer deux problèmes ici:

• Le contenu est affiché au-dessus de l'enveloppe avant que la transition ne se produise.
• Il y a un petit problème lors de l'échange du dos et de la feuille de couverture

Grand aperçu )

Réglons le premier problème. Cachons le contenu et la case à cocher et montrons-le après l'apparition de la première page

• Allez à 1.5s, sélectionnez "sheet_top_content" et ajoutez une image-clé Opacity à 100%.
• Retour arrière et définition d'une autre image-clé Opacity à 0%.
• Maintenant, nous allons le rendre un peu plus intéressant en animant chaque couche dans le contenu du front.
  • Accédez à 1.5s et recherchez le contenu de "sheet_top_content" dans le menu "Elements"
  • Ajoutez des images-clés Opacity pour les trois couches dans "sheet_top_content".
  • Faites l'opacité pour les trois couches 0%. [19659027] Passez à 1.7s et réglez-le à 100% pour les trois couches.
  • Restez sur 1.7s et sélectionnez Combiné-shape et ajoutez une image-clé Rotate.
  • Passez à 1.5s et Réglez la rotation sur -45deg.
  • Ajoutez une facilité de sortie pour la rotation.

Le deuxième problème est un problème qui survient parce que notre feuille de fond disparaît trop tôt.

• Allez à 1.1s, sélectionnez "sheet_bottom_bgr" et déplacez ses images clés Opacity d'une image vers l'avant. Voici ce que vous devriez regarder (figure 19):

Pour le rendre plus attrayant, nous allons redimensionner la page de garde et le contenu quand il sort de l'enveloppe. Nous pourrions mettre à l'échelle l'ensemble de "top_sheet_content", mais cela pourrait entraîner certains désalignements dans certains navigateurs. Il est préférable de mettre à l'échelle chacun de ses calques enfants.

• Accédez à 1.1s, sélectionnez "sheet_top_bgr" et ajoutez une image clé Scale.
  • Faites de même pour Combined-Shape, "line_top" et "line_bottom".
• Passez à 1.5s et ajoutez une autre image-clé Scale avec des valeurs de 120% 120%.
  • Faites de même pour Combined-Shape, "line_top" et "line_bottom".
• Activer Fac-in-out.
• Parce que nous l'avons mis à l'échelle, nous devons diminuer la quantité que la totalité de la première feuille descend. Allez à 1.5s, sélectionnez "sheet_top_content" et "sheet_top_bgr", et changez leur position de 0 40 à 0 20.
  

Astuce: Il est normal de mettre à l'échelle du contenu en SVG car tout est vectoriel, donc vous ne perdrez aucune qualité .

Voici à quoi ça devrait ressembler maintenant (figure 20):

Tout va bien, mais toute l'animation doit revenir à la première image. C'est parce que nous voulons le réutiliser. Notre idée est de faire glisser la première feuille vers le bas et de fermer l'enveloppe et de revenir à sa position d'origine.

• Passez à 2.8s, sélectionnez "sheet_top_bgr" et ajoutez des images clés Position.
  • Faites de même pour "sheet_top_content".
• Nous devons ajouter plus de temps, car la chronologie par défaut est 3s. Cliquez sur l'icône en forme de rouage dans le coin inférieur gauche au-dessus de la timeline, modifiez la durée à 00:04:50 (figure 21) et appuyez sur "Entrée". Nous avons maintenant étendu la timeline.
• Passez à 3.6s, ajoutez une autre paire d'images clés Position et faites leurs valeurs 0 360. Changez l'assouplissement de la position des deux couches pour faciliter la sortie.

• À 1.3s, sélectionnez "top_closed" et "top_opened", et ajoutez des images-clés Scale.
• Ajoutez deux autres à 1.5s. Pour les deuxièmes images clés, "top_closed" doit avoir 100% 100% et "top_opened" 100% 0%. Nous avons réussi à fermer le rabat derrière la feuille graduée.
• Maintenant, tout ce que nous avons à faire est de ramener l'enveloppe au centre et de nous assurer que le rabat supérieur apparaisse à nouveau. Aller à 3s et ajouter une image clé Position pour "g". Ajoutez-en un autre à 3.4s, et faites-en 0 0. Passez à 2.8s, et ajoutez une image-clé Opacity 0% pour "top_closed". Ensuite, passez à 3s et changez l'opacité à 100%.

Félicitations! Nous avons animé l'icône entière. Voici à quoi cela devrait ressembler (figure 22):

Partie 3: Implémentation de l'animation exportée dans un environnement Web réel

Plaçons l'icône dans un environnement réel. Nous avons codé un simple formulaire de newsletter et inclus l'icône ici. Vous pouvez exporter l'icône de SVGator en cliquant sur "Export SVG"

Après avoir cliqué sur "S'abonner", un message de remerciement s'affiche et l'animation de l'icône commence

Fonctionne avec deux icônes SVG: La première est une icône statique avec seulement la première image de l'animation inclus, et le second est l'animé. Vous pouvez trouver l'icône statique dans le fichier Esquisse → Artboard "exporter statique". Nous l'avons inclus en tant qu'élément SVG intégré dans le code. Nous avons également inclus le SVG animé en ligne, mais caché par défaut. Vous pouvez consulter le code dans le téléchargement . Quand "Subscribe" reçoit un clic, nous cachons le SVG statique et montrons le SVG qui démarre automatiquement.

Un ajustement mineur que nous avons fait dans le SVG statique était de remplacer cette ligne:

… avec ceci: [19659172Celasupprimeralerectanglegrisaffichéincorrectementau-dessusdetousleséléments

Cet exemple montre également à quel point les SVG sont bons dans le design responsive: Si vous réduisez la fenêtre, la disposition réorganise et l'icône agrandit sans perte de qualité quelle qu'elle soit

Astuce: Lorsque nous avons réduit l'icône, nous avons constaté qu'il fallait trop de temps à la feuille pour sortir du canevas. Nous avons donc dû revenir en arrière et modifier un peu le timing. le rendre plus court. Nous avons déplacé les dernières images clés de "sheet_top_bgr" et "sheet_top_content" à 3.2s pour rendre le mouvement plus rapide .

Si vous le souhaitez, vous pouvez ajuster l'animation même après l'avoir exportée, mais c'est beaucoup plus facile pour faire ceci dans SVGator, où vous aurez l'interface utilisateur pratique.

Conclusion

Nous sommes très excités par des outils tels que SVGator, qui accélèrent vraiment le processus lorsque vous réalisez de simples animations SVG. Il est facile à utiliser et vous pouvez obtenir une superbe animation en un rien de temps.

• Il n'est pas aussi puissant qu'Adobe After Effects, mais il est beaucoup plus adaptatif et exporte tout en code, prêt à l'emploi sur le web. La comparaison avec After Effects concerne les pommes et les oranges, car les deux outils sont si différents.
• Lorsque utilise SVGator pour des explorations rapides, les débutants y verront une plus grande valeur, mais cela ne veut pas dire qu'il est ciblé chez eux seulement. Les utilisateurs avancés peuvent utiliser l'outil pour réfléchir ou explorer rapidement des idées sans avoir à utiliser un outil plus complexe. Parce que SVGator génère du code, vous pouvez le prendre à partir de là et personnaliser n'importe quoi comme vous le souhaitez. Le seul inconvénient est que toute l'animation est placée dans une ligne de temps, ce qui signifie que c'est une animation CSS, et que tout ce qui se passe à l'intérieur a un délai différent avant de se déclencher. Cela signifie que vous ne pouvez actuellement déclencher des événements à certaines étapes de l'animation, car tout est CSS tout-en-un.
• Le comparer au code vanilla n'est pas juste non plus, car l'objectif principal de SVGator est de faciliter l'animation SVG. plus rapide. Il est clair que vous pouvez accomplir plus si vous codez le tout à partir de rien, mais combien de temps cela vous prendrait?
• L'un des plus grands avantages de SVGator est qu'il est très facile à utiliser pour les débutants. N'importe qui peut commencer à l'utiliser, et la courbe d'apprentissage est proche de zéro si vous avez de l'expérience avec au moins un logiciel de conception ou d'animation.
• Tous les utilisateurs obtiennent un essai gratuit de sept jours. Toutes les fonctionnalités sont incluses, et une fois le test terminé, ils peuvent toujours télécharger les animations depuis leur section "Mes projets". Vous pouvez vous abonner à l'application mensuelle (18 $ par mois), trimestrielle (45 $ par trimestre) ou annuelle (144 $ par année).

Autres lectures sur SVGator

Autres lectures sur l'animation SVG utilisant le code

Un merci spécial à Boyan Kostov pour avoir préparé cet article – nous apprécions votre temps et vos efforts!

(ms, mb, ra, al, yk, il)