-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Learning AngularJS Animations
By :
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...
Change the font size
Change margin width
Change background colour