Question

我目前在使用视差滚动效果的网站上使用懒惰线画家创建了SVG路径动画。目前，动画是看不见的，因为它在第三页上，当用户滚动到它时，它已经是动画的。我对javascript和jQuery很新，并且不确定如何在视口中触发动画。这是我目前的代码：

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一个可以随意调用的函数，而不是仅仅在页面加载时运行。

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

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

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

事件监听器可以在JQuery中完成，如下所示：

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

您可能还想限制窗口滚动功能，以便每次滚动事件发生时都不会调用它。

如何在视口中触发延迟线画家svg动画

1 个答案: