animation de course SVG augmentation longueur

Question

J'ai cherché (sans succès) partout sur Internet sur la façon d'atteindre une certaine animation de chemin SVG. J'ai réutilisé un codepen de Chris Coyier, tiré de son article sur les astuces CSS. Dans ma version éditée, j'ai obtenu l'effet désiré, mais très grossièrement, et c'est une méthode très "hack-through" qui n'est définitivement pas efficace.

La plume: https://codepen.io/anon/pen/zEZpPK (visualiser dans Chrome)

L'idée: Animate une course SVG de sorte que, il commence par la longueur 0 (dashOffset égale à la longueur de chemin totale), donc il n'y a rien rendu. Ensuite, diminuez graduellement le dashOffset jusqu'à ce que tout le trait SVG soit révélé. Jusqu'à présent, pas de problèmes, c'est un effet assez commun en fait. Mais je veux ajouter quelque chose de plus: Le "point de départ" du trait doit aussi être décalé progressivement, pour obtenir un effet similaire à celui du Pen.

L'exigence spécifique, est que le coup peut passer par le point de départ deux fois, et que la longueur d'attaque atteint 100% lorsqu'elle passe la deuxième fois par le point de départ, comme elle le fait (pas avec presicion) dans le stylo .

La façon dont je l'ai atteint: Il est plutôt compliqué de l'écrire. Vous pouvez explorer le Pen et voir par vous-même ce que j'ai fait. Peut-être pour une meilleure compréhension, vous pouvez modifier la couleur de trait du SVG avec l'ID Layer_3 à quelque chose de différent du blanc et du noir pour visualiser comment les animations se déclenchent. Cependant, je vais essayer d'expliquer:

J'ai copié le SVG original et l'ai collé deux fois dans le fichier HTML, donc il y avait 3 SVG dans le document, chacun sur l'autre. Celui du milieu, a un coup blanc, les 2 autres ont un coup noir. Ce deuxième SVG, celui du milieu, a une animation qui dure deux fois le temps de l'animation du 1er SVG. Ensuite, la 3ème animation SVG dure la même que la 1ère, mais elle a un délai d'animation de la même durée que le 1er temps d'achèvement de l'animation.

C'est une solution très inefficace, mais cela fonctionne très bien pour illustrer ce que j'essaie d'obtenir.

La question: Y at-il un moyen d'obtenir un tel effet? Avoir la course se déplaçant à travers le chemin comme il augmente en taille jusqu'à ce qu'il atteigne la longueur du chemin complet? J'ai cependant peut-être utiliser TweenMax (GSAP) le long de l'animation dashOffset pour essayer de morphing le chemin SVG progressivement d'une seule ancre, au chemin entièrement construit, et avoir l'animation dashOffset commençant à minus .getTotalLength(), jusqu'à zéro. Mais l'effet de morphing n'est pas vraiment ce qui est nécessaire, plus comme une fonction de coupe qui prend une seule ancre et ajoute plus d'ancres (en suivant les données de chemin) jusqu'à ce que le chemin devienne une forme fermée. Mais encore une fois, je n'ai trouvé aucune information sur un tel effet.

Peut-être que je suis confronté à une limitation avec les SVG. Cependant, si quelqu'un a une idée ou connaît un site Web où cet effet est décrit, s'il vous plaît faites le moi savoir.

Answer 1

Cela peut être fait avec un seul SVG. IMO il est probablement plus simple d'oublier le décalage du tableau de bord et d'animer le tableau de bord.

En raison du fait que partiellement à travers l'animation, vous avez besoin d'un tableau qui est

gap - stroke - gap 

vous aurez besoin d'utiliser un dasharray qui a quatre valeurs (écart de temps d'intervalle de temps). Notez qu'il est également important d'utiliser des valeurs dans votre tableau de tirets qui correspondent à la longueur de votre chemin. Dans votre cas, la longueur de votre chemin est 821.6. Donc, j'utilise une valeur de 822 pour la simplicité - ce qui est assez proche.

.path1 { 
 
    stroke-dasharray: 0; 
 
    animation: dash 5s linear; 
 
} 
 
/* 821.6 */ 
 

 
@keyframes dash { 
 
    0% { 
 
    stroke-dasharray: 0 0 0 822; 
 
    } 
 
    25% { 
 
    stroke-dasharray: 0 205.5 205.5 822; 
 
    } 
 
    50% { 
 
    stroke-dasharray: 0 411 411 822; 
 
    } 
 
    75% { 
 
    stroke-dasharray: 411 205.5 822 822; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 822 0 822 822; 
 
    } 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve"> 
 

 
    <path class="path1" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8 
 
\t s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 
 
\t C46.039,146.545,53.039,128.545,66.039,133.545z"/> 
 
    
 
</svg>