Как анимировать Progressbar.js, когда он появляется в браузере с помощью путевых точек?

Question

Я использую Progressbar.js, чтобы создать анимированный индикатор выполнения. Но дело в том, когда я помещаю его, это прежде, чем он появится в поле зрения. Я использую Waypoints, чтобы вызвать анимацию только тогда, когда она видна, но я не понимаю ее.

Пожалуйста, помогите мне разобраться.

Thank you.

var bar = new ProgressBar.Line(container, { 
 
     strokeWidth: 5, 
 
     easing: 'easeInOut', 
 
     duration: 1400, 
 
     color: '#FFEA82', 
 
     trailColor: '#eee', 
 
     trailWidth: 2, 
 
    }); 
 

 
    bar.animate(1.0); // Number from 0.0 to 1.0

#container{ 
 
    margin-top:500px; 
 
    width: 300px; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> 
 

 

 
scroll down 
 
<div id="container"></div>

Answer 1

Простые путевые точки будут делать. но обратите внимание, что по умолчанию путевые точки срабатывают только тогда, когда элемент достигает верхней части страницы. прокрутка страницы просто, чтобы она отображалась внизу, недостаточно. это должно быть полностью или вы можете использовать параметр offset, чтобы помочь.

var bar = new ProgressBar.Line(container, { 
 
     strokeWidth: 5, 
 
     easing: 'easeInOut', 
 
     duration: 1400, 
 
     color: '#FFEA82', 
 
     trailColor: '#eee', 
 
     trailWidth: 2, 
 
    }); 
 

 
    $("#container").waypoint(function(){ 
 
     bar.animate(1.0); // Number from 0.0 to 1.0 
 
    }, {offset: "50%"}) 
 

#container{ 
 
    margin-top:500px; 
 
    margin-bottom:500px; 
 
    width: 300px; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> 
 

 

 
scroll down 
 
<div id="container"></div>