HTML5 requestanimationframe Animation: Rotating Windmill

For more information, please click here.

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 achieve 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 the Requestanimationframe () function to animate a high-quality rotating windmill.

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

Call the Requestanimationframe function, passing a callback argument, and the next animation frame will call callback.


//浏览器兼容处理 var requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); //如何使用 (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.ma X (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 actions
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,-6782,-7053,-7322,-7592,-7861,-8132 672,-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>

For more HTML5 content, please click here.

HTML5 requestanimationframe Animation: Rotating Windmill