SVG-Linie von links nach rechts animieren Snap.svg

Question

Ich versuche eine animierte Linie zu erstellen, als ob sie von einem Punkt zum anderen gezogen wird. Ich habe es geschafft, die Strichzeichnung auf die Seite zu bringen, kann aber nicht herausfinden, wie man sie animiert, als würde sie gezeichnet.

https://jsfiddle.net/0sdt33dz/

function svgAnimate(){ 
var s = Snap('#svg'); 
var linePath = "M-3,148.6c0,0,43.9,7,49.4-17.2c3.5-15.3-9.4-19.7-17.3-13.8c-6,4.4-10,19,11.3,25.4 c24.9,7.5,70.7-31.2,91-61.8S233-41.5,286.3,29.2c0,0-60.7,35.5-24.9,87.9c36.2,53,83.5,15.6,83.5,15.6s19.3,19.5,68.4,17.1"; 
var lineLength = Snap.path.getTotalLength(linePath); 
var lineDraw = s.path(linePath); 
lineDraw.attr({ 
    fill:'none', 
    stroke:'#009FE3', 
    'stroke-width' :6, 
    'stroke-linecap' :'round', 
    'stroke-linejoin' :'round', 
    'stroke-miterlimit' :10 
}); 
lineDraw.animate({ 
    stroke : '#fff' 
},3000, mina.easein) 
console.log(lineLength); 
} 
svgAnimate(); 

Answer 1

Du es fast, fehlt nur zwei Dinge.

Zuerst müssen Sie die stroke-dasharray-'<length> <length>' setzen, wird dies eine „gestrichelte“ Linie mit Lücken/füllen gleich der Länge der gesamten Linie

lineDraw.attr({ 
    fill:'none', 
    stroke:'#009FE3', 
    'stroke-dasharray': lineLength + ' ' + lineLength, 
    'stroke-dashoffset': lineLength, 
    'stroke-width' :6, 
    ... 

Danach erstellen Sie den Offset animieren müssen des Hubs zu 0 mit stoke-dashoffset

lineDraw.animate({ 
    strokeDashoffset : 0 
},3000, mina.easein) 

working fiddle

Answer 2

var s = Snap("#myLine"); 

//Line parameters (x1, y1, x2, y2) 
var line = s.line(30, 45, 30, 45); 
line.attr({ 
    stroke: "#000", 
    strokeWidth: 2 
}); 

//Old x2 values is 30 and now it is increasing to 70 with 1 second duration 
line.animate({x2: 70}, 1000); 

Ich hoffe, diese Antwort wird Ihnen helfen!