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>

查看预览下载附件

其实学习了requestAnimationFrame函数，只要咱们多加练习，运用到咱们的项目中去，相信必定能够作出具备创意和高质量的动画效果。我也是刚刚接触到，若有错误的观点，请指出，很是感激。