動畫點綴路徑，陸續

一個點，我使用的是最新版本的Snap.svg繪製和SVG動畫中一個path：動畫點綴路徑，陸續

var s = Snap('#svg'); 
var getPath = s.path('M15 15L115 115'); 
var pathLength = getPath.getTotalLength(); 
getPath.attr({ 
    stroke: '#000', 
    strokeWidth: 5, 
    strokeDasharray: pathLength + ' ' + pathLength, 
    strokeDashoffset: pathLength, 
    strokeLinecap: 'round' 
}).animate({ 
    strokeDashoffset: 0 
}, 1500);

雖然這是工作的罰款（因爲你可以看到here）我想把它變成一條虛線，一個接一個地點動畫。

我已經構建了一個圓圈快速原型（您可以看到here），以說明外觀和感覺，但從技術上講，我希望它基於自定義path。

基本上我正在尋找一種方法來動畫點綴（複雜）路徑;所以具有屬性的路徑就像路徑上的圓圈一樣好。

來源

2014-07-06 Sven

因爲中風dasharray可以是值的數組，你可以在0離開行程dashoffset，直到你到整條生產線更新行程dasharray。這樣的東西雖然這個例子並不真正平穩和優化。

var s = Snap('#svg'); 
var getPath = s.path('M15 15L115 115'); 
var pathLength = getPath.getTotalLength(); 

var perc = 0; 
var dotLength = 5; 
var gapLength = 4; 

getPath.attr({ 
    stroke: '#000', 
    strokeWidth: 1, 
    strokeDasharray: 0, 
    strokeDashoffset: 0, 
    strokeLinecap: 'round' 
}); 

function updateLine(){ 
perc +=1; 
    if(perc>100){ 
     perc = 100; 
    } 
var visibleLength = pathLength*perc/100; 
var drawnLength = 0; 
    var cssValue = ''; 
    while(drawnLength < visibleLength){ 
    drawnLength += dotLength; 
     if(drawnLength < visibleLength){ 
      cssValue += dotLength+ ' '; 
      drawnLength += gapLength; 
      if(drawnLength < visibleLength){ 
       cssValue += gapLength+ ' '; 
      } 
     }else{ 
      cssValue += (visibleLength + dotLength - drawnLength)+ ' '; 
     } 
    } 
    cssValue += pathLength; 
    if(perc<100){ 
    setTimeout(updateLine, 100); 
    } 
    getPath.attr({ 
     strokeDasharray: cssValue 
    }); 
} 

updateLine();

http://jsfiddle.net/EEe69/7/

如果你想差距是在動畫「跳過」，則應該從路徑長度他們。減去

來源

2014-07-06 20:52:52 airnan

爲什麼不使用d3？

有一個例子基於鼠標移動來做類似虛線的事情。我started定時功能做你想做的事情，但我認爲你可以弄明白:)

看看這部分，看看你是否可以調整它做一個特定的路徑，而不是d3。鼠標：

d3.timer(function(step) { 
    var svgagain = d3.select("body").select("svg") 
     .on("mousemove", function() { var pt = d3.mouse(this); tick(pt); }); 
});

來源

2014-07-06 19:13:01 bryce

非常感謝您的回答！不幸的是，'d3.min.js'約爲〜147KB，不加載另一個JavaScript庫會很好，但我會牢記！ – Sven

動畫點綴路徑，陸續

回答

相關問題