Animation (SVG ?)

Bonjour,

Je dois réaliser une animation relativement simple mais je dois avouer que je ne sais pas trop comment m’y prendre pour la terminer entièrement.

Voici un aperçu du résultat final attendu :


Son comportement est relativement simple. Rien ne s'affiche au chargement de la page, puis après x secondes, l'animation se déclenche. Les lignes se dessinent toutes en même temps, avec la même durée.

Mon premier test fonctionne bien, mais je ne sais pas comment ajouter les « flèches » à la fin des lignes. Voir mon codepen : https://codepen.io/lorraineS/pen/GRJrqvj

A noter que les flèches ne doivent pas forcement être toujours visibles. Ce qui compte, c’est qu’elles le soient à la fin de l’animation.

Ma technique part du principe que les lignes vectorielles sont « tracées » d’un seul et unique trait (dans Figma dans mon cas) ce qui ne serait pas le cas avec une vraie flèche.

Du coup, je ne suis plus sûr que ma méthode soit adaptée au résultat attendu, notamment en jouant avec l'animation du "strokeDashoffset".

Qu’en pensez-vous ? Auriez-vous des pistes à me donner pour réaliser ça ?

Je vous remercie
Modifié par lorraineS (29 Feb 2020 - 19:39)

Bonjour,

cela peut se faire avec un marker-end,

Comme dans l'exemple:
https://codepen.io/kustol/pen/MWwoqMZ

Il faudrait juste ne l'afficher qu'à la fin de l'animation.
Modifié par kustolovic (02 Mar 2020 - 11:26)

kustolovic a écrit :
Bonjour,

cela peut se faire avec un marker-end,

Comme dans l'exemple:
https://codepen.io/kustol/pen/MWwoqMZ

Il faudrait juste ne l'afficher qu'à la fin de l'animation.

Bonjour, merci pour ton aide.

En effet, la création de la flèche n'est pas spécialement le problème.
Mais on ne peut pas se permettre d'afficher la flèche après x secondes avec une keyframes car les keyframes ne réagissent pas toujours de la même manière et mettront potentiellement plus de temps à s'afficher.

Par exemple (https://codepen.io/lorraineS/pen/GRJrqvj)
Le trait s'affiche en 1s. Je mets mon <marker> (ma flèche) en opacity: 0 par défaut et en opacity 1 après 1s. Une fois sur deux, le marker ne s'affichera pas après 1s, mais plutôt après 1.25, 1.5s... c'est trop dépendant des performances du navigateur.

Si c'est de ça dont tu faisais référence, je ne pense pas que ce soit une solution viable malheuresement...

Je ne peux pas non plus utiliser la balise <animate> car non compatible IE
Modifié par lorraineS (03 Mar 2020 - 10:48)

Ah un moment il faut éviter de se traîner des boulets
Pourquoi tu n'utilises pas ta balise animate comme tu as besoin, et seulement dans le cas ou le gars utilise IE, hop tu fais une version "dégradé" ou cela pop le triangle à sa bonne position (au moment qui te semble le mieux)