javascript canvas pie loader加载时暂停

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% 的圈子，需要将其关闭。