requestanimationframe用法一二

基本语法

可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。

一个简单的例子

模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。

为了演示方便加了一个运行按钮（看不到例子请刷新）。

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>

<input type="button" value="Run" id="run"/>

复制代码

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var start = null;

var ele = document.getElementById("test");

var progress = 0;

function step(timestamp) {

    progress += 1;

    ele.style.width = progress + "%";

    ele.innerHTML=progress + "%";

    if (progress < 100) {

        requestAnimationFrame(step);

    }

}

requestAnimationFrame(step);

document.getElementById("run").addEventListener("click", function() {

    ele.style.width = "1px";

    progress = 0;

    requestAnimationFrame(step);

}, false);

下面是由Paul Irish及其他贡献者放在GitHub Gist上的代码片段，用于在浏览器不支持requestAnimationFrame情况下的回退，回退到使用setTmeout的情况。当然，如果你确定代码是工作在现代浏览器中，下面的代码是不必的。