javascript画布pie加载程序在加载时暂停

Question

我有一个脚本，它可以作为饼图加载程序，但加载程序部分一旦到达完整的圆圈就消失了。我希望它在"计时器"达到100%时停止(也就是一个完整的圆圈(。但我想不通。

这是我的代码

var loader = document.getElementById('pie-loader'),
α = 0,
π = Math.PI,
t = 22,
tdraw;
function PieDraw() {
α++;
α %= 360;
var r = (α * π / 180),
x = Math.sin(r) * 90,
y = Math.cos(r) * -90,
mid = (α > 180) ? 1 : 0,
anim = 'M 0 0 v -90 A 90 90 1 ' + mid + ' 1 ' + x + ' ' + y + ' z';
loader.setAttribute('d', anim);
if (α != 0) {
tdraw = setTimeout(PieDraw, t);
}
}
PieDraw();

.pie svg {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
display: block;
width: 180px;
height: 180px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: none
}
.pie #pie-loader {
fill: #155385;
fill-opacity: .5
}

<div class="pie">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewbox="0 0 180 180"><path id="pie-loader" transform="translate(90,90)" /></svg>
</div>

一旦蓝色圆圈满了，如果能帮上忙，我们将不胜感激！

我试着添加了这个，但它不是100%满的。

function PiePause(){
clearTimeout(tdraw);
var anim = 'M 0 0 v -90 A 90 90 1 1 1 -3.140954703225074 -89.94517443171861 z';
loader.setAttribute('d',anim);
}

谢谢。

Answer 1

问题不在于超时，而在于实现100%圆，以实现添加关闭参数所需的效果。可以按以下方式进行：

var loader = document.getElementById('pie-loader'),
α = 0,
π = Math.PI,
t = 22,
tdraw, prevMid = '';
function PieDraw() {
α++;
α %= 360;
var r = (α * π / 180),
x = Math.sin(r) * 90,
y = Math.cos(r) * -90,
mid = (α > 180) ? 1 : 0,
anim = 'M 0 0 v -90 A 90 90 1 ' + mid + ' 1 ' + x + ' ' + y + ' z';
if (α == 0) {
anim = ' M 0, 0' +
'm -90, 0' +
'a 90,90 0 1,0 180,0' +
'a 90,90 0 1,0 -180,0 z'
}
loader.setAttribute('d', anim);
if (α != 0) {
tdraw = setTimeout(PieDraw, t);
}
}
PieDraw();

.pie svg {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
display: block;
width: 180px;
height: 180px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: none
}
.pie #pie-loader {
fill: #155385;
fill-opacity: .5
}

<div class="pie">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewbox="0 0 180 180"><path id="pie-loader" transform="translate(90,90)" />

</svg>
</div>

实际上，你得到了99.99%的圆圈，需要关闭。

Answer 2

if((α != 0) && (α < 360)) { tdraw = setTimeout(PieDraw,t); }

在if条件下进行此更改并进行检查。

Answer 3

好的，我不确定发布答案的用户发生了什么，但从他们发布的内容来看，经过一些小的更改，现在可以工作了：

var loader = document.getElementById('pie-loader'), α = 0, π = Math.PI, t = 22, tdraw;
function PieDraw(){
α++;
α %= 360;
var r = ( α * π / 180 )
, x = Math.sin( r ) * 90
, y = Math.cos( r ) * - 90
, mid = ( α > 180 ) ? 1 : 0
, anim = 'M 0 0 v -90 A 90 90 1 ' 
+ mid + ' 1 ' 
+  x  + ' ' 
+  y  + ' z';
loader.setAttribute( 'd', anim );
if((α !== 0) && (α < 359)) {
tdraw = setTimeout(PieDraw,t);
} else {
var anim = 'M 0 0 v -90 A 90 90 1 1 1 -0.01 -90 z';
loader.setAttribute('d',anim);
}
}