requestAnimationFram

匿名 (未验证) 提交于 2019-12-02 23:49:02

window.requestAnimationFrame()

注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame()requestAnimationFrame()

回调函数会被传入参数,requestAnimationFrame()

window.requestAnimationFrame(callback);
callback
下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入参数,该参数与的返回值相同,它表示requestAnimationFrame()

longwindow.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);

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!