Question

我得到了这个简单的SVG饼图加载器（http://css-tricks.com/css-pie-timer/）：

如何才能让它仅动画一次？帮助我删除不必要的代码的加分点。

HTML：

<svg width="250" height="250" viewbox="0 0 250 250">
  <path id="loader" transform="translate(125, 125) scale(.84)" />
</svg>

JS：

var $loader = $('#loader'),
    alpha = 0,
    pi = Math.PI,
    time = 5;

function draw() {
  alpha++;
  alpha %= 360;

  var r = ( alpha * pi / 180 ),
    x = Math.sin( r ) * 125,
    y = Math.cos( r ) * - 125,
    mid = ( alpha > 180 ) ? 1 : 0,
    animate = 'M 0 0 v -125 A 125 125 1 ' 
           + mid + ' 1 ' 
           +  x  + ' ' 
           +  y  + ' z';

  loader.setAttribute( 'd', animate );

  setTimeout(draw, time); // Redraw
};

draw.call(this);

Answer 1

只有在你需要停止调用setTimeout（）时才能让它动画一旦alpha为＆gt; 360.然后你需要确保完全绘制svg圆圈。

这是一个小提琴：http://jsfiddle.net/gFnw9/12/

var $loader = $('#loader'),
    alpha = 0,
    pi = Math.PI,
    time = 5;

function draw() {
  alpha++;

  var r = ( alpha * pi / 180 ),
    x = Math.sin( r ) * 125,
    y = Math.cos( r ) * - 125,
    mid = ( alpha >= 180 ) ? 1 : 0,
    animate = 'M 0 0 v -125 A 125 125 1 ' 
           + mid + ' 1 ' 
           +  x  + ' ' 
           +  y  + ' z';

    if (alpha < 360){
      setTimeout(draw, time); // Redraw
    }else{
        animate = "M 0 0 v -125 A 125 125 1 1 1 -.1 -125 z";
    }

  loader.setAttribute( 'd', animate );

};

draw.call(this);

Answer 2

嗯，你绝对不能用SVG做这件事。看看这个很棒的教程。它可能有所帮助。

Tutorial

让SVG饼图仅动画一次

2 个答案: