JS: Specify FPS frame rate, Requestanimationframe play animation

Flash animation, the most basic concept is the frame, but in Flash, the control of the frame rate is relatively simple, only need to specify the target frame frequency before the compilation can be.

In the actual operation, we do not need to care about the timer problem, Flash Player will trigger enterframe messages on a timed basis to push MovieClip playback.

On the JS side, we need to set a timer and push the corresponding drawing logic to execute.

The simplest:

var fps =max/fps);

In this simple practice, if draw has a large number of logical calculations that cause the calculation to take longer than the frame wait time, a drop frame will appear. Except, if the FPS is too high, more than the browser redraw frequency, will result in computational waste, such as the browser actually redraw 2 frames, but the calculation of 3 frames, then 1 frames of calculation is wasted.

Mature Practices:

Introducing Requestanimationframe, this method is used to inform the browser to invoke a specified function before the page is redrawn to meet the needs of the developer to manipulate the animation.

This function is similar to settimeout, and is called only once.

function Draw () {         requestanimationframe (draw);          // }

Recursive call, you can implement the timer.

However, this is completely synchronized with the browser frame rate, unable to customize the animation frame rate, is unable to meet the demand.

Next you need to consider how to control the frame rate.

Simple procedure:

var fps = +; function tick () {setTimeout (function//  ... Code for Drawing the Frame ...  (+/ fps);} Tick ();

This approach, more intuitive can be found, each time the settimeout execution, will wait until the next Requestanimationframe event arrives, the accumulation will cause the animation to slow down.

Self-control time span:

varFPS = 30;varNow ;varthen =Date.now ();varInterval = 1000/fpsvarDelta;functiontick () {requestanimationframe (draw); now=Date.now (); Delta= Now-Then ; if(Delta >interval) {//It is not easy to then=now here, otherwise there will be a slight time lag problem with the simple approach above. For example, fps=10, 100ms per frame, and now every 16ms (60fps) of draw is executed once. 16*7=112>100, it takes 7 times to actually draw once. In this case, the actual 10 frames need to be 112*10=1120ms>1000ms before drawing is complete.  　　　　  Then= Now-(Delta%interval); Draw (); // ... Code for Drawing the Frame ... 　　 }}tick ();

Re-optimize for low-version browsers:

If the browser does not have requestanimationframe functions, the actual underlying can only be simulated with settimeout, the above is useless work. Then we can improve it a little bit.

varFPS = 30;varNow ;varthen =Date.now ();varInterval = 1000/fpsvarDelta;window.requestanimationframe= Window.requestanimationframe | | Window.mozrequestanimationframe | | Window.webkitrequestanimationframe | |Window.msrequestanimationframe;functiontick () {if(window.requestanimationframe) {requestanimationframe (draw); now=Date.now (); Delta= Now-Then ; if(Delta >interval) {        //It is not easy to then=now here, otherwise there will be a slight time lag problem with the simple approach above. For example, fps=10, 100ms per frame, and now every 16ms (60fps) of draw is executed once. 16*7=112>100, it takes 7 times to actually draw once. In this case, the actual 10 frames need to be 112*10=1120ms>1000ms before drawing is complete.  　　　　  Then= Now-(Delta%interval); Draw (); // ... Code for Drawing the Frame ... 　　     }   }   Else{setTimeout (draw, interval);            }}tick (); 




Finally, you can also add a pause.

varFPS = 30;varPause =false;varNow ;varthen =Date.now ();varInterval = 1000/fpsvarDelta;window.requestanimationframe= Window.requestanimationframe | | Window.mozrequestanimationframe | | Window.webkitrequestanimationframe | |Window.msrequestanimationframe;functiontick () {if(pause)return; if(Window.requestanimationframe) {...} Else     {          ...     }} Tick ();