從左到右動畫SVG線Snap.svg

我試圖創建一個動畫線，就好像它從一個點繪製到另一個。我已經設法將線條繪製到頁面上，但無法解決如何將它製作爲動畫，就好像它正在繪製一樣？從左到右動畫SVG線Snap.svg

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();

來源

2016-05-03 Mark

你幾乎沒有，只是缺少兩件事情。

首先，你需要設置stroke-dasharray到'<length> <length>'，這將創建具有間隙的「虛」行/填充等於整個行

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

的長度，在此之後，你需要動畫偏移使用行程0的stoke-dashoffset

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

working fiddle

來源

2016-05-03 18:59:15

現貨謝謝！你能解釋一下：lineLength +''+ lineLength是做什麼的？ – Mark

設置了你想要的不同間距，因此你可以建立一個類似「10 5」（將重複的）或更復雜的例如「10 20 30 5 10 20」的dasharray線，指定空間和字符串破折號。 – Ian

@Ian謝謝;-) –

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);

我希望這個答案能幫助你！

來源

2017-08-01 06:49:41

從左到右動畫SVG線Snap.svg

回答

相關問題