在滾動條上畫一條彎曲的虛線SVG

我一直負責添加一條虛線，它將鏈接頁面上的一組插圖。我一直在尋找一段時間，並遇到了一些沒有破折號（例如http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/）的正常線條的例子，這是我以前用過的。在滾動條上畫一條彎曲的虛線SVG

從我可以告訴這種技術將不會用虛線工作，因爲它使用筆劃短劃線數組實際上動畫的線條圖。也許我錯了？

有沒有人知道用虛線實現相同效果的方法？另外需要注意的是，該線條將跨越不同的顏色背景。

任何建議將不勝感激。

更新：工作液

var line; 
var subPaths = []; 

window.onload = function(){ 
    line = Snap(document.getElementById("drawMe")); 
    getSubPaths(); 
} 

window.addEventListener("scroll", drawLine); 

function drawLine() { 
    var percentDrawn = (document.body.scrollTop + document.documentElement.scrollTop)/(document.documentElement.scrollHeight - document.documentElement.clientHeight); 
    var percentDrawn = Math.round(percentDrawn * 100); 

    line.attr({ 
     d: subPaths[percentDrawn] 
    }); 

} 

function getSubPaths(){ 
    var maxLength = line.getTotalLength(); 
    for(var i = 0; i<101; i++){ 
     var currentLength = maxLength*i/100; 
     subPaths[i] = line.getSubpath(0, currentLength); 
    } 
}

來源

2016-03-09 BarryWalsh

您可以在想要繪製的線條上放置一條虛線，併爲其指定背景的顏色：https://jsfiddle.net/t9kqudxo/但是，由於您移動了不同的顏色背景，因此您可能需要將其分割以更小的塊爲單位......真正取決於你的情況，你也可以在背景上放置一個背景副本，然後「剪下透明破折號」。這並不完美，但我希望能給你一些想法。 – yoshi

@yoshi乾杯！是的，我添加了關於不同背景的部分，因爲我偶然發現了這種技術。我想知道如果snap.svg可以通過動畫演示http://snapsvg.io/demos/#globe中的d屬性來處理它，但是我認爲它不適用於滾動交互。 – BarryWalsh

有一個更簡單的方法來使用虛線掩碼。 [請參閱此答案的演示]（https://stackoverflow.com/questions/45540161/make-the-on-scroll-growing-path-to-dashed-line/45541540#45541540） –

隨着你的鏈接到Snap.svg我想出了這個解決方案：

<script src="./snap.svg.js"></script> 
<script> 

    var line; 
    var subPaths = []; 
    var percentDrawn = 0; 

    window.onload = function(){ 
     line = Snap(document.getElementById("drawMe")); 
     getSubPaths(); 
     loop(); 
    } 

    function loop(){ 
     setTimeout(function(){ 
      line.attr({ 
       d: subPaths[percentDrawn] 
      }); 
      percentDrawn++; 
      if(percentDrawn < 101) loop(); 
     }, 50); 
    } 

    function getSubPaths(){ 
     var maxLength = line.getTotalLength(); 
     for(var i = 0; i<101; i++){ 
      var currentLength = maxLength*i/100; 
      subPaths[i] = line.getSubpath(0, currentLength); 
     } 
    } 
</script>

所以我們要做的是建立與子陣列原始行的路徑從開始到其全長的x％：getSubPaths()。爲此，我們實際上需要Snap.svg，因爲它提供了我們的getSubpath(0, currentLength)功能。

這實際上是所有的魔法！ loop()函數只是一個setTimeout塊，當我們完成繪圖後，會有一個異常終止條件。然而，實際繪圖正在將來自先前存儲數組的相應子路徑應用到行的d屬性。

來源

2016-03-09 16:10:50 yoshi

好的，謝謝！你認爲這將有可能得到滾動工作？所以這行是作爲用戶滾動繪製的？我還沒有測試過你發佈的內容，但是當我重新開始工作的時候。 – BarryWalsh

不客氣:)至於滾動這應該很容易轉換。百分比是來自計時器還是滾動是無關緊要的 - 您可以從您問題中提供的鏈接中獲取邏輯。如果通過相應地修改'getSubPaths'來存儲超過100個子路徑，您甚至可以獲得更流暢的動畫。讓我知道如果出現進一步的問題:) – yoshi

試過這個代碼，效果很好！謝謝！一旦我陷入滾動版本，會報告回來。 – BarryWalsh

在滾動條上畫一條彎曲的虛線SVG

回答

相關問題