window.requestAnimationFrame()
注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()
当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame()
requestAnimationFrame()
回调函数会被传入参数,requestAnimationFrame()
window.requestAnimationFrame(callback);
callback
- 下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入参数,该参数与的返回值相同,它表示
requestAnimationFrame()
long
window.cancelAnimationFrame()
范例
var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); element.style.position = 'absolute'; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; element.style.left = Math.min(progress / 10, 200) + 'px'; if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);