畫布動畫進度

我正在使用此jQuery圓形進度條（https://github.com/kottenator/jquery-circle-progress）嘗試創建一個pomodoro計時器。使用文檔，我知道我可以暫停進度條這樣畫布動畫進度

var el = $('.pomProgressTimer'); 
$(el.circleProgress('widget')).stop();

，我可以重繪從它已經取得的進展，恢復進度條。

var obj = $('.pomProgressTimer').data('circle-progress'), 
ctx = obj.ctx, 
progress = ctx.canvas.animationProgress; 
$('.pomProgressTimer').circleProgress({ 
    animationStartValue: progress, 
    });

但是，這隻適用於您第一次暫停進度欄時。當我恢復進度條時，讓它稍微運行一下，再次暫停，然後嘗試恢復它，animationProgress會停留在它第一次的值。

我一直在尋找暫停和恢復畫布動畫，但沒有一個提出的解決方案似乎工作。

它看起來像從文檔中使用暫停方法凍結了animationProgress。有其他方法可以暫停嗎？

這裏有一個的jsfiddle：http://jsfiddle.net/anthkris/jeycb92x/87/

來源

2015-12-14 K. Anthony

就像一個魅力在這裏...不使用過時的瀏覽器嗎？ – giorgio

我正在使用Chrome 47.所以暫停工作。問題是，當你點擊簡歷時，讓它運行，暫停它，然後再次恢復，它從一箇舊值開始，而不是從第二次暫停後進度條的位置開始，如果這是有道理的。 –

對不起，我與我的評論過於草率。

您可以使用lastFrameValue從對象恢復了一圈，像這樣：

var obj = $('.pomProgressTimer').data('circle-progress'), 
    progress = obj.lastFrameValue;

全部小提琴here

來源

2015-12-14 16:33:54 giorgio

非常感謝！我一直在爲此工作三天而沒有成功。 –

應該早點來到我們這裏;） – giorgio

畫布動畫進度

回答

相關問題