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.SVG-Linie von links nach rechts animieren Snap.svg
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();
Spot auf danke! Könnten Sie erklären, was: lineLength + '' + lineLength tut? – Mark
Das legt die verschiedenen Abstände fest, die Sie in Ihrer Linie haben möchten, so dass Sie eine Strichlinie von etwas wie "10 5" erstellen können (wird das wiederholen), oder komplexer, zB "10 20 30 5 10 20" diktieren die Leerzeichen und Zeichenfolge Bindestriche. – Ian
@Ian danke ;-) –