Ligne animée en SVG

Chris Coyier s'est intéressé aux animations SVG qu'on trouve un peu partout et il a voulu comprendre la base de cette technique. Il nous livre ses observations, c'est évidemment passionnant.

Par

Je suis sûr que vous avez tous vu ce petit truc où un chemin SVG est animé comme s'il se dessinait lui-même. Cool... Jake Archibald a lancé cette technique et il a écrit un super article là-dessus. Brian Suda a également écrit un article à ce sujet dans 24 Ways. Polygon l'utilise avec de beaux effets dans un article conçu pour l'illustrer. Codrops propose aussi des exemples sympa.

Je n'ai pas grand chose à ajouter, à part que mon petit cerveau s'est mis à y réfléchir et que je me suis dit que je pourrais expliquer la façon dont je l'ai compris.

NdT : Pour suivre pas à pas la démonstration, le mieux est d'utiliser le CodePen proposé par Chris Coyier et de remplacer la partie CSS par les indications données au fur et à mesure, c'est très parlant.

NdT : Pour une introduction générale à SVG, vous pouvez consulter l'excellent article de Chris Coyier Utiliser SVG.

1. Vous avez une forme SVG


2. La forme doit avoir un trait

La forme est réalisée en traçant un trait (traduit par stroke dans votre logiciel préféré et dans SVG).

3. Les traits peuvent être pointillés

Nous pourrions le faire avec Illustrator, mais nous pouvons aussi le programmer. Ciblons pour cela le chemin (path) avec CSS (en supposant que nous utilisons SVG inline ici, ou que nous l'intégrons via un <object>) et appliquons le pointillé de cette façon.

//HTML
<svg ...>
  <path class="path" stroke="#000000" ... >
</svg>

et notre CSS :

//CSS
    .path {
  stroke-dasharray: 20;
}

Ce qui nous donne des pointillés de 20px de long.

4. Ces pointillés peuvent être plus longs

//CSS
.path {
  stroke-dasharray: 100;
}


5. Nous pouvons "décaler" le trait...

... avec stroke-dashoffset et nous utilisons animation pour mettre en mouvement la position des pointillés :


C'était aussi simple que :

//CSS
.path {
  stroke-dasharray: 100;
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

6. Imaginez un pointillé looong...

...si long qu'il couvrirait toute la forme ! Il n'y aurait rien à voir, la forme tout entière semblerait continue, les pointillés auraient disparu.

Il suffit pour cela de donner à stroke-dasharray une valeur supérieure à celle du trait.

7. Maintenant décalons ce trait

...avec dashoffset de manière à ce qu'il ne couvre plus toute la forme. Tout se passe comme si la forme n'était plus là.

8. Animons le décalage du trait de retour à 0


Si nous le faisons avec CSS, nous voulons que dans animation l'animation-fill-mode soit égal à forwards de façon à ce que l'état final corresponde à la fin de l'animation.

//CSS
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Et voilà !

Exemple live

See the Pen bGyoz by Chris Coyier (@chriscoyier) on CodePen.

Pourquoi JavaScript ?

La plupart des exemples d'animations SVG utilisent JavaScript, parce qu'il est difficile de connaître la longueur du trait. Nous avons utilisé 1000 dans notre exemple parce qu'il se trouve que c'est la bonne longueur, mais vous pouvez obtenir cette longueur en JavaScript de la manière suivante :

//JavaScript
var path = document.querySelector('.path');
var length = path.getTotalLength();

Puis utilisez le comme vous voulez. Les articles que j'ai mentionnés au début vont bien plus loin dans les détails, consultez les pour trouver des choses plus originales. Je voulais juste introduire le concept, si ça peut vous donner envie d'approfondir.


Intéressé par SVG ? Sur la Cascade, retrouvez des articles et ressources.


original paru le dans CSS-Tricks.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Traduit avec l'aimable permission de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2014.