requestAnimationFrame

最后更新于:2022-04-01 23:54:20

## requestAnimationFrame `requestAnimationFrame`是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。 可以使用`requestAnimationFrame()`来制作动画。 > 如果你想做逐帧动画的时候,你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率。如果是后台标签页面,重绘频率则会大大降低。 > 回调函数只会被传入一个DOMHighResTimeStamp参数,这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行,所以每个函数都将被传入一个相同的时间戳,尽管经过了之前很多的计算工作。这个数值是一个小数,单位毫秒,精确度在 10 µs。 `requestAnimationFrame()`函数是全局函数。 考虑兼容,如下: ``` var requestAnimFrame = function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {window.setTimeout(a, 1e3 / 60, (new Date).getTime())}; }(); ``` 使用方法: ``` function step(){ requestAnimationFrame(step); } ``` requestAnimationFrame()方法会返回一个requestID,是一个长整型非零值,作为一个唯一的标识符,可将该值作为参数传递给window.cancelAnimationFrame()来取消这个函数。 ``` cancelAnimationFrame(requestID); ``` 兼容性代码: ``` var cancelAnimFrame = function() { return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id) { clearTimeout(id); }; }(); ```
';