让SVG饼图只动画一次

Getting SVG pie chart to only animate once

本文关键字：一次 动画 SVG      更新时间：2023-09-26

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

)http://jsfiddle.net/frank_o/gFnw9/6/

我如何让它只动画一次?帮助我删除不必要的代码。

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

要让它只动画一次，你需要停止调用setTimeout()一旦alpha> 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);

对于SVG，您肯定不必这样做。看看这个很棒的教程。这可能有帮助。

教程

相关文章：