画布动画进度

我正在使用此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

画布动画进度

回答

相关问题