一、 window.requestAnimationFrame()
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画 该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。 回调函数会被传入一个参数，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间 返回值 一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。 你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。 window.cancelAnimationFrame(requestID) 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求. requestID是先前调用window.requestAnimationFrame()方法时返回的ID
二、案例
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #test{ width: 200px; height: 200px; background: pink; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <div id="test"></div> </body> <script type="text/javascript"> /* * window.requestAnimationFrame() * window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画 * 该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。 * * * 回调函数会被传入一个参数，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间 * * 返回值 * 一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。 * 你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。 * * * window.cancelAnimationFrame(requestID) * 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求. * requestID是先前调用window.requestAnimationFrame()方法时返回的ID. */ var start = null; var element = document.getElementById('test'); element.style.position = 'absolute'; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start;
// 元素不断向左移，最大不超过200像素
element.style.left = Math.min(progress / 10, 200) + 'px';
// 如果距离第一次执行不超过 2000 毫秒，
// 就继续执行动画
if(progress < 2000) {
window.requestAnimationFrame(step);
}
} window.requestAnimationFrame(step); </script> </html>