带有起始圆的SVG进度栏动画 [英] 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>
推荐答案
该库允许您传递step
函数,该函数针对动画中的每个步骤都被调用.
That library allows you to pass a step
function that is called for every step in the animation.
使用value()
函数返回的值以及几个方便的SVG路径函数,可以计算进度线末端的坐标.然后,您可以使用这些坐标来定位圆.
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.
下面的演示
$(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>
请注意,该库似乎存在错误.根据文档,value()
函数应该返回0
和1
之间的值.但是,它将返回0
和-1
之间的值.再加上它是从后到前的.因此,为了获得正确的进度值,我必须将1
添加到shape()
的值.如果您曾经更新到可解决此错误的库的新版本,则可能必须更改此代码.
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.
这篇关于带有起始圆的SVG进度栏动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!