QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads requestAnimationFrame Delay

requestAnimationFrame Delay

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.

Oct 20, 2014Narayan Prusty
HTML Textarea Fixed SizeJavascript Create File Object From URL

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Changing CSS Style using JavaScript
  • Web Animation API Tutorial
  • Prevent Sleep using HTML5 Standby API
  • Making HTML Underlying Elements Clickable Using pointer-events CSS Property
  • Capturing Webcam Image Using JavaScript
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license