RequestAnimationFrame, another option for animation writing on the Web

In the HTML5/CSS3 era, there are already many options for us to make animations on the web:

You can use animattion + keyframes of CSS3;

You can also use the transition of css3;

You can also draw images on the canvas to achieve animation, or you can use jQuery animation APIs for convenient implementation;

Of course, you can also use window. setTimout () or window. setInterval () is animated by constantly updating the status and position of elements. The premise is that the image update frequency must reach 60 times per second to display smooth animation effects to the naked eye.

Now there is another animation implementation scheme, that is, the window. requestAnimationFrame () method in the draft.

First glance at requestAnimationFrame

Let's take a look at the explanation on MDN:

The window. requestAnimationFrame () method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. the method takes as an argument a callback to be invoked before the repaint.

Window. requestAnimationFrame () will tell the browser that you are about to start the animation. The latter needs to call the corresponding method before the next animation to update the screen. This method is passed to the callback function of window. requestAnimationFrame.

This method is similar to setTimeout/setInterval. You can call the same method recursively to update the screen to achieve the dynamic effect, however, it is better than setTimeout/setInterval because it is an API provided by the browser for animation. At runtime, the browser will automatically call the optimization method, and if the page is not activated, the animation is automatically paused, effectively saving the CPU usage.

Basic syntax

It can be called directly or through window. A function is received as the callback and an ID value is returned. You can cancel the animation by passing this ID value to window. cancelAnimationFrame.

requestAnimationFrame(callback)

 

A simple example

Simulate a progress bar animation. The initial div width is 1 px. In the step function, add the progress to 1 and update it to the div width. repeat this process until the Progress reaches 100.

A running button is added for demonstration convenience (refresh if you cannot see the example ).

0%

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || start =  ele = document.getElementById("test" progress = 0+= 1= progress + "%"=progress + "%" (progress < 100"run").addEventListener("click", = "1px"= 0);

 

Browser support

Since it is still a function introduced in the draft State, we need to care about the support of various browsers when using it. For the moment, mainstream modern browsers support it. Please refer:

 

More specific browser compatibility can be seen here.

Polyfill

Polyfill is the gasket. According to the words invented by the author, it is such a piece of code that allows the browser to easily support some of the APIS we want to use.

For example, here, the requestAnimationFrame, after seeing the browser support above, you will know that this method is not supported if it is older than the browser version listed above, but in order to make the Code better compatible with the browser and run it on the old machine, we can write some code so that the browser can use the window without supporting requestAnimationFrame. setTimeout () is a method to roll back (fallback) to the past.

In this way, polyfill can be understood in a more general sense. It is a backup.

The following is a code snippet put by Paul Irish and other contributors on GitHub Gist. It is used to roll back when the browser does not support requestAnimationFrame. It is used to roll back to setTmeout. Of course, if you are sure that the code is working in modern browsers, the following code is unnecessary.

( lastTime = 0 vendors = ['ms', 'moz', 'webkit', 'o' ( x = 0; x < vendors.length && !window.requestAnimationFrame; ++= window[vendors[x] + 'RequestAnimationFrame'= window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame' (!window.requestAnimationFrame) window.requestAnimationFrame =  currTime =  timeToCall = Math.max(0, 16 - (currTime - id = window.setTimeout(+= currTime + (!window.cancelAnimationFrame) window.cancelAnimationFrame = 

 

The above code serves two purposes: one is to unify the prefixes of various browsers, and the other is to direct the browser to the setTimeout method when there is no requestAnimationFrame method.

When it comes to the preparation code, here we will say that in CSS code, we often use this rollback technique, that is, for the same CSS rule, write multiple codes starting with different browser prefixes, or write a backup style.

The following is an example of the preparation code in CSS:

{:; :;}

 

The Code sets the div background to a black color with 50% transparency, but IE9-'s browser does not support the rbga format color, so the browser will roll back to the previous CSS rule to apply the rgb color.

 

Reference:

1. article about rAF from css tricks: http://css-tricks.com/using-requestanimationframe/

2. article about rAF from Paul Irish: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

3. what is polyfill http://remysharp.com/2010/10/08/what-is-a-polyfill/