CODEWITHSUNDEEP
javascriptjquerycssanimationsvg
WebStarter
WebStarter

Reputation: 247

SVG Progressbar Animation with start circle

Is it possible to animate circle along with the line path ?

I have tried following code.can i merge the two line path and circle and apply transition for the same

$(document).ready(function () {

    var svgPath = document.getElementById('heart');

    var path = new ProgressBar.Path(svgPath, {
        duration: 3000
    });
    path.animate(-1, {
        easing: 'easeOutBounce',
        duration: 2000
    }, function () {
        console.log('Animation has finished');
    });
});
 #container {
	width:220px;
    position: relative;
 }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container" style="width:200px;height:200px;">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.08 100" width="500"
        height="500">
        <path d="M50,2A48,48,0,1,1,2,50,48,48,0,0,1,50,2" fill-opacity="0" stroke="#eee" />
        <circle cx="95.87" cy="64.33" r="2.66" />
        <path id="heart" fill-opacity="0" d="M95.6,65.16A48,48,0,1,1,50,2" fill="none" stroke="#000" />
    </svg>


</div>

Upvotes: 0

Views: 864

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

That library allows you to pass a step function that is called for every step in the animation.

Using that, the value returned by the value() function, and a couple of handy SVG path functions, you can calculate the coordinates of the end of the progress line. You can then use those coordinates to position the circle.

Demo below:

$(document).ready(function(){
  
  var svgPath = document.getElementById('heart'); 
  
  var shape = new ProgressBar.Path(svgPath);
  var pathLen = shape.path.getTotalLength();

  shape.animate(-1, {
	easing: 'easeOutBounce',
    duration: 2000,
    attachment: document.getElementById("circle"),
    step: function(state, shape, attachment) {
      // 'attachment' is a DOM reference to the circle element
      var val =  1 + shape.value();  // buggy value() function?
      var endPosition = shape.path.getPointAtLength(val * pathLen);
      attachment.cx.baseVal.value = endPosition.x;
      attachment.cy.baseVal.value = endPosition.y;
    }
  }, function() {
    console.log('Animation has finished');
  });

});
#container {
  width:220px;
  position: relative;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
 <div id="container" style="width:200px;height:200px;">

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.08 100" width="500" height="500">
    <path d="M50,2A48,48,0,1,1,2,50,48,48,0,0,1,50,2" fill-opacity="0" stroke="#eee"/>
    <circle id="circle" cx="95.87" cy="64.33" r="2.66"/>
    <path  id="heart" fill-opacity="0"  d="M95.6,65.16A48,48,0,1,1,50,2" fill="none" stroke="#000" />
    </svg>


    </div>

Note that the library seems to have a bug. According to the docs, the value() function is supposed to return a value between 0 and 1. However it returns a value between 0 and -1. Plus it's back-to-front. So to get the right progress value, I had to add 1 to the value of shape(). If you ever update to a new version of the library that fixes this bug, you may have to alter this code.

Upvotes: 1

Related Questions