基本语法
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。
1
|
requestAnimationFrame(callback)
//callback为回调函数
|
一个简单的例子
模拟一个进度条动画,初始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的情况。当然,如果你确定代码是工作在现代浏览器中,下面的代码是不必的。
(
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);
};
}());
|