在滚动上绘制曲线（响应）SVG 路径

Question

在阅读了有关使用 strokeDashArray 技巧制作 SVG 动画的所有讨论后，我终于在 Cable Codes 博客上找到了一些代码，可以将此功能与用户的滚动位置联系起来。

这个想法很棒，但我有一个波浪形的弯曲路径，实际上在一个点上循环。因此，我将计算出的路径总长度进行了划分以获得良好的中间立场，但在滚动时它仍然落后或领先。

这是一个经过一些调整的 sn-p 示例：

$(document).ready(function(){

  $(window).scroll(function() {
    drawLine( $('#route'), document.getElementById('path') );
  });

  //draw the line
  function drawLine(container, line){

    var pathLength = line.getTotalLength(),
        distanceFromTop = container.offset().top - $(window).scrollTop(),
        percentDone = 1 - (distanceFromTop / $(window).height()),
        length = percentDone * pathLength / 30;

    line.style.strokeDasharray = [ length ,pathLength].join(' ');
  }

});

我用我的调整创建了一个CodePen 的路径和代码的sn-p。关于如何在用户滚动时将此行的末尾保持在视口中心的任何想法？

更新： SVG 实际上是响应式的。这改变了一些事情，嗯？这是an updated CodePen。

Answer 1

您计算滚动百分比的方式有点不对劲。我在这里制作了一个工作版本：

http://codepen.io/anon/pen/idvoh

您需要通过从文档高度中减去窗口高度来计算滚动顶部的最大值。

至于当线路曲折很多时如何阻止它领先或落后。您需要在常规高度隔开您的线段。因此，例如，如果您的线由 10 个贝塞尔曲线组成，请确保它们从（大约）线高的 n/10 开始。这应该保持正确的节奏。