让 SVG 饼图只动画一次答案

【问题标题】：Getting SVG pie chart to only animate once让 SVG 饼图只动画一次
【发布时间】：2014-05-21 22:15:53
【问题描述】：

我得到了这个简单的 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);

【问题讨论】：

标签： javascript jquery svg pie-chart

【解决方案1】：

要使其仅在 alpha 大于 360 时停止调用 setTimeout() 时才进行动画处理。然后您需要确保 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);

【讨论】：

谢谢！不过同时想出了这个：jsfiddle.net/frank_o/gFnw9/13——你怎么看？
这很酷，您只需要确保饼图不会在最后消失...所以再画一次完整的圆圈
我一直在寻找类似的东西，但我需要倒计时风格的东西——一旦时间用完，馅饼就必须消失。这是修改后的小提琴，以防有人搜索：jsfiddle.net/gFnw9/82/

【解决方案2】：

嗯，您绝对不必使用 SVG 来执行此操作。看看这个很棒的教程。它可能会有所帮助。

Tutorial

【讨论】：

这个必须是 SVG。我实际上从您链接到的教程中获得了代码。