PhōsPixel

La fonction getTotalLength() + base dans Illustrator + animation et modifs dans un éditeur de code

Histoire

Formes: mon premier SVG animé

Dans le cours Udemy Learn SVG Animation – With HTML, CSS & Javascript, Sam propose cette méthode :

J’ai donc essayé CodePen pour la première fois, ça m’a plus d’obtenir des résultats en direct dans le navigateur et de voir le code bien divisé en trois boîtes.

Création des animations dans un éditeur de code

Confusion avec la fonction getTotalLength();

À partir de ce moment, la formation, qui date de 2017 ne fonctionne plus! Il y a bien d’autre cours plus récent sur Udemy, j’ai ai un autre d’ailleurs, mais j’avais choisi de débuter avec celle de Sam de par sa courte durée et la qualité des animations proposées.

Il est possible, par essais-erreur, de finir par deviner la longueur d’un trait (path) mais avec un dessin plus complexe qu’un carré ou un octogone, c’est ardu et imprécis. getTotalLenght() sert justement à calculer cette longueur. Sam utilise querySelector pour récupérer la classe et le retour dans la console dit que getTotalLenght() is not a function 🙁

Je me suis donc mise à chercher de quelle manière nous pouvons obtenir cette donnée, aujourd’hui, en 2023! Après être tombée sur une dizaine d’articles et de discussions sur stackverflow, Github, Reddit et Medium de personnes se plaignant que cette fonction ne fonctionne plus et a été retirée (depricated) je finis par tomber sur un package datant d’il y a trois mois, à installer avec node, svg-path-properties.

Je recommence donc tout dans VS Code, délaissant ainsi CodePen. Le package fonctionne en effet! J’obtiens bien la longueur du trait dans la console et je peux continuer d’animer le logo, tout en découvrant avec joie que l’extension SVG anime mon code directement dans VS Code!

Quelque chose me chicote quand même. Je trouve que le processus de création SVG devient d’une lourdeur avec le package de Node et quelque chose me dit que ça n’a pas de bon sens. Pourtant, je ne trouve aucune autre discussion sur le sujet. Je décide donc de chercher dans CodePen et tombe sur l’animation SVG toute simple d’un carré, d’une personne démontrant la fonction… getTotalLenght()!

getTotalLenght() fonctionne toujours mais avec un id et getElementById !

Je peux enfin continuer mais je décide de rester dans VS Code et je ne retourne pas dans CodePen. Je m’amuse enfin à modifier couleur et animations à mon goût.

Code final de mon preview SVG animé dans VS code. Remarquez que j’ai déclaré contexte xmlns et un titre.

<svg xmlns="http://www.w3.org/2000/logo-sam" viewBox="0 0 300 300">
  <title>Formes: mon premier SVG animé</title>
  <style>
    @keyframes animer-st3-sam {
      0% {
        transform: rotate(360deg)
      }
      to {
        transform: rotate(0deg)
      }
    }

    @keyframes dessine-octogone-sam {
      0% {
        stroke-dashoffset: -665;
        transform: rotate(360deg)
      }
      to {
        stroke-dashoffset: 0;
        transform: rotate(0deg)
      }
    }

    @keyframes dessine-carre-sam {
      0% {
        stroke-dashoffset: -894;
        transform: rotate(0deg)
      }
      to {
        stroke-dashoffset: 0;
        transform: rotate(720deg)
      }
    }

    @keyframes animer-cercle-sam {
      0% {
        stroke-dashoffset: -665;
        transform: rotate(360deg) scale(.6)
      }
      50% {
        transform: rotate(0deg) scale(1.2)
      }
      to {
        stroke-dashoffset: 0;
        transform: rotate(0deg) scale(1)
      }
    }
  </style>
 
 <circle cx="140" cy="152" r="85"
    style="fill:#17bebb;animation:animer-cercle-sam 2s infinite cubic-bezier(.2,.97,.83,.7);transform-origin:50% 50%;transform:scale(.6)" />
  <path d="M195.63 56.17H84.88L29.5 152.09 84.88 248h110.75l55.38-95.91z"
    style="fill:none;stroke:#4b1d3f;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:665;stroke-dashoffset:-665;animation:dessine-octogone-sam 2s infinite cubic-bezier(.2,.97,.8,1.18);transform-origin:50% 50%" />
  <path d="M23 45h233v214H23z"
    style="fill:none;stroke:#0e7c7b;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:894;stroke-dashoffset:-894;animation:dessine-carre-sam 2s infinite cubic-bezier(.2,.97,.8,1.18);transform-origin:50% 50%" />
  <path
    d="M85.36 151.07v8.36h-3.08v8.13H73v-19.34c0-3.64 1.12-6.65 3.37-9.03 2.25-2.38 5.07-3.57 8.48-3.57 3.76 0 6.9 1.62 9.43 4.86l-7.61 5.55c-.43-1.19-1.18-1.78-2.26-1.78-1.43 0-2.15.99-2.15 2.97v3.86h3.1zm23.58-15.46c4.42 0 8.2 1.61 11.36 4.82s4.74 7.06 4.74 11.53c0 4.55-1.59 8.42-4.77 11.6-3.18 3.18-7.05 4.77-11.6 4.77-4.52 0-8.38-1.6-11.58-4.8-3.2-3.2-4.8-7.06-4.8-11.58 0-4.57 1.61-8.43 4.83-11.6 3.22-3.16 7.16-4.74 11.82-4.74zm-.28 9.18c-1.9 0-3.53.7-4.86 2.1-1.34 1.4-2.01 3.09-2.01 5.07 0 1.98.67 3.67 2.02 5.07s2.97 2.1 4.85 2.1c1.92 0 3.54-.7 4.88-2.09 1.33-1.39 2-3.09 2-5.08 0-1.99-.67-3.69-2-5.08-1.34-1.39-2.96-2.09-4.88-2.09zm29.01-.02v22.79h-9.27v-31.18h11.9c3.62 0 6.43.9 8.43 2.7 2.22 2.01 3.33 4.56 3.33 7.65 0 3.15-1.38 5.81-4.13 7.97l5.34 12.86h-9.73l-4.5-10.05v-8.02h.73c1.95 0 2.92-.84 2.92-2.51 0-1.48-1.13-2.22-3.38-2.22h-1.64zm18.07 22.79v-22.47c0-2.79.85-5.06 2.53-6.83 1.69-1.77 3.88-2.65 6.58-2.65 3.2 0 5.66 1.47 7.38 4.41 1.05-1.58 2.18-2.71 3.38-3.39 1.2-.68 2.69-1.02 4.45-1.02 2.8 0 4.95.88 6.44 2.65 1.49 1.77 2.24 4.31 2.24 7.63v21.67h-9.27v-20.28c0-1-.08-1.67-.24-2-.16-.33-.48-.49-.97-.49-.91 0-1.37.78-1.37 2.33v20.44h-9.27v-20.28c0-.99-.08-1.65-.25-1.99-.17-.33-.49-.5-.98-.5-.91 0-1.37.83-1.37 2.49v20.28h-9.28zm53.24-19.05v6.94h-6.05c-.82 0-1.4.12-1.75.37s-.51.65-.51 1.23c0 .65.17 1.08.52 1.29.35.21 1.07.31 2.15.31h6.24v8.91h-7.29c-3.43 0-6.04-.82-7.86-2.46-1.81-1.64-2.72-4-2.72-7.09V145.8c0-2.98.86-5.3 2.57-6.94 1.71-1.64 4.12-2.47 7.23-2.47h8.06v8.95h-5.91c-1.6 0-2.4.52-2.4 1.55 0 .61.19 1.03.57 1.27.38.24 1.06.35 2.03.35h5.12zm20.56-12.26v8.88c-.67-.23-1.19-.34-1.55-.34-.7 0-1.3.26-1.8.78s-.75 1.14-.75 1.87c0 .62.27 1.42.82 2.38l.71 1.23c1.28 2.22 1.92 4.37 1.92 6.44 0 3.03-1.08 5.6-3.23 7.7-2.16 2.1-4.78 3.15-7.89 3.15-1.49 0-2.97-.34-4.43-1.03v-9.02c.88.56 1.67.85 2.35.85.81 0 1.48-.23 2.02-.7s.81-1.05.81-1.75c0-.46-.43-1.45-1.3-2.99-1.39-2.44-2.08-4.87-2.08-7.31 0-2.94 1.05-5.47 3.14-7.59s4.59-3.19 7.5-3.19c1.27 0 2.52.21 3.76.64z"
    style="fill:#d4f4dd;transform-origin:50% 50%;animation:animer-st3-sam 3s infinite cubic-bezier(.2,.97,.83,.7)" />
</svg>