Use Requestanimationframe to optimize your JavaScript animations

With CSS3, we don't need flash to make good-looking animations, and in general we don't even need JavaScript. But CSS3 has some shortcomings in some cases. If you need to calculate or recalculate your animations, you can't leave JavaScript. Although you do not have to use settimeout and setinterval. The disadvantage of this is that you simply repeat a function at the defined time interval. For animations, the defined time interval is not the best way to get them to work. If you have already used these 2 functions, you may have encountered a difficulty in looking for a value with the time interval of the desired animation step. In addition, settimeout and setinterval rarely show synchronized refresh rates, which results in animations that are not accurately given.

Requestanimationframe API in the browser

This paper introduces a choice of HTML5 called Requestanimationframe. In addition to an exception, its operating mode is very similar to the previous function. Use the below code instead of setting the refresh rate interval to proceed on the browse. The comparison between SetTimeout and setinterval is particularly evident. When there is more than one animation running on the browser, it will not feel smooth. The requestanimationframe will reduce the speed of each frame and, if necessary, keep the animation flowing.

2. var schritt = 0;
4. function Animation() {
6. Schritt + = ten;
8. Document. getElementById("element"). Style. Left = Schritt + "px";
10. Window. Requestanimationframe(animation);
12. }
14. Window. Requestanimationframe(animation);

In this example, we have an element that moves from left to right every 10px. The default speed is usually 60 frames per second.

Depending on the CPU, there may be differences. The browser also does not have a fixed frame rate. Another advantage of Requestanimationframe is that only the visible window or tab animation runs. When an animation is found in a window or a label that is inactive, the animation stops, but automatically resumes after the window or label is run again. To stop the animation manually, you can use the Cancelanimationframe function.

Add-on prefix browser to support

At the time of writing this article, only Webkit,mozilla's latest Internet Explorer supported the Requestanimationframe function. The Cancelanimationframe function is currently limited to Mozilla. Because the functions are relatively new, each browser requires a different syntax. You can use a variable to set the appropriate prefix:

1. var requestanimationframe = window. Requestanimationframe | | window. Mozrequestanimationframe | | window. Webkitrequestanimationframe | | window. Msrequestanimationframe;

Conclusion : The performance of animation relies on the function of Requestanimationframe itself to achieve, they are very simple, faster and more reliable. Therefore, you should choose this approach as much as possible, rather than using traditional methods to implement a compatibility strategy for older browsers. In particular, users on the mobile side will feel the benefits from this approach. If you are looking for a good test comparison, the preferred Microsoft IE dev Test.

The original link; http://www.gbtags.com/gb/share/9628.htm

Use Requestanimationframe to optimize your JavaScript animations