The following code is available when you see other people implementing the particle effect：
Copy Code code 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 what animation you want to perform and requests that the browser redraw the window in its next animated frame. This method is invoked as a callback function before the browser is redrawn.
is to tell the browser to call this method when it refreshes the screen.
Window.requestanimationframe's past and present life：
In the 90 's, the Internet Advertising era, window above a variety of merry-go, all kinds of state text is used settimeout to achieve, as follows:
Copy Code code as follows:
(function () {
function Update () {
SetTimeout (update,1000)
}
SetTimeout (update,1000)
})();
(function () {
function Update () {
//
}
SetInterval (update,1000)
})();
The problem of animation is the most difficult delay problem, for the monitor, 60 frames per second, if we follow the browser refresh rate to control our animation time will have a good effect, that is 17ms,settimeout (CALLBACK,1000/60), but:
1. The timely accuracy of each browser is not the same.
2. For the settimeout and setinterval implementation mechanism is not what we need, after a certain time, the browser will add that part of the code into the UI drawing queue, if the UI thread is busy, there are other tasks blocked, the next frame of the animation will not be executed on time. After a long cumulative heap addition, we may deviate from the original point of time error is getting larger.
Mozilla's Robert O ' Callahan is thinking about the problem and has come up with a unique solution. He points out that the advantage of CSS transitions and animations is that browsers know which animations will occur, so they get the correct intervals to refresh the UI. While JavaScript animations, browsers do not know that animations are happening. His solution is to create a mozrequestanimationframe () method to tell the browser which JavaScript code is executing, which allows the browsing to be optimized after executing some code.
The Mozrequestanimationframe () method accepts a parameter, which is a function called before the screen is redrawn. This function is used to change the appropriate DOM style under the build, and these changes are used in the next redraw. You can call Mozrequestanimationframe () the same way as you would call SetTimeout ().
This is the origin of Window.requestanimationframe.
See below on Mozilla website
Because this technology ' s specification has not stabilized, check the compatibility table for the proper prefixes to use I n various browsers. Also Note that the syntax and behavior of a 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 is used in various browser compatibility tables. Also note that the syntax and behavior of the experimental techniques are changed as changes in future versions of the browser specifications.
Currently under the Android system is not supported, animation can only settimeout slightly.
