Я пытаюсь создать анимированную строку, как если бы ее рисовали из одной точки в другую. Мне удалось получить рисунок линии на странице, но не может решить, как оживить его, как если бы его рисовали?Анимировать строку SVG слева направо 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 on thanks! Не могли бы вы объяснить, что: lineLength + '' + lineLength? – Mark
Это задает разные расстояния, которые вы хотите в своей строке, поэтому вы можете построить линейку дашара, что-то вроде «10 5» (повторит это), или более сложное, например «10 20 30 5 10 20», диктуя пробелы и струнные тире. – Ian
@ Спасибо спасибо ;-) –