Animation SNAP.svg顺时针设置路径动画
我正在尝试使用SNAP.svg制作甜甜圈动画。我正在使用SNAP.animate函数计算路径值。问题是路径是从endAngle到startAngle绘制的，但我想要它的相反方向 这是代码笔链接Animation SNAP.svg顺时针设置路径动画,animation,svg,snap.svg,Animation,Svg,Snap.svg,我正在尝试使用SNAP.svg制作甜甜圈动画。我正在使用SNAP.animate函数计算路径值。问题是路径是从endAngle到startAngle绘制的，但我想要它的相反方向 这是代码笔链接 文件 #图表{ 文本对齐：居中； 宽度：100%； 边缘顶部：60像素； 边缘底部：60px； 左边距：自动； 右边距：自动； 填充：0.25%； 高度：600px； } var s=快照（“图表”）； var centerX=279.667， centerY=279.667， 颜色=[“2b908f”
文件
#图表{
文本对齐：居中；
宽度：100%；
边缘顶部：60像素；
边缘底部：60px；
左边距：自动；
右边距：自动；
填充：0.25%；
高度：600px；
}
var s=快照（“图表”）；
var centerX=279.667，
centerY=279.667，
颜色=[“2b908f”、“f9a3a4”、“90ee7e”、“fa4443”、“69d2e7”]，
x1=[398.2520587792069418.96789194982911262.3925655822982227.28417802067494279.6666667]，
y1=[205.5662895513901821.8539446942142355.825358396268150.01545766974425139.83333334]，
端角=[58,95,237,338,360]，
startAngle=[0,58,95237338]，
百分比=[16.11111111,10.277777777,39.44444444,28.05555555557,6.111111111111]，
开始=[01280256038405120]，
dur=1280；
对于（var i=0；i180？1:0，
path=“M”+x1+”、“+y1+”A“+size+”、“+size+”0“+largeArc+”、0“+x2+”、“+y2”；
艾尔·阿特尔({
d:路，
笔画：颜色，
填写：'无'，
冲程宽度：40
});
console.log（el.node.getAttribute（'id'），d）
}，dur，mina.easeinout）；
}，开始）
}
文件
#图表{
文本对齐：居中；
宽度：100%；
边缘顶部：60像素；
边缘底部：60px；
左边距：自动；
右边距：自动；
填充：0.25%；
高度：600px；
}
var s=快照（“图表”）；
var centerX=279.667，
centerY=279.667，
颜色=[“2b908f”、“f9a3a4”、“90ee7e”、“fa4443”、“69d2e7”]，
x1=[398.2520587792069418.96789194982911262.3925655822982227.28417802067494279.6666667]，
y1=[205.5662895513901821.8539446942142355.825358396268150.01545766974425139.83333334]，
端角=[58,95,237,338,360]，
startAngle=[0,58,95237338]，
百分比=[16.11111111,10.277777777,39.44444444,28.05555555557,6.111111111111]，
开始=[050100015002000]，
dur=500；
对于（var i=0；i180？1:0，
path=“M”+x1+”、“+y1+”A“+size+”、“+size+”0“+largeArc+”、1“+x2+”、“+y2”；
艾尔·阿特尔({
d:路，
笔画：颜色，
填写：'无'，
冲程宽度：40
});
log（el.node.getAttribute（'id'），“startDeg”，startDeg）
console.log（el.node.getAttribute（'id'），“endDeg”，endDeg）
}，dur，mina.easeinout）；
}，开始）
}
文件
#图表{
文本对齐：居中；
宽度：100%；
边缘顶部：60像素；
边缘底部：60px；
左边距：自动；
右边距：自动；
填充：0.25%；
高度：600px；
}
var s=快照（“图表”）；
var centerX=279.667，
centerY=279.667，
颜色=[“2b908f”、“f9a3a4”、“90ee7e”、“fa4443”、“69d2e7”]，
x1=[398.2520587792069418.96789194982911262.3925655822982227.28417802067494279.6666667]，
y1=[205.5662895513901821.8539446942142355.825358396268150.01545766974425139.83333334]，
端角=[58,95,237,338,360]，
startAngle=[0,58,95237338]，
百分比=[16.11111111,10.277777777,39.44444444,28.05555555557,6.111111111111]，
开始=[050100015002000]，
dur=500；
对于（var i=0；i180？1:0，
path=“M”+x1+”、“+y1+”A“+size+”、“+size+”0“+largeArc+”、1“+x2+”、“+y2”；
艾尔·阿特尔({
d:路，
笔画：颜色，
填写：'无'，
冲程宽度：40
});
log（el.node.getAttribute（'id'），“startDeg”，startDeg）
console.log（el.node.getAttribute（'id'），“endDeg”，endDeg）
}，dur，mina.easeinout）；
}，开始）
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#chart {
text-align: center;
width: 100%;
margin-top: 60px;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 25%;
height: 600px;
}
</style>
</head>
<body>
<svg id="chart"></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
var s = Snap("#chart");
var centerX = 279.6666666666667,
centerY = 279.6666666666667,
colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"],
x1 = [398.2520587792069, 418.9678919498291, 162.3925655822982, 227.28417802067494, 279.6666666666667],
y1 = [ 205.56628955139018, 291.8539446942142, 355.825358396268, 150.01545766974425, 139.83333333333334],
endAngle = [58, 95, 237, 338, 360],
startAngle = [0, 58, 95, 237, 338],
percent = [ 16.11111111111111, 10.277777777777777, 39.44444444444444, 28.055555555555557, 6.111111111111111],
begin = [0,1280,2560,3840,5120],
dur = 1280;
for(var i=0; i<5; i++) {
var el = s.path("");
el.node.id = "w" + i;
animateDonut(el, x1[i], y1[i], centerX, centerY, endAngle[i], startAngle[i], 139.833, percent[i], begin[i], dur, colors[i])
}
function animateDonut(el, x1, y1, centerX, centerY, endAngle, startAngle, size, percent, begin, dur, color ) {
window.setTimeout(function() {
var endpoint = (percent/100)*360;
Snap.animate(0, endpoint, function (val) {
var d = endAngle - val,
dr = d-90,
radians = Math.PI*dr/180,
x2 = centerX + size*Math.cos(radians),
y2 = centerY + size*Math.sin(radians),
largeArc = val>180 ? 1 : 0,
path = "M"+x1+","+y1+" A"+size+","+size+" 0 "+largeArc+",0 "+x2+","+y2;
el.attr({
d: path,
stroke: color,
fill: 'none',
strokeWidth: 40
});
console.log(el.node.getAttribute('id'),d)
},dur, mina.easeinout);
}, begin)
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#chart {
text-align: center;
width: 100%;
margin-top: 60px;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 25%;
height: 600px;
}
</style>
</head>
<body>
<svg id="chart"></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
var s = Snap("#chart");
var centerX = 279.6666666666667,
centerY = 279.6666666666667,
colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"],
x1 = [398.2520587792069, 418.9678919498291, 162.3925655822982, 227.28417802067494, 279.6666666666667],
y1 = [ 205.56628955139018, 291.8539446942142, 355.825358396268, 150.01545766974425, 139.83333333333334],
endAngle = [58, 95, 237, 338, 360],
startAngle = [0, 58, 95, 237, 338],
percent = [ 16.11111111111111, 10.277777777777777, 39.44444444444444, 28.055555555555557, 6.111111111111111],
begin = [0,500,1000,1500,2000],
dur = 500;
for(var i=0; i<5; i++) {
var el = s.path("");
el.node.id = "w" + i;
animateDonut(el, x1[i], y1[i], centerX, centerY, endAngle[i], startAngle[i], 139.833, percent[i], begin[i], dur, colors[i])
}
function animateDonut(el, x1, y1, centerX, centerY, endAngle, startAngle, size, percent, begin, dur, color ) {
window.setTimeout(function() {
var endpoint = (percent/100)*360;
Snap.animate(0, endpoint, function (val) {
var startDeg = startAngle,
startRadians = Math.PI*(startDeg-90)/180,
endDeg = startDeg + val,
endRadians = Math.PI*(endDeg-90)/180,
x1 = centerX + size*Math.cos(startRadians),
y1 = centerY + size*Math.sin(startRadians),
x2 = centerX + size*Math.cos(endRadians),
y2 = centerY + size*Math.sin(endRadians),
largeArc = val>180 ? 1 : 0,
path = "M"+x1+","+y1+" A"+size+","+size+" 0 "+largeArc+",1 "+x2+","+y2;
el.attr({
d: path,
stroke: color,
fill: 'none',
strokeWidth: 40
});
console.log(el.node.getAttribute('id'),"startDeg",startDeg)
console.log(el.node.getAttribute('id'),"endDeg",endDeg)
},dur, mina.easeinout);
}, begin)
}
</script>
</html>