SVG Progressbar动画与开始圈

是否可以将线圈与线路径一起动画？

我试过跟随code.can我合并两个线路径和圆圈并应用相同的转换

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

Answer 1

该库允许您传递为动画中的每个步骤调用的step函数。

使用它， value()函数返回的value() ，以及一些方便的SVG路径函数，可以计算进度行结束的坐标。 然后，您可以使用这些坐标来定位圆。

演示如下：

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