Js utilizes the requestAnimationFrame () API of H5 for animation effects

Why use requestAnimationFrame:

• As we know, the browser implementation of animation is nothing more than CSS3 animation propertiestransition.aniamtionAnd JavaScriptsetTImeOutandsetIntervalMethod to animate the DOM style loop. Speaking of this may be a lot of students have a question, since there are CSS animation properties so convenient things, why still usesetTimeOutWhy is the isojs method so troublesome? Let’s solve that problem first.
  
  

• CSS3 animation properties and JavaScript animation methods:

1. A thing must exist for a reason, API is no exception, otherwise it would have been obsolete. First of all, there are compatibility issues with CSS3 animation properties, the most obvious being compatibility after IE10. And the current mainstream backward compatibility standards or to achieve IE9, sosetTImeOutJs method or the mainstream animation solution.
2. There are some animation effects that CSS3 cannot implement, such as changing elementsscrollTopScroll to the value of, so you can only use js related methods.
3. CSS3 animation can not achieve too complex animation effects, such as CSS3 support control animation speed siebel curve value is limited, more complex animation effects have to use JS combined with relevant algorithms to complete

• Let’s get back to business. SorequestAnimationFrameThere aresetTimeOutandsetIntervalThere’s a difference. Well, here we go.
  
  

• setTimeOutandsetIntervalProblems:

1. First of all, we have to know that the animation rendering is frame by frame, each frame is a static state of the animation, each frame connected to become an animation. So each frame interval appears smooth fluent enough short animation, but each frame can’t interval too short, because the browser can every second rendering is limited, and the screen refresh ability is limited, most of the display refresh rate is 60 h is 60 frames per second, so the browser redraws frequency does not exceed the display refresh rate.
2. So about 17 seconds per frame is the optimal redraw interval. Then use it directlysetTimeOutorsetInterval, the interval is set to 17. But that still doesn’t work.
1. Due to browser millisecond inaccuracy: browser timers are not accurate to the millisecond level. IE8 is a little more than 15ms accurate, while IE9 and most other browsers are around 4ms accurate. Therefore, it is difficult to ensure the best time interval for animation.
2. Different browsers render differently, so 17ms per frame is not the optimal render interval.
3. In places where animation is not needed, such as background tabs, the animation is still running, consuming CPU performance.

• So h5requestAnimationFrameIs to solve the above problems.
  
  

• RequestAnimationFrame features:

1. requestAnimationFrameAll DOM operations in each frame are grouped together in a single redraw or rearrangement.
   
   
2. requestAnimationFrameThe time interval between redrawing or rearranging is the system time interval, because different browsers have different system time intervals,requestAnimationFrameThe best draw intervals will be maintained, so that the browser will not be unable to render because the draw intervals are too short, and the animation will not lag because the draw intervals are too long. This allows for the best rendering in different browsers.
   
   
3. In hidden or invisible elements,requestAnimationFrameWill not be rearranged or redrawn, but run when the page is not active, as inrequestAnimationFrameRun in the background TAB, the animation will be paused, effectively saving CPU overhead.

• So how do you use itrequestAnimationFrame?

RequestAnimationFrame:

• requestAnimationFrameIt’s as simple as passing in a function that changes the DOM and calling it over and over againrequestAnimationFrameCan achieve the animation effect. RequestAnimationFrame returns an integer request ID, which can be usedcancelAnimationFrameFunction to cancel the passrequestAnimationFrameThe callback function of. Specific use can seeMDN tutorial.

Aside: