Html5 requestAnimationFrame Animation: rotating windmill,

Html5 requestAnimationFrame Animation: rotating windmill,

 

For details, click

 

In the past, when we were making animations on webpages, if we were using javascript, they were generally implemented through timer and interval. After HTML5 appeared, we can also use transitions and animations of CSS3 to easily implement animation. These technical means will not have any problems with simple or less fluent animations, however, as the user experience improves, the animation effects we make have higher requirements. Therefore, for more complex and smooth animation effects, using the above two methods is a little too slow. We don't want to use falsh for the implementation of high-quality animations. What should we do? To solve this problem, the browser provides an API for unified frame management and frame monitoring, that is, requestAnimationFrame. Today we are using the requestAnimationFrame () function to achieve a high-quality rotating windmill animation.

Advantages

I. If n animations are performed simultaneously, the function will optimize the originally required reflow and repaint n times and then hand them over to the browser for optimization, thus achieving high-quality animation effects.
2. If a tab in the browser is running such an animation, you can switch to another tab or minimize it. In short, you cannot see it, and the browser will stop the animation. This means less CPU and less memory consumption.

Usage

Call the requestAnimationFrame function and pass a callback parameter. The callback function is called when the next animation frame is used.


// The browser is compatible with var requestAnimationFrame = (function () {return window. requestAnimationFrame | window. webkitRequestAnimationFrame | window. required requestanimationframe | 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 private api of webkit. However, except for opera, the latest browsers are now supported. This is an exciting message. Note that the requestAnimationFrame function is only a basic API for animation, that is, it is not based on the style changes of DOM elements, canvas, or WebGL. Therefore, we need to write the animation details by ourselves. For more details, see requestAnimationFrame for smart animating.
Now that we understand the requestAnimationFrame function, we will learn how to use it to create a high-quality rotating windmill Animation:

Introduce 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] + 'requestanimationframework'];
Window. cancelAnimationFrame = window [vendors [x] + 'canonicalizationframework'] | window [vendors [x] + 'canonicalrequestanimationframework'];
}
If (! Window. requestAnimationFrame)
Window. requestAnimationFrame = function (callback, element) {var currTime = new Date (). getTime (); var timeToCall = Math. max (0, 16-(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 );
};
}());
// Customize 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,-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>

 

For more html5 content, click