Question

我正在使用这个jQuery循环进度条（https://github.com/kottenator/jquery-circle-progress）来尝试创建一个番茄钟计时器。使用文档，我知道我可以像这样暂停进度条

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卡在第一次的值。

我一直在寻找暂停和恢复画布动画，但提议的解决方案似乎都没有效果。

看起来使用文档中的pause方法会冻结animationProgress。还有另一种方法可以暂停吗？

这是一个JSFiddle：http://jsfiddle.net/anthkris/jeycb92x/87/

Answer 1

抱歉，我的评论太仓促了。

您可以使用对象中的lastFrameValue来恢复圈子，如下所示：

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

完整小提琴here

画布动画进展

1 个答案: