0

I am using requestAnimationFrame method to animate a canvas. For unsupported browsers, I am using the polyfill

//I am only posting code for polyfill. 
//Actual code uses methods for webkit, mozilla and other browsers too
if(!window.requestAnimationFrame){
    requestAnimationFrame = function(callback){
         return window.setTimeout(callback, 1000/60);
    }
}

My code for animation is

//AnimationCanvas is a canvas with static image of the speedometer
//drawPointerOnCanvas method will draw the pointer
animate = function(context, animationCanvas){
      context.drawImage(animationCanvas, 0, 0);
      drawPointerOnCanvas();
      requestAnimationFrame(this.animate);
}

I want to animate continuously but the polyfill makes the animation random in Android OS 4.1 and 4.2. My requirement is similar to the clock in following MDN link https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations#An_animated_clock

Note: My actual requirement is a speedometer. If I change the speed, it should animate to that point smoothly.

Question: Is there any reliable polyfill or fallbacks available? Because If I use requestAnimationFrame method, animation is smooth. But animation is random if polyfill is used.

Edit: I checked in IE9 by switching through console of IE11, animation is smooth. Could this be related to Memory (RAM) and processor speed in android devices?

Kira
  • 1,403
  • 1
  • 17
  • 46
  • that's not a polyfill for requestAnimationFrame... here is the closest I know : https://gist.github.com/paulirish/1579671 but it's still missing the stack feature of the real one. – Kaiido Jun 07 '16 at 05:49
  • @Kaiido, I am using the same polyfill. Here I posted minimal code for the sake of clarity. In this method, callback will be called to achieve the frame rate of 60 (1000/60). – Kira Jun 07 '16 at 06:16
  • No, it's checking whether the last call took more than 16ms, in this case, call the callback directly (0) otherwise, wait the remaining time until the elapsed time corresponds to 16ms. Your simplification doesn't take care of any elapsed time, so since your calls are not synchronized in any way (setTimeout is not), you'll never have a synced animation – Kaiido Jun 07 '16 at 06:26
  • Also, IE11 mode to pass to iE9 won't actually remove the IE11 features, it will just change the userAgent string. – Kaiido Jun 07 '16 at 06:45
  • Yes, there is no synchronization between the callbacks. I used 0 instead of 1000/60 but still it remains same. I think canvas updates faster than we can see, so it appears random to our eyes – Kira Jun 07 '16 at 07:18
  • Should I use a looping statement instead of recursively calling requestAnimationFrame method – Kira Jun 07 '16 at 07:20
  • what's the difference between a looping statement and recursively calling requestAnimationFrame ? Are you calling multiple times `animate`? If so, place a flag so there is always only one instance of the loop, or call `cancelAnimationFrame`. – Kaiido Jun 07 '16 at 10:23
  • in normal scenario, there will not be any difference. In this case there will be a difference because we use setTimeout. seTimeout and setInterval methods are not reliable. I don't think using a loop will do any good either. So I am now thinking about using an SVG path for animating the needle. Since it is a DOM element, default animation should be supported – Kira Jun 07 '16 at 12:01
  • no I mean, I'm not a native english speaker but semantically, calling requestAnimationFrame (or setTimeout, or any other function) recursively, is a loop isn't it? I think you should provide us some more code on what you are doing. Also, svg animation will have the same problem : not all UA did support CSS animations on svg, nor SMIL, and most shims use `requestAnimationFrame`... – Kaiido Jun 07 '16 at 12:05
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114030/discussion-between-anand-and-kaiido). – Kira Jun 07 '16 at 12:49
  • This stack overflow question gives more details about the inaccuracy in setTimeOut and setInterval http://stackoverflow.com/questions/21097421/what-is-the-reason-javascript-settimeout-is-so-inaccurate – Kira Jun 07 '16 at 13:14

0 Answers0