獲取SVG餅圖只有一次動畫

我得到這個簡單的SVG餅圖裝載機（http://css-tricks.com/css-pie-timer/）：獲取SVG餅圖只有一次動畫

我如何得到它只有一次動畫？幫助我刪除不必要代碼的獎勵積分。

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

來源

2014-05-21 Mark Boulder

得到它只有一次動畫您需要停止調用的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);

來源

2014-05-21 23:13:31 Zevan

謝謝！與此同時出現：http://jsfiddle.net/frank_o/gFnw9/13/ - 你怎麼看？ –

多數民衆贊成在酷，你只需要確保餅圖不會消失在最後...所以再畫一次作爲一個完整的圓圈 – Zevan

我正在尋找類似的事情，但我需要在倒計時風格 - 一旦餡餅用完，餡餅必須消失。這裏是修改的小提琴，以防有人在搜索：[jsfiddle.net/gFnw9/82/](http://jsfiddle.net/gFnw9/82/） –

嗯，你definetly沒有與SVG做到這一點。看看這個偉大的教程。它可能會有幫助。

Tutorial

來源

2014-05-21 22:20:35

這一個必須是SVG。我實際上從你鏈接的教程中獲得了代碼。 –

獲取SVG餅圖只有一次動畫

回答

相關問題