Animated HTML5 Animation Has Random Jitter / Hesitation / Stutter

In Firefox 11 I am experiencing random jitter / wobble / stutter in some basic animation using HTML5 canvas and translation.

See the following example ... http://jsfiddle.net/ACRdx/

The configuration in the example above seemed to provide the smoothest animation at the specified speed, except of course for occasional stuttering.

Does anyone know what might be causing this behavior?

The suggestions suggested in a similar post didn't seem to help, and it hasn't been updated since June 2011. Also the link links are now broken. Please look...

Is there a solution for animating HTML5 canvas?

+3


source to share


1 answer


Try to cut FPS. Perhaps the browser is somehow struggling to work. I messed up your code, it could also be that your imageMoveXDelta is too small. I ran into it down to 0.2 and it went pretty smoothly. Other than that, you should try to think of it as the number of total frames that are taken before it finishes to get a good mix.



+1


source







All Articles