Catégories
Plugin et site web

Qu'est-ce que l'animation SVG? – Magazine Smashing

Nous parlons d'animation SVG. Comment les images vectorielles, JavaScript et CSS peuvent-ils tous fonctionner ensemble pour fournir des animations graphiques attrayantes? Drew McLellan parle à l'expert SVG Cassie Evans pour le savoir.

Aujourd'hui, nous parlons d'animation SVG. Comment les images vectorielles, JavaScript et CSS peuvent-ils tous fonctionner ensemble pour fournir des animations graphiques attrayantes? J'ai parlé à l'expert SVG Cassie Evans pour le savoir.

Afficher les notes

Mise à jour hebdomadaire

Transcription

Photo de Cassie EvansDrew McLellan: Elle est une développeur front-end et une conférencière avec une formation en design graphique et motion design. Elle a commencé le codage à l'époque de MySpace et de Neopets et a pour mission de rendre le Web plus fantaisiste à nouveau. Elle travaille actuellement chez Clearleft à Brighton au Royaume-Uni, et peut généralement être trouvée en train de bricoler des SVG sur CodePen. Nous savons donc qu’elle est une développeur et une experte en SVG, mais saviez-vous qu’elle a été championne nationale junior de marche pendant trois années consécutives? Mes amis fracassants, veuillez souhaiter la bienvenue à Cassie Evans. Bonjour Cassie. Comment allez-vous?

Cassie Evans: Je fracasse, merci.

A dessiné: Je voulais vous parler aujourd'hui d'une de vos passions, qui est le SVG, et en particulier le côté animation des choses. Je pense que la plupart des gens qui écoutent ce podcast auront entendu parler des graphiques vectoriels évolutifs sous une forme ou une autre. Je sais que je les ai beaucoup utilisés avec des choses comme des logos et des icônes ces dernières années, mais ne supposons pas. Donc, pour tous ceux qui ne sont pas vraiment au courant de SVG, qu'est-ce qui le différencie des autres façons d'ajouter des graphiques à une page Web?

Cassie: Donc, beaucoup d'indices sont dans le nom, bien sûr. Donc, SVG signifie Scalable Vector Graphic. Donc, ce sont d'abord les images qui peuvent être de n'importe quelle taille. Vous pouvez les rendre vraiment, vraiment petits ou vraiment, vraiment grands, et ils conserveront la qualité d'image et ne seront pas pixélisés comme les JPEG ou les PNG.

Cassie: Vous pouvez également les rendre vraiment, vraiment petits, si petits en taille de fichier. Donc, tout le monde a en quelque sorte ajouté un PNG à son site qui représente un million de mégaoctets et vu ce que cela fait pour charger la page. Ainsi, vous pouvez ajouter toutes sortes d'illustrations et de trucs sympas à votre site sans trop affecter les performances, et vous pouvez également les animer pour que ce soit la partie la plus excitante. Avec les JPEG ou les PNG, si vous vouliez les animer ou en déplacer des morceaux, vous devrez les découper en petits morceaux ou les superposer les uns sur les autres, alors qu'avec les SVG, vous avez des éléments réels. le SVG. Il a une structure DOM tout comme HTML.

A dessiné: Donc, je suppose que dans un monde d'appareils mobiles avec différentes tailles d'écran et différentes densités de pixels et sortes de connexions de données contraintes, SVG est vraiment un format qui est plus adapté au Web moderne que les anciens styles graphiques. Est-ce juste?

Cassie: Oui définitivement.

A dessiné: La plupart des images sont bien sûr basées sur des binaires, mais SVG est totalement source de vue, n'est-ce pas?

Cassie: Ouais. Donc, c'est vraiment excitant parce que vous pouvez réellement cliquer avec le bouton droit de la souris et afficher la source sur un SVG et vous pouvez parcourir le DOM et voir en quelque sorte ce que vous avez et apprendre de cette façon, ce que je trouve vraiment génial. Cela ressemble beaucoup à l'ancien Web, comme être en mesure d'accéder à un site Web et de voir la source dessus et de voir comment il est assemblé.

A dessiné: Le SVG semble plus natif et intégré au Web que des choses comme peut-être Canvas ou même à l'époque Flash, qui bien sûr était des graphiques vectoriels évolutifs, n'est-ce pas? À sa manière. Et ces technologies ressemblent beaucoup à une boîte noire encastrée sur la page dans laquelle vous ne pouvez pas entrer ou sortir. SVG est beaucoup plus intégré n'est-ce pas?

Cassie: Ouais. C'est drôle que vous disiez cela, car je considère toujours Canvas comme une boîte noire lorsque les gens me demandent s'ils doivent utiliser Canvas ou SVG pour quelque chose. Je pense que la plupart du temps, cela dépend évidemment du cas d'utilisation, mais l'une des choses avec Canvas est que si vous n'avez pas de JavaScript pour une raison quelconque, si votre code échoue, vous vous retrouvez avec une petite boîte noire sans rien dedans. Vous pouvez donc créer cette infographie folle, toutes sortes de choses se déroulant à l'intérieur de cet élément Canvas, puis vous perdez tout. Alors que SVG, il est beaucoup plus aligné sur l'amélioration progressive, vous pouvez donc avoir un SVG animé, peut-être que c'est animé à l'aide de JavaScript, mais sans JavaScript, vous aurez toujours l'illustration. Vous y trouverez toujours le SVG.

A dessiné: Et SVG n'est pas nouveau sur le Web, n'est-ce pas? Il existe depuis un bon moment.

Cassie: C'est vrai, oui. Cela fait plus longtemps que je ne fais des trucs sur le Web.

A dessiné: Et cela semble certainement prendre beaucoup plus de sens avec des choses comme l'animation, comme vous l'avez dit, mais aussi comme nous l'avons mentionné, la façon dont il évolue le rend parfaitement adapté lorsque nous concevons des sites qui pourraient être visualisés sur un écran Retina avec une densité de pixels doublée, ou doivent être diffusés via une connexion mobile où vous voulez que les choses soient aussi performantes que possible. Nous savons donc que SVG a un DOM, vous l'avez mentionné. Cela signifie-t-il que les éléments qu'il contient peuvent être manipulés avec du code?

Cassie: Oui, c'est donc la chose la plus excitante. Vous pouvez obtenir des éléments SVG et vous pouvez les animer et les déplacer comme vous le pouvez avec des éléments HTML DOM, et cela signifie également du point de vue de l'accessibilité, SVG a un DOM afin que vous puissiez parcourir ce DOM si vous utilisez un écran lecteur ou quelque chose, vous pouvez donc rendre les graphiques SVG très accessibles aux lecteurs d'écran.

A dessiné: Oui, j'allais donc poser des questions sur la situation de l'accessibilité car, classiquement, le contenu graphique d'une page est l'une des choses les plus difficiles à rendre accessible. Alors, y a-t-il une sorte d'attributs que vous pouvez ajouter à un indice? Pouvez-vous utiliser les éléments ARIA en SVG ou comment cela fonctionne-t-il?

Cassie: Ouais. Vous pouvez utiliser ARIA étiqueté par, mais vous avez également des balises de titre et de description que vous pouvez insérer dans un SVG.

A dessiné: C'est incroyable et en termes de préférences de mouvement, car c'est quelque chose que nous avons vu récemment avec une requête multimédia en CSS pour voir que l'utilisateur préfère un mouvement réduit et que vous pouvez modifier vos animations et les choses en fonction de cela, c'est quelque chose que vous peut faire en SVG ou doit-il être implémenté un peu plus manuellement?

Cassie: Eh bien, avec SVG, les gens parlent souvent d'animation SVG comme si c'était son propre genre de chose spéciale et bien sûr, nous avions SMIL. Nous avons toujours SMIL techniquement. Il devenait obsolète, mais en fait, il n’est plus obsolète. Ce n’est tout simplement pas aussi largement utilisé et ne fonctionne plus, mais nous avions l'habitude d'avoir SMIL et c'est ce que la plupart des gens appellent l'animation SVG. Alors que maintenant, l'animation SVG pouvait signifier l'une de ces choses. Cela pourrait signifier SMIL, cela pourrait signifier une animation CSS, ou cela pourrait signifier une animation à l'aide de JavaScript ou d'une bibliothèque d'animations JavaScript. Donc, il y a beaucoup d'options différentes, mais avec l'animation CSS et l'animation JavaScript, l'option d'utiliser préfère un mouvement réduit est là et doit absolument être utilisée.

A dessiné: Vous avez donc évoqué l’animation CSS et, bien sûr, nous pouvons faire un certain nombre d’efforts, comme les éléments HTML et l’animation CSS, pour créer des graphiques et du mouvement sur une page. SVG tout comme les coups qui sortent de l’eau en termes de flexibilité, non?

Cassie: Ouais absolument. Je pense que les gens font des choses incroyables avec juste CSS, comme Lynn Fisher fait des choses vraiment incroyables. Il y a toutes sortes de gens qui font des illustrations folles uniquement en CSS, mais cela prend beaucoup de temps et le transfert est pratiquement impossible. Comme si vous imaginiez un concepteur vous donnant une illustration et vous demandant de la recréer dans un CSS, ce serait un gros ticket. Donc, SVG rend beaucoup plus faisable d'avoir ces équipes interdisciplinaires et de passer les choses d'une personne à une autre. Vous pouvez donc demander à un illustrateur ou à un concepteur de créer une illustration dans un programme de graphisme vectoriel comme Illustrator, puis de transmettre ce SVG à un développeur qui peut l'animer.

A dessiné: Et je suppose que cela s'intégrerait très bien dans les flux de travail établis par les gens. Nous utilisons des choses comme Git, car SVG est basé sur du texte, n'est-ce pas? Donc, vraisemblablement, en validant des SVG dans Git, vous obtenez toute cette capacité de comparaison et de fusion et toutes ces fonctionnalités puissantes que vous obtenez avec d'autres éléments basés sur du texte. Est-ce correct?

Cassie: Oui exactement.

A dessiné: Donc c'est un peu comme, enfin je dis un peu comme, c'est absolument des graphiques exprimés sous forme de code.

Cassie: Oui.

A dessiné: N'est-ce pas? SVG?

Cassie: C'est.

A dessiné: Et cela ressemble beaucoup au HTML dans sa syntaxe. C'est un autre langage basé sur XML, n'est-ce pas?

Cassie: Oui.

A dessiné: Donc, il a des balises et des attributs, des enfants imbriqués et tout ce genre de choses auxquelles votre développeur Web moyen sera habitué.

Cassie: Je pense que c'est ce que j'aime le plus à propos du SVG, c'est que je suis vraiment dans le codage créatif et aussi l'enseignement aux gens, et j'ai trouvé qu'enseigner aux gens qui sont plus créatifs, ils sont parfois un peu déstabilisés lorsque vous vous lancez immédiatement avec JavaScript ou Python ou quelque chose comme ça pour le codage créatif, mais sans faute, j'ai réussi à intégrer tous ceux à qui j'ai enseigné avec SVG car il a des points d'entrée vraiment abordables car il ressemble à du HTML. Donc, vous pouvez donner à quelqu'un avec une compréhension de HTML et comment créer des sites Web SVG, et cela a la même apparence, mais ce sont les graphiques au lieu de documents et vous pouvez ensuite animer cela avec CSS pour commencer, ce qui est aussi un peu plus confortable, et vous pouvez ensuite progresser vers l'animation avec JavaScript. C’est donc une très bonne courbe d’apprentissage.

A dessiné: Et bien sûr, cela peut être dynamique. Il ne s’agit pas simplement de créer du mouvement. Vous pouvez en fait rendre les propriétés dynamiques. Donc, une des choses intéressantes pour lesquelles j'ai vu SVG utilisé, et c'est un grand terme, mais comme la visualisation de données, DataViz, et dessiner des graphiques et des graphiques et bien sûr des choses comme des tableaux de bord que nous semblons avoir partout ces jours-ci. SVG est en quelque sorte parfait pour ça, non?

Cassie: Oui définitivement. SVG est idéal pour DataViz. Du genre de petit DataViz à D3, qui est une bibliothèque DataViz très connue qui utilise SVG sous le capot. Mais vous pouvez aussi simplement, si vous avez un peu de données que vous souhaitez afficher sur une page Web, vous pouvez créer un graphique dans un programme d'édition graphique, puis vous pouvez simplement utiliser JavaScript pour modifier ces valeurs et ce type de changez l'apparence de votre graphique. Vous n’avez donc pas à vous lancer dans une énorme bibliothèque de bases de données. Vous pouvez en quelque sorte commencer petit.

A dessiné: De toute évidence, une sorte de graphiques et de graphiques traditionnels et d'autres choses ne sont en quelque sorte que la pointe de l'iceberg en ce qui concerne les façons dont SVG peut aider à la visualisation des données. J'ai vu que vous aviez un projet intéressant que vous aviez réalisé chez Clearleft avec vos panneaux solaires sur le toit. Pouvez-vous nous en dire un peu plus?

Cassie: Ce projet était en fait censé être moi en train d'apprendre D3 et je me suis ensuite beaucoup distrait. Nous avons des panneaux solaires sur le toit de notre bureau, ce qui me manque complètement en fait, cela fait si longtemps, mais oui, nous avons des panneaux solaires sur le toit et j'ai découvert peu de temps après avoir commencé à travailler chez Clearleft que nous avions une API qui était attaché aux panneaux solaires auxquels vous pouviez vous accrocher. Alors j'étais comme …

A dessiné: Incroyable.

Cassie: Droite. J'ai besoin que ce soit mon projet parallèle, et j'ai jeté un petit coup d'œil à ce que nous avons obtenu de l'API et parmi les données, il y avait la quantité de CO2 économisée et ils ont mesuré la quantité de CO2 dans les arbres.

A dessiné: D'accord.

Cassie: Je me suis donc immédiatement dit, wow, eh bien, nous allons devoir tracer cela d’une manière ou d’une autre, mais je veux le mesurer dans les arbres parce que c’est une façon très intéressante de tracer cela. Donc, toutes mes aspirations D3 sont sorties de la fenêtre et je me suis assis dans l'illustrateur et j'ai recréé une illustration de notre immeuble de bureaux et créé une jungle d'arbres, de plantes et d'autres choses, puis je regarde combien de CO2 nous avons économisé et puis en quelque sorte de plus en plus dans ces plantes, ces vignes et tout ça. Ouais, c’est génial. C’est vraiment bien de revenir de temps en temps pour voir à quel point la jungle a grandi.

A dessiné: C’est une façon incroyablement créative de visualiser ces données, alors que si vous vous fiez à un logiciel traditionnel pour créer des graphiques, des graphiques et des objets, il n’y aura jamais de fonction pour créer un immeuble de bureaux avec des arbres au sommet. Que cela n'existe tout simplement pas, mais en utilisant JavaScript et SVG pour pouvoir générer ces graphiques et en utilisant le JavaScript pour les manipuler pour ajuster les valeurs affichées, vous pouvez proposer quelque chose de complètement nouveau dans un tout nouveau. manière de communiquer une idée à la personne utilisant le site. Donc, nous savons que nous pouvons coder le balisage pour les SVG, ce que moi en tant que développeur, je pense que cela sonne bien car je peux entrer et je peux être très précis, mais c'est probablement une compétence technique qui ne conviendra pas. tout le monde, en particulier ceux dont les atouts sont plus créatifs visuellement que le codage réel. Existe-t-il donc d'autres moyens de créer des SVG ou devez-vous le faire à la main et dans un éditeur de texte?

Cassie: Je pense que j'ai écrit une icône de hamburger une fois juste du haut de ma tête et j'étais super fier de moi, mais le reste du temps, je crée des SVG dans Illustrator ou d'autres alternatives. Le concepteur d'affinité est vraiment bon. Illustrator a évidemment la structure de prix d'Adobe, qui peut être un peu en dehors du budget des gens, mais Affinity Designer est comme un achat unique et c'est plutôt bon en fait, et le balisage SVG que vous en retirez est bon, ce qui est le plus chose importante. Mais oui, je ne pense pas qu'il y ait quelqu'un à part, c'est un gars appelé Blake Bowen sur les forums GreenSock, et je pense qu'il pourrait probablement écrire à la main des données de chemin SVG, mais je ne pense pas que ce soit une chose que tout le monde peut faire . Je ne pense pas que ce soit une chose à laquelle nous devrions aspirer. C'est assez verbeux.

A dessiné: Donc, étant léger en utilisant un outil graphique dédié pour créer des SVG, c'est une route parfaitement valide.

Cassie: C'est bon. Choisis tes combats.

A dessiné: Existe-t-il des outils gratuits pour filtrer les SVG ou est-ce que tout est commercial?

Cassie: Je pense qu'Inkscape est gratuit, mais oui, je recommanderais vraiment Affinity Designer. Je pense que pour le type de niveau moins cher, je pense qu'il vaut la peine de payer un peu d'argent pour ces outils, car il peut être assez frustrant de travailler avec des outils graphiques vectoriels maladroits.

A dessiné: En termes de sortie, la sortie SVG que vous obtenez de ces outils, est-ce la même chose? Génèrent-ils tous simplement le même SVG ou certains meilleurs que d'autres?

Cassie: Ouais, c’est une très bonne question. Je trouve qu'Illustrator est bien meilleur que les autres outils, mais ce n'est pas quelque chose qui devrait vous retenir ou vous donner l'impression que vous devez dépenser cet argent. Donc, à la fin de la journée, vous obtiendrez un certain balisage, certains éditeurs dont vous devrez peut-être faire un peu plus de peaufinage que d'autres, mais la plupart d'entre eux vous permettront d'obtenir un code SVG exploitable.

A dessiné: J’ai constaté personnellement lorsque j’ai essayé de créer des SVG, et que je ne suis pas graphiste, que j’obtiens des résultats variables en fonction de la façon dont je dessine réellement quelque chose dans Illustrator, par exemple. Vraisemblablement, quand il s'agit de réfléchir à la façon dont quelque chose va être animé, la façon dont vous construisez vos formes dans les éditeurs est plus importante. Est-ce juste?

Cassie: Ouais absolument. SVG a également un ordre de dessin implicite, donc ce n'est pas comme HTML. Donc, avec HTML, vous pouvez utiliser cet index pour déplacer des choses et mettre des choses en dessous ou au-dessus d'autres choses, alors qu'avec SVG, l'ordre dans lequel il se trouve dans le code sera l'ordre dans lequel il est affiché sur la page Web. C'est donc quelque chose à garder à l'esprit lorsque vous dessinez un SVG, c'est mettre vos calques dans le bon ordre, puis tout ce que vous voulez déplacer en une seule unité, vous devez l'envelopper dans un groupe et tout ce que vous voulez déplacer séparément à partir de quelque chose d'autre, vous devez vous assurer qu'il s'agit bien d'une forme distincte.

A dessiné: Oui, donc je veux dire en mettant vos calques en ordre là-bas, vous parlez littéralement de la palette de calques dans Illustrator et en faisant glisser les éléments avant d'exporter, n'est-ce pas? Il suffit de les mettre dans le bon ordre, puis de les exporter.

Cassie: Oui.

A dessiné: Et une fois que vous l'avez exporté, il existe des outils qui vous aideront en quelque sorte à optimiser ou, parce que je sais avec les PNG, il y a tout un tas de choses que j'utilise pour supprimer tout le métier du fichier et réduire la taille du fichier. Y a-t-il des choses similaires pour SVG?

Cassie: Ouais. Il existe un outil appelé SVGOMG, que j'utilise beaucoup, ce qui est génial et vous pouvez l'utiliser pour le traitement par lots. Il y a des commandes de terminal pour cela, mais vous pouvez aussi, il y a un Gooey dans le navigateur, ce que j'aime vraiment pour les grands SVG illustratifs parce que je pense que c'est bien de l'intégrer dans, disons votre processus de construction, si vous avez affaire à une charge énorme d'icônes que vous voulez tous traitées de la même manière, mais si vous avez affaire à un SVG illustratif, c'est bien de pouvoir utiliser le gluant car vous pouvez basculer entre la vue de code et la vue visuelle et vous pouvez simplement vous assurer que les choses que vous modifiez dans les paramètres n'affectent pas visuellement votre SVG de manière négative et n'affectent pas le code d'une manière dont vous ne le souhaitez pas.

A dessiné: Vraisemblablement, ces outils, comme Illustrator, sont parfaits pour créer des graphiques, mais ils ne vont pas du tout nous aider avec l'animation, n'est-ce pas? Tout cela se produit une fois que nous obtenons le SVG et le mettons dans une page Web.

Cassie: Ouais.

A dessiné: Alors, à quoi ressemble ce processus? Je veux dire, de toute évidence, il est difficile de trop parler d’animation dans un podcast audio, mais en ce qui concerne le type de processus que vous devez suivre. Vous mettez votre SVG dans une page, que se passe-t-il alors? Comment en abordez-vous certaines parties ou que faites-vous pour commencer à travailler avec?

Cassie: C'est donc très similaire à l'animation d'éléments HTML DOM en ce sens que vous devez pouvoir cibler les éléments eux-mêmes. Cela impliquerait donc de mettre des classes ou des identifiants sur eux afin que vous puissiez les cibler, puis vous pouvez soit utiliser CSS pour l'animation. Il y a des problèmes avec les transformations avec CSS qui sont encore en train d'être un peu réglés. J'ai donc tendance à recommander CSS pour expérimenter et jouer avec l'animation SVG. En ce qui concerne l'animation et la production SVG, je recommanderai généralement GreenSock, qui est une bibliothèque d'animation JavaScript, et oui, bien avec GreenSock et avec CSS, vous obtenez essentiellement les éléments SVG, puis vous leur faites des choses.

A dessiné: Alors, avez-vous un accès complet pour interagir avec la gamme complète d'API JavaScript et des choses comme les événements de défilement et les événements de souris, le redimensionnement et l'intersection et tout l'environnement de navigateur que vous avez probablement à votre disposition, pour ensuite faire interagir votre animation et y répondre à.

Cassie: Ouais. Donc, tout ce que vous utiliseriez en JavaScript normal, comme les événements de souris ou le défilement, ce genre de chose, vous pouvez le rechercher et faire des choses à votre SVG sur ces événements. Vous avez également des méthodes et des trucs spécifiques au SVG, comme get PATHlink, je pense en est un, des trucs comme ça, donc il y a des méthodes SVG spécifiques avec lesquelles vous pouvez jouer.

A dessiné: Ainsi, vous pouvez faire des choses par exemple, comme démarrer une animation lorsqu'un SVG apparaît sur la page s'il est déplacé hors de sa place et l'arrêter lorsqu'il est défilé et le redémarrer s'il revient en vue et ce genre de chose.

Cassie: Ouais. Il existe en fait un nouveau plugin GreenSock appelé ScrollTrigger et auparavant, je pense que beaucoup de gens ont utilisé ScrollMagic pour les animations de défilement, mais c'était une bibliothèque différente de GreenSocks, donc ils n'avaient aucune sorte d'affiliation les uns avec les autres, donc vous étiez juste en train de mélanger deux différents bibliothèques, une qui faisait de l'animation et une qui faisait défiler les événements. Alors que GreenSock vient de créer un plugin de défilement qui fonctionne avec GreenSock et qui a un écouteur d'événements. Un auditeur par défilement. Ouais. C’est donc très, très performant et j’ai joué avec récemment et c’est génial. C'est vraiment facile à utiliser.

A dessiné: Est-ce automatiquement mis en mémoire tampon pour que vous ne soyez pas complètement submergé par les événements de défilement déclenchés sur votre code et toutes ces sortes de problèmes traditionnels?

Cassie: Oui, tous les problèmes traditionnels, ils font en quelque sorte tout le gros du travail en arrière-plan pour vous, ce qui est bien.

A dessiné: Fantastique. GreenSock serait-il alors l'outil, le genre de bibliothèque, que vous recommanderiez aux gens de commencer à utiliser s'ils regardaient une animation SVG?

Cassie: Oui définitivement. Principalement parce que GreenSock, c'est la seule bibliothèque d'animation qui gère les transformations SVG de manière cohérente entre les navigateurs et ce n'est pas seulement quelque chose sur lequel ils ne se concentrent plus. C'est un effort constant de leur part, ils sont donc constamment à la recherche de bogues SVG et à la résolution de problèmes. C'est donc très fiable. Absolument.

A dessiné: À quoi ressemble le genre de situation entre navigateurs avec SVG? Est-ce assez fiable ou êtes-vous constamment confronté à des incohérences entre différents navigateurs et plates-formes?

Cassie: Si vous animez avec GreenSock, ce n'est pas le cas. Si vous animez avec CSS, oui, il y a quelques incohérences. Il s'agit principalement de la manière dont les transformations sont gérées. Ainsi, avec les éléments HTML DOM, les transformations sont mesurées à partir du centre, et avec les transformations SVG, elles sont mesurées à partir du coin supérieur gauche, mais dans certains navigateurs, c'est le coin supérieur gauche de l'élément lui-même, et dans d'autres navigateurs, c'est le coin supérieur gauche. coin de la main du parent de la boîte de vue SVG. Ainsi, vous pouvez vous retrouver, si vous faites pivoter des éléments dans certains navigateurs, ils peuvent finir par suivre une trajectoire différente de celle d'autres.

A dessiné: Cela ressemble à la plupart des animations que j'ai jamais essayé de scénariser. Les choses vont dans des directions inattendues. Nous sommes habitués à une sorte d’outils d’animation traditionnels, avec des options telles que des options d’assouplissement, une facilité d’accélération, etc. C'est probablement quelque chose que GreenSock apporte ensuite à la table.

Cassie: Ouais. GreenSocks a beaucoup de très bonnes équations d'assouplissement que vous pouvez utiliser. Oui, et ils ont un visualiseur très facile pour que vous puissiez voir un peu comment les facilités fonctionneront.

A dessiné: C’est vraiment utile, et encore une fois, c’est quelque chose avec lequel je lutte toujours. C’est comme, je sais que je devrais faire quelque chose. Il ne devrait pas simplement se déplacer linéairement de A à B, mais que dois-je faire? Alors oui, être capable de visualiser des choses est vraiment pratique.

Cassie: Quand j'ai commencé à créer des animations, j'ai fait beaucoup d'animations spatiales parce que je n'avais pas encore tout à fait compris comment l'assouplissement fonctionnait, donc dans l'espace, tout se déplace de manière linéaire parce qu'il flotte simplement. Il n’a pas de gravité à affronter, alors j’ai fait beaucoup de fusées, de planètes qui tournoyaient et c’était bien.

A dessiné: Je veux dire, je suppose que vous, étant un passionné de SVG, vous voyez probablement des gens qui mettent le SVG à toutes sortes d’utilisations créatives. Quel genre de choses, juste pour faire couler le jus, quel genre de choses avez-vous vu des gens faire avec des SVG qui ont été particulièrement impressionnants ou créatifs?

Cassie: Je pense que l’une des choses que j’aime avec SVG est le fait que vous n’avez pas à l’utiliser pour des animations SVG illustratives par elles-mêmes, car il s’agit d’un balisage basé sur XML, tout comme le HTML. Vous pouvez en quelque sorte le mélanger avec le DOM HTML. Donc, je pense que c'est un peu ringard, mais mes exemples préférés d'animation SVG sont lorsque les gens mélangent une animation SVG avec des éléments DOM sémantiques, donc quand vous avez un bouton qui est un bouton approprié mais il contient une illustration d'icône SVG. de sorte que lorsque vous cliquez sur ce bouton, quelque chose de joyeux se produit, et j'aime cela parce que c'est ce mariage parfait d'une sorte de joie fantaisiste et d'éléments DOM sémantiques appropriés.

A dessiné: Vous avez dit dans le passé que le développement du front-end est devenu très sérieux ces derniers temps. Est-ce que tout le plaisir est sorti du web Cassie?

Cassie: C’est une question très sérieuse. Tout le plaisir a-t-il disparu.

A dessiné: Parce que les choses étaient beaucoup plus amusantes, mais peut-être pas aussi efficaces et sommes-nous devenus trop sérieux?

Cassie: Ouais. Je pense que l'efficacité est un véritable tueur lorsqu'il s'agit d'ajouter ces petites améliorations. Je trouve que dans mon travail quotidien chez Clearleft, je me suis rapidement rendu compte que si je voulais avoir des animations en plus, comme un autre ticket ou quelque chose du genre, il était très difficile de faire signer cela. C’est toujours le fait que si le projet commence à être un peu à l’état limité, c’est la première chose à faire. Mais je pense qu’une fois que vous avez une bonne compréhension de l’animation et du SVG, vous pouvez simplement introduire des éléments pour commencer. Ainsi, lorsque vous créez un composant et que vous voyez une opportunité pour un peu d'animation, vous pouvez simplement l'ajouter et cela devient plus facile car les gens commencent à voir les possibilités et les gens commencent à se rendre compte que les clients aiment vraiment ce genre de chose. , et vous pouvez en quelque sorte avoir un peu plus de temps pour y travailler.

A dessiné: C'est le genre de chose qui peut vraiment élever une expérience au-delà d'une sorte de transaction ennuyeuse ou insatisfaisante à quelque chose qui donne à l'utilisateur juste un peu de joie et lui donne une sorte de perception de la qualité et une certaine personnalité de la marque. Je pense avec l'animation. Il y a un…

Cassie: Ouais.

A dessiné: Il y a beaucoup de choses en termes de personnalité de marque qui peuvent être exprimées avec ce genre de petites touches.

Cassie: Mais je pense que c'est quelque chose que beaucoup plus de gens réalisent également maintenant, pas seulement avec le SVG et l'animation, mais la personnalité en général, et je pense qu'il y a beaucoup plus de poids qui est donné à une copie bien écrite et un peu de la personnalité et des illustrations qui ne proviennent pas seulement d'une bibliothèque de stock qui sont uniques à cette entreprise ou à cette personne et les animations en sont une grande partie. Et je pense que j'ai personnellement l'impression que nous voyons plus de ces sites Web de nos jours et je pense que nous avons traversé, et traversons probablement encore un peu d'efficacité pendant la première période, mais je pense que tout ce dont les gens commencent à s'ennuyer cela et il semble que beaucoup de sites Web suggèrent d'être produits par une méga machine d'entreprise et que les gens commencent à faire marche arrière, je pense. Max Bock a récemment créé un site appelé le Web fantaisiste et il y a beaucoup de sites personnels qui sont vraiment joyeux pour diverses raisons et je pense que nous commençons à en voir beaucoup plus.

A dessiné: Est-il possible d'aller trop loin en ajoutant de l'animation et peut-être trop de personnalité à un site?

Cassie: Oui. Absolument. Je ne suis pas un grand fan des sites Web qui sont très, très, whizbang. Comme les sites Web qui sont d'abord l'animation. Vous arrivez à la page et tout bouge et vous essayez de lire le texte pendant que vous faites défiler, mais il bouge pendant que vous essayez de le lire. Je ne suis pas fan de ça. J'aime vraiment regarder l'animation comme une amélioration et je pense que c'est pourquoi SVG, je pense que c'est si génial parce que vous pouvez en quelque sorte créer un site Web par ailleurs assez sensé, mais vous pouvez y avoir ces petites touches fantaisistes.

A dessiné: Et c'est crucial, n'est-ce pas, comme nous l'avons mentionné précédemment, l'aspect d'accessibilité des choses qu'il est possible de créer un SVG joliment accessible, même s'il a une sorte de contenu, si vous êtes enfermé là-dedans, ce n'est pas fermé à clé. Il est accessible aux lecteurs d'écran et, espérons-le, à tous ceux qui visitent le site. Comme je l'ai dit, il est difficile pour un podcast de vraiment entrer dans les aspects pratiques de, eh bien, nous ne pouvons pas montrer d'animation ou quoi que ce soit, mais vous dirigez un atelier en ligne avec Smashing Conference sur SVG, n'est-ce pas?

Cassie: Oui.

A dessiné: C’est la MasterClass d’animation SVG et celle qui commence le 8 octobre et c’est un format assez inhabituel. C’est deux heures les jeudis et vendredis. C’est une façon inhabituelle de faire les choses, n’est-ce pas?

Cassie: Ouais. J'en suis vraiment très content car j'ai déjà fait une version de cet atelier. J'ai passé une grande partie de 2019 à le mettre en place. C'était mon bébé, mon projet de passion, et puis j'avais réservé quelques ateliers et puis la situation s'est produite et tous ont été annulés. J'ai donc eu l'occasion de l'exécuter deux fois avant la situation, et c'était vraiment génial mais c'était beaucoup de contenu et c'était un atelier d'une journée complète. Environ huit heures et vous pourriez dire à la fin que le cerveau des gens s’éteint simplement parce que vous êtes assis dans une pièce à essayer d’absorber des informations pendant huit heures. Je suis donc très enthousiasmé par ce format car cela signifie que je pourrais le diviser en sections qui fonctionnent par eux-mêmes et cela donne aux gens une chance de l'apprendre et de le traiter un peu et de le laisser pénétrer avant d'obtenir le prochain chargement d'informations. Je pense donc que nous allons obtenir des choses vraiment intéressantes à la fin simplement parce que les gens ont eu plus de temps à absorber.

A dessiné: C'est donc un jeudi et un vendredi, un jeudi et un vendredi, puis un jeudi pour finir avec deux heures chacun de ces jours, suivis de questions et de A. Je pense que c'est vrai, n'est-ce pas?

Cassie: Oui.

A dessiné: Questions et réponses sur chaque session. Qu'est-ce que les participants s'attendent à apprendre? Quelles devraient être leurs attentes en termes de compétences qu'ils pourraient acquérir?

Cassie: Il est donc plus orienté vers le côté codage d'animation de l'animation SVG. Nous allons donc aborder un peu comment extraire les SVG d'un éditeur graphique, puis tout le processus, de la sortie du code au début de son utilisation. Donc, optimiser et ajouter les bonnes classes et les structurer correctement, puis nous travaillerons sur l'animation des SVG. Nous allons donc utiliser CSS. Nous utiliserons également GreenSock, la bibliothèque d'animation que j'ai mentionnée, et nous couvrirons ce que j'appelle en quelque sorte les super pouvoirs SVG. Ce sont donc des choses que c’est, à part l’animation, ce que vous pouvez faire avec SVG.

Cassie: C'est comme le découpage, le masquage, l'animation de traits, les filtres, et tout cela est tellement important à comprendre avec SVG car il débloque tous ces types de super pouvoirs avec lesquels vous pouvez jouer. Nous examinerons également les performances et l’accessibilité, ainsi que les petits trucs que j’ai pris et appris en cours de route. Donc, de petits conseils pratiques que je trouve utiles pour mon flux de travail, des conseils pratiques qui aident avec des flashs de contenu non stylé avant de commencer à animer. Des petits conseils comme ça.

A dessiné: Cela semble vraiment utile. J'ai regardé juste avant de commencer notre entretien et il y a encore des places disponibles pour les lève-tôt, ce qui est super. Donc, si les gens sont rapides, ils pourraient encore les attraper et vous pouvez vous inscrire sur smashingconf.com. Il y a en fait un certain nombre de classes de maître différentes qui sont organisées en ce moment et il y a des offres précoces et des offres groupées sur certaines d'entre elles également. Donc, il y a des choses comme JAMstack, la mise en page CSS avec Rachel Andrew, Vue.js, les performances Web, GraphQL, des tas de masterclasses différentes et vous pouvez les trouver sur smashingconf.com. J'ai donc tout appris sur SVG. Qu'avez-vous appris récemment sur Cassie?

Cassie: Oh, j’ai récemment beaucoup appris sur Eleventy. Récemment, j’ai fait une petite refonte du site en utilisant Eleventy et j’ai également suivi le cours à partir de zéro d’Andy Bell’s Eleventy. Je m'intéresse donc beaucoup aux générateurs de sites statiques en général pour le moment.

A dessiné: C'est génial. Je pense que nous nous intéressons tous de plus en plus aux générateurs de sites statiques avec le temps.

Cassie: C’est l’avenir.

A dessiné: Si vous, cher auditeur, souhaitez en savoir plus sur Cassie, vous pouvez bien sûr vous inscrire à cette Masterclass d'animation avec Smashing Conf, mais vous pouvez également la trouver sur Twitter où elle est @Cassiecodes et son site Web personnel est cassie.codes et qui renvoie à son CodePen, qui est un endroit formidable à explorer. Merci de nous rejoindre aujourd'hui Cassie. Avez-vous des mots d'adieu?

Cassie: Je voudrais dire que Smashing et moi offrons des billets gratuits pour mon atelier. Ce sont donc des tickets pour la diversité qui sont destinés à tous ceux qui sont sous-représentés dans la technologie ou qui traversent actuellement une période financière difficile. Vous pouvez donc en faire la demande sur la page Web de mon atelier et j'espère vous y voir.

Éditorial fracassant(il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *