javascript - 如何在视口(viewport)中触发惰性线条画家 svg 动画

Question

我目前在一个使用视差滚动效果的网站上有一个 SVG 路径动画，它是使用惰性线画家创建的。目前动画是看不见的，因为它在第三页向下，当用户滚动到它时，它已经是动画了。我是 javascript 和 jQuery 的新手，不确定动画进入视口(viewport)后如何触发。这是我目前拥有的代码:

HTML:

 <section id="intro1" class="background">
     <div class="content-wrapper data-section">
          <div id="icons"></div>
     </div>
</section>

JS:

var pathObj = {
    "icons": {
        "strokepath": [
            {
                "path": "M654.4,95.7c-119.8-83.9-264-97.5-397-38.3C53.1,148.4-38.9,387.6,52,591.9",
                "duration": 600
            },
            {
                "path": "M182.9,227.1l0.2-0.1C293.6,95.2,490,78.2,621.8,188.7c36.9,31,61.8,63.2,82.1,106.9",
                "duration": 600
            },
            {
                "path": "M205.1,408.8c10.5-120,116.2-208.7,236.2-198.2c8,0.7,14.7,1.6,22.6,3.2",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 728,
            "height": 606
        }
    }
}; 

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

编辑后的代码:

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();
    }
});

Answer 1

首先，您需要让您的 lazylinepainter 成为一个可以随意调用的函数，而不仅仅是在页面加载时运行。

然后您需要为页面滚动设置一个事件监听器，它会执行一些数学运算以检查视口(viewport)是否已到达您希望绘图开始的任何点，然后调用所述函数开始绘图。

首先，您的线条绘制函数可能如下所示:

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

事件监听器可以在 JQuery 中使用如下方式完成:

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

您可能还想限制窗口滚动函数，这样它就不会在每次滚动事件发生时都被调用。