Animer des fichiers SVG avec SVGator

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

SVGator s'engage à résoudre ce problème, ce qui permet à quiconque de créer facilement des animations simples à l'aide d'une interface familière. Il s'agit d'une application d'animation basée sur le Web qui vous permet d'importer, d'animer et d'exporter des animations SVG, et qui élimine le besoin pour les débutants d'apprendre à coder. Nous l'avons essayé, et nous l'avons vraiment adoré.

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 "Stopwatch", qui vous permet d'explorer les fonctionnalités de SVGator. Si vous ne trouvez pas votre chemin dans l'application, il existe un didacticiel soigné (figure 4) qui vous guidera dans la façon de commencer à l'utiliser : importez un SVG statique, ajoutez des éléments à la chronologie et ajoutez des animateurs aux éléments et des 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 assez familière et tout se sentira probablement à sa place. Vous n'ajoutez que des éléments que vous animerez, ce qui permet de garder la chronologie propre et facile à numériser.

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

Maintenant que nous avons les bases, passons à la création de nos propres animations !

Ce que nous ferons

Découvrez cette simple icône d'enveloppe 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 sort de l'enveloppe et s'agrandit pour afficher la case à cocher verte.

Voici un résumé du processus :

• Nous allons commencer par réaliser un storyboard simple pour visualiser notre icône dans ses différents états. Pendant que nous y sommes, nous nous synchroniserons constamment avec SVGator et importerons des é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 tous les éléments dont nous aurons besoin, et l'exporter vers SVGator. Nous devrons peut-être beaucoup modifier cette copie principale tout au long du processus.
• Ensuite, nous allons faire toute l'animation dans un seul projet SVGator et l'exporter, en nous assurant qu'elle fonctionne comme prévu.
• Enfin, nous inclurons l'icône dans un simple formulaire de newsletter précodé pour voir à quoi cela ressemble dans un environnement Web réel. Nous le verrons également redimensionné pour des résolutions plus petites.
• Vous pouvez tout télécharger ici.

Commençons!

Partie 1 : créer et exporter une icône à partir d'un croquis

• Il existe 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 ultérieurement. Pour commencer, il est important de noter qu'il doit être composé de formes assez simples et que vous devez planifier vos animations autour de transitions simples en ne manipulant que les é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

Le storyboarding vous permet de visualiser toutes vos transitions avant de les importer dans SVGator. Cela permet également de tester facilement les transformations avant de s'engager à créer toute l'animation. Il arrive souvent que vous découvriez un problème avec l'illustration qui aurait dû être faite différemment dans Sketch, et vous devez donc revenir en arrière et la modifier. Ensuite, vous devez réimporter l'intégralité du fichier dans SVGator et recommencer les animations à partir de zéro. Parce que vous ne voudriez pas faire cela à chaque fois, le storyboard vous aide en vous obligeant à 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ée dans SVGator et avoir joué avec la fermeture et l'ouverture, il était clair qu'elle devait rester au milieu lorsqu'elle était fermée et légèrement vers le bas lorsque ouvert — un détail qui a été omis dans les images statiques.

Astuce : Découvrez le storyboard dans le fichier Sketch → Artboard « storyboard » .

Dénomination et organisation des calques

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

Conseil : Si vous utilisez déjà SVGO Compressor pour d'autres SVG et que vous ne souhaitez pas le désactiver, faites simplement glisser et déposez le fichier depuis la zone d'aperçu d'exportation dans Sketch vers l'emplacement souhaité (figure 8). Cela contournera SVGO Compressor et exportera le SVG tel quel !

L'utilisation de groupes est également excellente, car l'application les reconnaît et vous pouvez même animer simultanément un calque et son groupe parent, ce qui ajoute un peu plus de complexité.

Nous n'avons rencontré aucune limitation sur le nombre de calques utilisés, mais encore une fois, notre icône est assez simple.

Préparer 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 d'une manière qui nous donne un sens dans SVGator. Assurez-vous de revérifier la hiérarchie des couches. Pensez à la façon dont un certain calque interagira avec un autre et où il devrait être placé dans le panneau Calques. Dans la figure 9, vous verrez que nous avons sélectionné "top_opened" - c'est le rabat supérieur ouvert de l'enveloppe. Il devrait se tenir derrière la feuille de papier blanche. Et vice versa, "top_closed" est le rabat fermé de l'enveloppe, et il doit rester au-dessus de tout ; c'est pourquoi c'est la première couche de notre groupe "contenu".

Astuce : Vous vous demandez peut-être pourquoi tout le rabat supérieur est composé de deux couches. C'est parce que nous ne pouvons pas faire pivoter les formes ou vraiment les transformer dans l'espace 3D en utilisant SVGator. Nous émulons cela 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 la mettre à l'échelle pour éventuellement la cacher. Nous allons y parvenir en poussant la feuille d'origine 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 changeront et la première feuille tombera devant l'enveloppe. C'est aussi une illusion visuelle - nous ne pouvons pas vraiment déplacer la feuille dans l'espace z, c'est donc une façon de l'imiter.

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 de manière utile.

Conseil : Assurez-vous que tous les éléments sont marqués comme visibles (non masqués) avant d'exporter. Vous pouvez regarder le fichier que nous avons utilisé comme exportation dans le fichier Sketch → Artboard "exporter" .

Partie 2 : Animer l'icône

Ouvrez SVGator et cliquez sur « Importer nouveau » pour démarrer un nouveau projet (figure 11) :

Si vous avez tout fait correctement, vous devriez voir quelque chose comme la figure 12 et le court clip ci-dessous (clip 1) : toutes les couches empilées les unes sur les autres et prêtes à l'emploi. Si, par hasard, vous ne voyez pas tout, retournez dans Sketch et revérifiez que tous les calques sont visibles.

Animer l'ouverture de l'enveloppe

Nous allons commencer par importer certains éléments dans la chronologie. La façon dont fonctionne SVGator est que vous commencerez avec une chronologie vide. Vous choisissez les éléments à ajouter dans la liste déroulante "Éléments". Vous devrez les vérifier manuellement à l'aide de l'icône en forme d'œil pour voir quelle est la couche que vous recherchez. Alternativement, vous pouvez cliquer directement sur l'élément à l'écran, ce qui fera de même.

Nous allons travailler sur les étapes 1 et 2 du storyboard, plus précisément sur l'ouverture du volet. Désactivons les calques dont nous n'avons pas besoin pour l'instant ; nous y reviendrons plus tard (voir le clip 1 pour voir comment faire). Il ne devrait nous 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", puis cliquez sur l'icône plus à gauche, ou double-cliquez sur l'élément pour l'ajouter à la chronologie. Faites de même pour "top_closed". Vous devriez maintenant avoir les deux calques dans la chronologie (figure 13).

Conseil : Si vous souhaitez avancer rapidement tout au long du processus, consultez le clip 2 (les actions peuvent ne pas être dans le même ordre que celui décrit ci-dessous) .

• Cliquez sur « top_closed » dans la chronologie, puis sur le menu déroulant « Animateurs ». Ajoutez un animateur d'échelle.
• Ajoutez également un animateur d'échelle pour "top_opened".
• Ensuite, cliquez sur la petite icône cible à côté du nom du calque dans la chronologie. Il s'agit de la propriété transform-origin, et elle vous permet de définir un point de pivot pour la transformation de l'élément. Choisissons en haut au centre pour "top_closed", car nous allons le rétrécir vers le haut (figure 14), puis en bas au centre pour "top_opened".
• Maintenant, avec "top_closed" sélectionné, cliquez sur le signe plus de la propriété Scale pour ajouter une image clé à la chronologie. 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 sera déjà ouvert. Faisons donc son Échelle 100% 0%, laissant la première image clé à 100% 100%.
• Activez Ease-in pour "top_closed" en cliquant sur la petite icône cible à côté du nom du calque (figure 16).
• En 0.4s, ajoutez une image clé Opacité pour "top_closed" en double-cliquant sur Opacité dans le menu "Animateurs", puis en cliquant sur le signe plus à côté de la propriété Opacité dans la chronologie. Changez-le à 0%.
• Revenez quelques images en arrière et ajoutez 100 % pour l'opacité. Nous faisons cela pour éviter les problèmes dans la partie supérieure du rabat.

Conseil : l'accélération rendra le mouvement plus naturel, et comme nous concevons une animation qui émule le mouvement d'un seul élément, il est naturel d'accélérer le début et d'atténuer 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 procédons en deux parties pour émuler une ouverture 3D du volet.

• Saisissez le calque "top_opened" dans la chronologie, passez à 0,4 s dans la chronologie et ajoutez une image clé Scale, puis une autre image clé à 0,8 s . Faites en sorte que l'échelle à 0,4 s soit de 100 % à 0 % et que la valeur de l'échelle de 0,8 s reste de 100 % à 100 %.
• Activez la suppression progressive. Appuyez sur lecture pour prévisualiser l'animation.

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

Ajouter de la complexité : la lettre apparaît

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

• Cliquez sur l'icône en forme d'œil à côté de « sheet_bottom_bgr » dans le menu « Éléments » pour le rendre visible. Ajoutez-le à la chronologie (double-cliquez dessus).
• Maintenant, allez quelque part au milieu de l'animation - par exemple, 0,5 s - et ajoutez une image clé Position. Ajoutez-en un autre après 0,4 s. Sélectionnez la première image clé et décalez le calque de 140 pixels sur l'axe y (0 140).
• Ajoutez un effet Ease-in-out. Maintenant, nous avons une animation un peu plus intéressante.

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

Encore plus de complexité : animer la mise à l'échelle de la lettre

Pour aller plus loin, animons la lettre sortant 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 simplement regarder le screencast et le répéter.)

• Commencez par déplacer la dernière image clé Position de "sheet_bottom_bgr" de 0,9 s à 1,1 s, et changez-la en 0 -190. Ce que nous faisons avec cela, c'est sortir la feuille de l'enveloppe, afin de pouvoir l'échanger rapidement avec l'autre feuille que nous avons déjà préparée.
• Allez à 1.1s, activez "sheet_top_content" et "sheet_top_bgr" et ajoutez-les à la chronologie avec des images clés de position pour les deux de 0 à 190.
• Ajoutez des images clés à 1,5 s et faites-les 0 40.
• Activer Ease-out pour les deux.

C'est le mouvement de la feuille avant, et il devrait ressembler à ce que vous voyez sur la figure 17.

Fixons maintenant la feuille arrière. Il devrait disparaître une fois que le recto apparaît, et le recto ne devrait apparaître qu'après cela.

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

Apportons également les modifications respectives à la première page :

• Allez à 1.1s, sélectionnez "sheet_top_bgr" et ajoutez une image clé d'opacité de 100 %.
• Reculez d'une image et réglez l'opacité à 0 %.

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

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

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

• Passez à 1.5s, sélectionnez "sheet_top_content" et ajoutez une image clé d'opacité de 100 %.
• Reculez d'une image et définissez une autre image clé d'opacité sur 0 %.
• Maintenant, nous allons le rendre un peu plus intéressant en animant chaque calque dans le contenu avant.
  • Allez à 1.5s et recherchez le contenu de "sheet_top_content" dans le menu Elements.
  • Ajoutez des images clés d'opacité pour les trois couches dans "sheet_top_content".
  • Définissez l'opacité des trois calques sur 0 %.
  • Passez à 1,7 s et réglez-le sur 100 % pour les trois couches.
  • Restez sur 1.7s et sélectionnez Combined-shape , et ajoutez une image clé Rotation.
  • Passez à 1,5 s et réglez la rotation sur -45 degrés.
  • Ajouter Ease-in-out pour la rotation.

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

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

Pour le rendre plus attrayant, mettons à l'échelle la première page et le contenu lorsqu'il sort de l'enveloppe. Nous pourrions mettre à l'échelle l'ensemble du "top_sheet_content", mais cela pourrait entraîner des désalignements dans certains navigateurs. Il est préférable de mettre à l'échelle chacune de ses couches enfants.

• Allez à 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".
• Allez à 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 l'Easy-in-out.
• Parce que nous l'avons mis à l'échelle, nous devons diminuer la quantité de déplacement vers le bas de toute la feuille avant. Allez à 1.5s, sélectionnez "sheet_top_content" et "sheet_top_bgr", et changez leur position de 0 40 à 0 20.

Conseil : vous pouvez mettre à l'échelle le contenu en SVG, car tout est basé sur des vecteurs, vous ne perdrez donc aucune qualité .

Voici à quoi cela 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 feuille avant vers le bas et de fermer l'enveloppe et de la remettre dans sa position d'origine.

• Allez à 2.8s, sélectionnez "sheet_top_bgr" et ajoutez des images clés de position.
  • Faites de même pour "sheet_top_content".
• Nous devons ajouter plus de temps, car la chronologie par défaut est de 3 secondes. Cliquez sur l'icône en forme de rouage dans le coin inférieur gauche au-dessus de la chronologie, changez la durée en 00:04:50 (figure 21) et appuyez sur "Entrée". Nous avons maintenant prolongé le délai.
• Passez à 3,6 s, ajoutez une autre paire d'images clés de position et définissez leurs valeurs sur 0 360. Modifiez l'accélération de la position des deux calques sur Ease-in-out.

• À 1.3s, sélectionnez "top_closed" et "top_opened", et ajoutez des images clés Scale.
• Ajoutez-en deux autres à 1,5 s. 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 déplacer l'enveloppe vers le centre et de nous assurer que le rabat supérieur réapparaît. Allez à 3s et ajoutez une image clé Position pour "g". Ajoutez-en une autre à 3,4 s et faites-en 0 0. Passez à 2,8 s et ajoutez une image clé Opacity 0% pour "top_closed". Ensuite, passez à 3s et changez l'opacité à 100%.

Toutes nos félicitations! Nous avons animé toute l'icône. 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 formulaire de newsletter simple et y avons inclus l'icône. Vous pouvez exporter l'icône depuis SVGator en cliquant sur "Exporter SVG".

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

Cela fonctionne en ayant deux icônes SVG : la première est statique avec seulement la première image de l'animation incluse, et la seconde est celle animée. Vous pouvez trouver l'icône statique dans le fichier Sketch → Plan de travail "exporter statique". Nous l'avons inclus en tant qu'élément SVG en ligne dans le code. Nous avons également inclus le SVG animé en ligne, mais l'avons masqué par défaut. Vous pouvez consulter le code dans le téléchargement. Lorsque "S'abonner" reçoit un clic, nous masquons le SVG statique et montrons celui animé, qui démarre automatiquement.

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

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… avec ça:

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

Cela supprimera le rectangle gris qui s'affiche de manière incorrecte au-dessus de tous les éléments.

Cet exemple montre également à quel point les SVG sont bons dans la conception réactive : si vous réduisez la fenêtre, la mise en page se réorganisera et l'icône s'agrandira sans aucune perte de qualité.

Conseil : Lorsque nous avons réduit l'icône, nous avons constaté qu'il fallait trop de temps pour que la feuille sorte du canevas. Nous avons donc dû revenir en arrière et modifier un peu cette synchronisation particulière pour la raccourcir. Nous avons déplacé les dernières images clés de position de « sheet_top_bgr » et « sheet_top_content » à 3,2 s pour accélérer le mouvement .

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

Conclusion

Nous sommes très enthousiasmés par des outils tels que SVGator, qui accélèrent vraiment le processus lorsque vous créez des animations SVG simples. 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 à être utilisé sur le Web. Le comparer à After Effects, c'est des pommes et des oranges, car les deux outils sont si différents.
• Lors de l'utilisation de SVGator pour des explorations rapides , les débutants y verront une plus grande valeur, mais cela ne signifie pas qu'il leur est destiné uniquement. 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 tout ce que vous voulez. Le seul inconvénient est que toute l'animation est placée dans une chronologie, ce qui signifie qu'il s'agit essentiellement d'une animation CSS, et 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 pas déclencher d'é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 rendre l'animation SVG plus facile et plus rapide. Il est clair que vous pouvez en faire plus si vous codez le tout à partir de zéro, mais combien de temps cela vous prendra-t-il ?
• L'un des principaux avantages de SVGator est qu'il est très convivial 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 bénéficient d'un essai gratuit de sept jours une fois qu'ils ont créé un compte. Toutes les fonctionnalités sont incluses, et une fois l'essai terminé, ils peuvent toujours télécharger les animations depuis leur section "Mes projets". Vous pouvez vous abonner à l'application mensuellement (18 $ par mois), trimestriellement (45 $ par trimestre) ou annuellement (144 $ par an).

Lectures complémentaires sur SVGator

• Comment animer SVG à l'aide de SVGator (vidéo)
• Twitter de SVGator (contient de nombreux mini-tutoriels et des mises à jour fréquentes sur l'application)
• FAQ sur SVGator

Lectures complémentaires sur l'animation SVG à l'aide de code

• "Comment j'ai cessé de m'inquiéter et j'ai appris à animer du SVG", Boaz Lederer, Medium
• "Comment optimiser le code SVG et animer une icône SVG à l'aide de la bibliothèque CSS et Snap.svg", CodyHouse
• "Animations CSS pour les non-développeurs, partie 2 - SVG", Nicholas Kramer, Prototypr
• "Comment créer facilement de belles animations SVG", Lewis Menelaws, Medium

Un merci spécial à Boyan Kostov pour nous avoir aidés avec cet article - nous apprécions votre temps et vos efforts !