html5 requestAnimationFrame制作动画：旋转风车

详细内容请点击

在以往，我们在网页上制作动画效果的时候，如果是用javascript实现，一般都是通过定时器和间隔来实现的，出现HTML5之后，我们还可以用CSS3 的transitions和animations很方便的实现动画，这些技术手段在对于简单的或者对流畅性要求不高的动画不会有什么问题，然而随着用户体验的提高，我们制作的动画效果有了更高的要求，那么对于比较复杂的而且具有较高流畅性的动画效果，用以上的两种方法就有点捉襟见肘了。对于质量较高的动画效果的实现，我们又不想用falsh，那怎么办呢？为解决这个问题，浏览器提供了一个统一帧管理、提供监听帧的API，即requestAnimationFrame。我们今天就是利用requestAnimationFrame()函数来实现一个高质量旋转风车的动画效果。

使用优势

一：假如同时进行的n个动画，函数会把原本需要n次reflow和repaint优化成1次，然后交给浏览器进行优化，这样就实现了高质量的动画效果。
二：如果浏览器的某个tab正在运行这样一个动画，然后你切到另一个tab，或者干脆最小化，总之就是你看不见它了，这时浏览器就会停止动画。这将意味着更少的CPU和更少的内存消耗。

使用方法

调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用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); })();


requestAnimationFrame函数是webkit私有api，不过基本除了opera，现在各个最新的浏览器也都开始支持了，这是个很让人振奋的消息。另外在这里注意说明一下，requestAnimationFrame函数只是一个做动画的基础API，即不基于DOM元素的style变化，也不基于canvas，或者WebGL。所以，具体的动画细节需要我们自己写。更多的详细说明介绍请看：requestAnimationFrame for smart animating
好了，我们了解了requestAnimationFrame函数，那么我们接下来就学以致用，制作一个高质量旋转风车动画效果：

引入jQuery库：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


javascript代码：


(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, 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);
};
} ());
// 自定义动画动作
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代码：

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

更多html5内容请点击