Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
About the Author
About the Reviewers

The display and the frame rate

Each device and monitor display has a regular refresh interval. A usual monitor frequency is 60 Hz, which means that the display will refresh 60 times per second, and a new frame will be displayed approximately every 16 ms.

JavaScript animations can use setInterval or setTimeout using 16 ms (60 frames per second), as this is a commonly used refresh rate. It's not a good idea to use this hardcoded value, as different devices have different refresh rates and the timer precision is not reliable.

We are able to work around this vulnerability using the requestAnimationFrame function. It receives callback functions like the setInterval and setTimeout functions do, but requestAnimationFrame only calls the callback function when the browser is going to produce a new frame before the next repaint.

To support older browsers, some vendor-specific code can be used as well, as described in the following code:

window.requestAnimationFrame = window.requestAnimationFrame || window...