Question

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

我尝试过以下代码。我合并了两条直线路径和圆形，并为相同的

应用了转换

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

Answer 1

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

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

演示如下：

＆＃13;

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

＆＃13;

#container {
  width:220px;
  position: relative;
}

＆＃13;

<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>

＆＃13;

请注意，该库似乎有一个错误。根据文档，value()函数应返回0和1之间的值。但是，它会返回0和-1之间的值。再加上它背靠背。因此，为了获得正确的进度值，我必须将1添加到shape()的值中。如果您更新到修复此错误的库的新版本，则可能必须更改此代码。

带起始圆的SVG Progressbar动画

1 个答案: