What does window.requestAnimationFrame mean and how to use it

What does window.requestAnimationFrame mean and how to use it_Basic knowledge

WBOY

Release： 2016-05-16 17:43:49

Original

2143 people have browsed it

When you look at other people’s implementation of particle effects, they will have the following code:

Copy the code The code is as follows:

 
window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame 
|| window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
function(callback, element) { 
return window.setTimeout(function() { 
return callback( new Date()); 
}, 1000 / 60) 
}); 

What does this mean and how is it used?
window.requestAnimationFrame tells the browser the animation you want to perform and requests the browser to redraw the window in the next animation frame. This method is called as a callback function before the browser redraws.
It tells the browser to call this method when refreshing the screen.

The past and present life of window.requestAnimationFrame:
In the 1990s, the era of Internet advertising, various revolving doors and various status texts on the window were implemented using setTimeout. , as follows:

Copy code The code is as follows:

 
(function(){ 
 function update(){ 
setTimeout(update,1000) 
} 
setTimeout(update,1000) 
})(); 
(function(){ 
function update() { 
// 
} 
setInterval(update,1000) 
})(); 

The most difficult problem with animation is the delay problem. For monitors Say, 60 frames per second, if we control our animation time according to the browser's refresh rate, it will have a good effect, that is, 17ms, setTimeout (callback, 1000/60), but:
1. The real-time accuracy of each browser is different.
2. The implementation mechanism of setTimeout and setInterval is not what we need. After a specific time has passed, the browser will add that part of the code to the UI drawing queue. If the UI thread is very busy at this time, there are other If the task is blocked, the next frame of the animation will not be executed on time. After a long period of cumulative accumulation, we may deviate from the original time point and the error will become larger and larger.

Mozilla’s Robert O’Callahan was thinking about this problem and came up with a unique solution. He pointed out that the advantage of CSS transitions and animations is that the browser knows which animations will occur, so it gets the correct intervals to refresh the UI. With JavaScript animation, the browser doesn't know that the animation is happening. His solution was to create a mozRequestAnimationFrame() method that tells the browser what javascript code is being executed, which allows browsing to be optimized after executing some code.

The mozRequestAnimationFrame() method accepts a parameter, which is a function that is called before the screen is redrawn. This function is used to generate appropriate DOM style changes, and these changes are used in the next redraw. You can chain calls to mozRequestAnimationFrame() in the same way as setTimeout().
This is the origin of window.requestAnimationFrame.

See the following on the Mozilla official website
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.
Since the specification of this technology is not yet stable, the correct prefix to use is in the compatibility tables of various browsers. Also note that the syntax and behavior of experimental techniques are subject to change in future releases of browser specifications.

Currently it is not supported under the Android system, animation can only be setTimeout.