Learning the HTML5 series--Requestanimationframe

First, the opening analysis

Hi, everyone! Big Bear June again and everyone meet, (*^__^*) Xi hee ..., this series of articles is mainly to learn HTML5 related knowledge points, to learn API knowledge points for the portal, the introduction of the example,

Let everyone step by step experience what "H5" can do, as well as in the actual project how to use to achieve the rational application of freedom, perfect control O (∩_∩) o~, well, nonsense not to say, directly into today's theme,

Today it is mainly about the "Requestanimationframe API" and the role in the client browser, and will introduce a practical example as a prototype example, let's take a look at the "Requestanimationframe API" ：

　　In fact, in web development, we have a lot of options to achieve animation effects:

1, you can use the CSS3 animattion+keyframes.

2, you can also use the CSS3 transition.

3, you can also use the canvas on the graph to achieve animation, but also through the jquery animation-related APIs easy to implement.

4, you can also use the most original "window.settimout ()" or "Window.setinterval ()" By constantly updating the status of the elements to achieve animation, if the screen update frequency to reach 60 times per second to allow the naked eye to see the smooth animation effect.

5, haha ha! Now there is one more way to implement animation, that is, the "window.requestanimationframe ()" method that is still in the draft.

　　　　

What is Requestanimationframe?

In the browser animation program, we usually use a timer to cycle every few milliseconds to move the object once, to make it move. Now that the good news is that the browser developers decide: "Hey, why don't we provide such an API in the browser,

This allows us to optimize their animations for the user. "So, this requestAnimationFrame() function is the API for the animation effect, you can use it on the DOM style change or canvas animation or WebGL."

What are the benefits of using Requestanimationframe?

The browser can optimize the parallel animation action, more reasonable rearrange the action sequence, and put the action can be merged in a rendering cycle to complete, thus showing more smooth animation effect.

For example, requestAnimationFrame() JS animations can occur synchronously with CSS animations/transformations or SVG smil animations. In addition, if you run an animation on a browser tab, when the tab is not visible,

The browser pauses it, which reduces CPU, memory pressure, and saves battery power.

The use of Requestanimationframe

First look at a simple little chestnut:

　　Simulate a progress bar animation, the initial div width of 1px, in the step function of the progress plus 1 and then update to the div width, before the progress reached 100, repeat the process.

<div id= "test" style= "Width:1px;height:17px;background: #0f0;" >0%</div>
<input type= "button" value= "Run" id= "Run"/>
window.requestanimationframe = Window.requestanimationframe  window.mozrequestanimationframe  window.webkitrequestanimationframe  Window.msrequestanimationframe;
var start = null;
var ele = document.getElementById ("test");
var progress = 0;
function Step (timestamp) {
progress = 1;
Ele.style.width = progress + "%";
ele.innerhtml=progress + "%";
if (Progress < MB) {
requestanimationframe (step);
}
Requestanimationframe (step);
document.getElementById ("Run"). AddEventListener ("click", Function () {
ele.style.width = "1px";
progress = 0;
Requestanimationframe (step);
}, false;