代码之家 › 专栏 › 技术社区 › Leanne Seawright

加载时暂停javascript画布饼图加载程序

canvas svg css html javascript

1

Leanne Seawright · 技术社区 · 7 年前

我有一个脚本,作为馅饼加载器工作,但加载器部分消失,一旦它击中整个圆圈。我希望当“计时器”达到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);
}

谢谢您。

3 回复 | 直到 7 年前

1

Ullas Hunka 7 年前

问题不在于超时,而在于达到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%的圈,需要关闭。

2

1

Gopal Garva 7 年前

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

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

3

1

Leanne Seawright 7 年前

好的,我不确定发布了答案的用户发生了什么,但是从他们发布的内容来看,经过一点小小的改变,现在可以使用了:

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);
        }
    }