Requestanimationframe Animation: Rotating Windmill

In the past, when we make animation on the Web page, if it is implemented with JavaScript, usually through the timer and interval to achieve, after HTML5, we can also use CSS3 transitions and animations very convenient to implement the animation, These technical means in the simple or to the smoothness of the requirements of the animation will not have any problems, but with the improvement of user experience, we made the animation effect has higher requirements, then for more complex and has a higher fluency animation effect, with the above two methods is a little stretched. For the high-quality animation effect of the implementation, we do not want to use FALSH, then how to do? To solve this problem, the browser provides a unified frame management, providing a listening frame API, that is requestAnimationFrame . Today we are using requestAnimationFrame() the function to achieve a high-quality rotating windmill animation effect.

View Preview Download Attachments

Use Advantage

One: If the simultaneous n animation, the function will originally need n times reflow and repaint optimized to 1 times, and then to the browser to optimize, so that the high-quality animation effect.
Second: If a browser tab is running such an animation, then you cut to another tab, or simply minimized, in short, you can not see it, then the browser will stop the animation. This will mean less CPU and less memory consumption.

How to use

Invokes requestAnimationFrame a function that passes a callback parameter, which is called when the next animation frame callback .

    Browser-compatible handling      var Requestanimationframe = (function () {          return Window.requestanimationframe | |          Window.webkitrequestanimationframe | |          Window.mozrequestanimationframe | |          Window.orequestanimationframe | |          Window.msrequestanimationframe | | Function (callback) {              window.settimeout (callback, 1000/60);          };      }) ();      How to use      (function () {          render ();          Requestanimationframe (Arguments.callee, Element);      }) ();

The Requestanimationframe function is a WebKit private API, but it's exciting to hear that all the latest browsers are starting to support it, except Opera. Also note here that the Requestanimationframe function is just a basic API for animating, that is, not based on the DOM element's style changes, nor on canvas, or WebGL. So, specific animation details need to be written by ourselves. For more detailed instructions, see: Requestanimationframe for Smart animating
Well, we've learned about the Requestanimationframe function, so we're going to apply it and make a high-quality rotating windmill animation effect:

Introducing the jquery library:

<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ Script>

JavaScript code:

(function () {var lasttime = 0;    var vendors = [' ms ', ' Moz ', ' webkit ', ' o '];  for (var x = 0; x < vendors.length &&!window.requestanimationframe; ++x) {Window.requestanimationframe        = Window[vendors[x] + ' requestanimationframe ']; Window.cancelanimationframe = window[vendors[x] + ' cancelanimationframe '] | |    Window[vendors[x] + ' cancelrequestanimationframe '];  } if (!window.requestanimationframe) Window.requestanimationframe = function (callback, Element) {var currtime =        New Date (). GetTime ();        var timetocall = Math.max (0, +-(currtime-lasttime));        var id = window.settimeout (function () {callback (currtime + Timetocall);        }, Timetocall);        Lasttime = Currtime + Timetocall;    return ID;    };    if (!window.cancelanimationframe) Window.cancelanimationframe = function (id) {cleartimeout (ID); };} ());//Custom animation action var pinWheelArr36 = [-32,-302,-572,-841,-1112,-1381,-1651,-1921,-2191,-2461,-2732,-3002,-3272,-3542,-3812,-4082,-4352,-4621,-4891,-5161,-5431,-5702,-5972,-6242,-6512  -7322, -7592, -7861, -8132, -8402, -8672, -8941, -9211, -9482];var pinwheel = $ (' #fengche ') var pincount = 0;var fps =  31;function Spin () {setTimeout (function () {requestanimationframe (spin) if (Pincount > Pinwheelarr36.length        -1) {pincount = 0;        };    Pinwheel.css (' background-position ', Pinwheelarr36[pincount] + ' px top ') pincount++; }, 1000/fps);}; Spin ();

HTML code:

<div style= "background-position: -4621px top;" id= "Fengche" ></div>

View Preview Download Attachments

In fact, learning the Requestanimationframe function, as long as we practice, apply to our project, I believe we can make creative and high-quality animation effect. I have just come into contact with, if there is a wrong point of view, please point out, very grateful.

Requestanimationframe Animation: Rotating Windmill