Javascript 如何在视口中触发延迟线绘制svg动画

目前，我在一个使用视差滚动效果的网站上制作了一个SVG路径动画，它是使用懒线画师创建的。当前，动画在第三页的下方是看不见的，当用户滚动到它时，它已经是动画了。我对javascript和jQuery非常陌生，不确定一旦动画出现在视口中，如何触发动画。这是我目前拥有的代码：

HTML:

编辑代码：

function paintLine(){
  $('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 10,
    "strokeColor": "#4A90E2"
  }).lazylinepainter('paint'); 
}

var element_position = $('#intro1').offset().top;

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {
        paintLine();
    }
});

---

首先，您需要使您的

lazylinepainter

成为一个可以随意调用的函数，而不只是在页面加载时运行

然后，您需要为页面滚动设置一个事件侦听器，该侦听器进行一些数学运算，以检查视口是否已达到您希望图形启动的任何点，然后调用所述函数启动图形

首先，线条绘制功能可以如下所示：

function paintLine(){
  $('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 10,
    "strokeColor": "#4A90E2"
  }).lazylinepainter('paint'); 
}

$(window).scroll(function(){
  // calculation
  if(calculation){
    paintLine();
  }
});

事件侦听器可以在JQuery中通过以下方式完成：

function paintLine(){
  $('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 10,
    "strokeColor": "#4A90E2"
  }).lazylinepainter('paint'); 
}

$(window).scroll(function(){
  // calculation
  if(calculation){
    paintLine();
  }
});

---

您可能还想限制窗口滚动功能，这样它就不会在滚动事件发生的每一刻都被调用。

谢谢您的建议，我尝试了这个方法，但是当元素在viewportI中时，无法让页面滚动的事件侦听器工作并注册。我已经在上面的代码中添加了一个部分，以便您可以看到我到目前为止的内容