Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对
requestAnimationFrame
方法的支持，该方法通过在系统准备好绘制动画帧时调用该帧，从而为创建动画网页提供了一种更平滑更高效的方法。在此 API 之前，使用
setTimeout
和
setInterval
绘制的动画并没有为 Web 开发人员提供有效的方法来规划动画的图形计时器。这导致了动画过度绘制，浪费 CPU 周期以及消耗额外的电能等问题。而且，即使看不到网站，特别是当网站使用背景选项卡中的页面或浏览器已最小化时，动画都会频繁出现。
当动画使用分辨率为 10ms 的 JavaScript 计时器绘制动画时，计时可能不匹配，如下所示。
上面一行表示大多数监视器上显示的 16.7ms 显示频率，而下面一行表示通常的 10ms
setTimeout
。每个第三个图形都无法绘制（由红色箭头指示），因为在显示器刷新间隔之前发生了其他绘制请求。这种过度绘制的情况会导致动画断续显示，因为所有第三帧都会丢失。这种计时器分辨率的降低也会对电池使用寿命造成负面影响，并会降低其他应用的性能。
requestAnimationFrame
方法（在万维网联合会 (W3C) 的
针对基于脚本的动画的计时控制
规范中定义）可以解决丢失帧的问题，因为它使应用能够在浏览器需要更新页面显示时（而且仅在这种情况下）获得通知。 因此，应用可与浏览器的绘制时间间隔保持完全一致，并且仅使用适量的资源。从 setTimeout 切换到
requestAnimationFrame
非常容易，因为它们都规划单个回调。要实现持续的动画，请在调用动画函数后再次调用
requestAnimationFrame
。
使用 requestAnimationFrame
要使用这个新的 API，只需使用回调函数调用
requestAnimationFrame
即可。计时由系统处理。 如果当前使用
setTimeout
来驱动动画计时，如下所示：
var handle = setTimeout(renderLoop, PERIOD);
你可以将
setTimeout
替换为
requestAnimationFrame
，如下所示：
var handle = requestAnimationFrame(renderLoop);
这会影响你的第一个重画。若要保持动画继续运行，则需要从回调函数（如此处的 renderLoop）中再次调用
requestAnimationFrame
。
<!DOCTYPE html>
<html>
<head>
<title>Script-based animation using requestAnimationFrame</title>
<style type="text/css">
#animated {
position: absolute; top:100px;
padding: 50px; background: crimson; color: white;
}
</style>
</head>
<body>
<div>Click the box to stop it</div>
<div id="animated">Hello there.</div>
<script type="text/javascript">
// global variables
var elm = document.getElementById("animated");
var handle = 0;
var lPos = 0;
renderLoop(Date.now); // call animation frame to start
function renderLoop(time) {
elm.style.left = ((lPos += 3) % 600) + "px";
handle = window.requestAnimationFrame(renderLoop);
}
// click the box to stop the animation
document.getElementById("animated").addEventListener("click", function () {
if (handle) {
window.cancelAnimationFrame(handle);
}
}, false);
</script>
</body>
</html>
本示例使用
getElementById
将 <div> 元素保存到一个全局变量。调用 renderLoop() 函数以开始动画。在重新定位 <div> 元素后，再次调用
requestAnimationFrame
以设置下一次移动。此操作将继续执行，直至你关闭浏览器或单击 <div> 元素为止。
addEventListener
方法处理 <div> 元素上的单击事件。当你单击该元素时，将使用当前句柄调用
cancelAnimationFrame
。
回调函数中的时间
你可以使用回调函数对几乎所有内容（如 SVG、Canvas 或此处所示的 CSS 属性）设置动画。回调函数具有一个传入
time
参数，该参数表示调用回调函数的时间。它是一个 DOMHighResTimeStamp，是从页面导航开始时测量的高精确度时间。DOMHighResTimeStamp 以毫秒为单位，精确到千分之一毫秒。此时间值不直接与 Date.now() 进行比较，后者测量自 1970 年 1 月 1 日至今以毫秒为单位的时间。如果你希望将
time
参数与当前时间进行比较，请使用当前时间的
window.performance.now
。将时间值从 DOMTimeStamp 更改为 DOMHighResTimeStamp 是
W3C 针对基于脚本动画计时控制
规范的最新编辑草案中的最新更改，并且某些供应商仍将其作为 DOMTimeStamp 实现。较早版本的 W3C 规范使用 DOMTimeStamp，允许你将 Date.now 用于当前时间。
浏览器支持
如上所述，某些浏览器供应商可能仍实现
DOMTimeStamp
参数，或者尚未实现
window.performance.now
计时函数。由于 W3C 规范尚未最后定稿，因此其他浏览器制造商已创建其自己的
requestAnimationFrame
和
cancelAnimationFrame
前缀实现。本例提供了一个我们的动画程序版本，该程序使用 Time 移动 <div> 元素并在多个浏览器上使用。
<!DOCTYPE html>
<html>
<head>
<title>Script-based animation using requestAnimationFrame</title>
<style type="text/css">
div { position: absolute; left: 10px; top:100px; padding: 50px;
background: crimson; color: white }
</style>
<script type="text/javascript">
var requestId = 0;
var startime = 0;
var elm;
function init() {
elm = document.getElementById("animated");
}
function render(time) {
elm.style.left = ((time - startime) / 4 % 600) + "px";
requestId = window.requestAFrame(render);
}
function start() {
if (window.performance.now) {
startime = window.performance.now();
} else {
startime = Date.now();
}
requestId = window.requestAFrame(render);s
}
function stop() {
if (requestId)
window.cancelAFrame(requestId);
}
// handle multiple browsers for requestAnimationFrame()
window.requestAFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// if all else fails, use setTimeout
function (callback) {
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
};
})();
// handle multiple browsers for cancelAnimationFrame()
window.cancelAFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
</script>
</head>
<body οnlοad="init();">
<div id="animated">Hello there.</div>
<button οnclick="start()">Start</button>
<button οnclick="stop()">Stop</button>
</body>
</html>
本例是 W3C 规范的一个扩展示例，添加了供应商前缀元素。此外，本例还对
window.performance.now
进行测试，如果不支持此函数，则使用 Date.now 获取当前时间。
API 参考
示例和教程
有关 Internet Explorer 的 Test Drive 演示
规范
-
基于脚本的动画的计时控制
- 原文地址：
http://msdn.microsoft.com/zh-cn/library/ie/hh920765(v=vs.85).aspx#multiplebrowsers
相关链接：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/