在視口中如何觸發懶行畫家svg動畫

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

您可能還希望限制窗口滾動功能，以便在滾動事件發生時不會每次都調用它。