0

Based on this answer: https://stackoverflow.com/a/15693230/3633935 I wanted to create the same animation for time countdown. Drawing it in 1 second interval is fine, also 100ms seems to be correct, but that doesn't look smooth. And to make it look smoother I should decrease the time interval, but by doing this, something goes wrong, maybe the canvas animation doesn't catch up, or the code could be improved. Im open to any ideas. To illustrate the problem I modified the fiddle provided in the original answer. http://jsfiddle.net/uhVj6/1808/ Change the 

curTime += 1000;
setTimeout(function () {
            animate(curPerc / 100)
        }, 1000);

to 

curTime += 10;
setTimeout(function () {
            animate(curPerc / 100)
        }, 10);

to see the problem.

Community
  • 1
  • 1
Jānis
  • 1,773
  • 1
  • 21
  • 30
  • what is the problem you are seeing? – atmd Jul 20 '15 at 16:03
  • I'm not entirely sure you want to be mixing `requestAnimationFrame` and `setTimeout` in this manner – James Thorpe Jul 20 '15 at 16:05
  • Congrats, you've reached the limit of canvas animation. – Eric Jul 20 '15 at 16:05
  • @atmd The problem is that the animation doesn't end in time which you can see in header element. James any other suggestions? If I wasn't clear enough - the result should be that the animation end's at the same time when 0 second passes. – Jānis Jul 20 '15 at 16:12
  • 1
    Your 10ms `setTimeout` interval is too quick. The minimum useful `setTimeout` interval when drawing on canvas is 17ms. That's because screen displays do not usually refresh faster than 17ms and trying to draw faster than 17ms will cause your drawings to "clump together". Instead, refactor your code to draw an additional slice of your timer with each firing of the requestAnimationFrame (rAF) loop. The rAF loop will fire about every 17ms. You don't need `setTimeout` at all. – markE Jul 20 '15 at 18:08
  • @markE You could make this as an answer, because it really helped and solved the issue. Though I still kept setTimeout, but set it to 20ms to make number more appealing, now the animation is smooth and seems to be in time. – Jānis Jul 21 '15 at 10:14

0 Answers0