如何在视口中触发延迟线条绘制SVG动画

how to trigger lazy line painter svg animation when in viewport

本文关键字：延迟线 绘制 SVG 动画 视口      更新时间：2023-09-26

我目前在一个使用视差滚动效果的网站上使用lazy line painter创建了一个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();
    }
});

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

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

首先，您的线条绘制函数可以像这样: 
function paintLine(){
  $('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 10,
    "strokeColor": "#4A90E2"
  }).lazylinepainter('paint'); 
}

事件监听器可以在JQuery中这样做:

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

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

相关文章：