在滚动条上画一条弯曲的虚线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

回答

相关问题