The delay/interval of animation frames are auto calculated when using requestAnimationFrame. Its calculated based on several factors:
- The fps is decided by the display refresh rate(60 Hz is 60 fps) and computer computation power.
- requestAnimationFrame slows down the rate when browser is in backgroundState. This helps to reduce power consumption and prevents computer from heating.
- When we using requestAnimationFrame the browser knows that we are creating animations there it can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. It can prevent unnecessary reflows and repaints.
- requestAnimationFrame prevents frame dropping because knows the refresh rate.
So when using requestAnimationFrame the interval is always auto calculated. In case you want to specify an interval for your animation then you must use JavaScript timers.
Here is complete tutorial on requestAnimationFrame and JavaScript timers.
Leave a Reply