requestAnimationFrame使用

• 相对定时器的优势

  • 由系统决定回调函数的执行时间,保证回调函数在屏幕每次的刷新间隔中只被执行一次,不丢帧,不卡顿.

  • CPU节能

    • 定时器：当页面被隐藏或最小化时,后台仍在执行动画任务,浪费资源,
    • requestAnimationFrame：在页面处理为未激活的状态下,屏幕刷新任务也会被系统暂停,因此跟着屏幕刷新率走的requestAnimationFrame也会停止渲染,当页面再次被激活时,动画再次从上次停留的地方继续执行,节省CPU开销

  • 函数节流

    • 保证每个刷新间隔期间的刷新只被执行一次,既保证流畅性,又节省函数执行的开销,假设屏幕是60hz的刷新率,那么显示器每1000/60≈16.7毫秒刷新一次,多次绘制并不会在屏幕表现出来.

• 相关知识

  • requestAnimationFrame是H5新增方法
  • 被绑定在window对象身上
  • 接受一个回调函数作为参数
  • 返回值是当前执行的唯一标志,用来清除本次执行(与计时器相似),不需要设置时间参数,会随着屏幕刷新率自动执行

• 使用

定义

let i = 0;
function step(timestamp) {
   console.log(i++);
   window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

清除

let myReq;
let i = 0;
function step(timestamp) {
   console.log(i++);
   myReq = window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

document.onclick = function(){
   window.cancelAnimationFrame(myReq);    // 专属清除方式
}

自定义刷新率

function animate(cb,time){
    let myReq;    // 记录requestAnimationFrame的返回值
    let i = 1;    // 记录requestAnimationFrame的执行次数（屏幕刷新次数）
    myReq = requestAnimationFrame(function fn(){    // 开启初始requestAnimationFrame
        // 计数器 % (60/一秒钟执行的次数)
        if(i%parseInt(60/(1000/time)) == 0){
            cb();    // 执行真正要做的事情
        }
        i++;    // 记录requestAnimationFrame执行的次数
        myReq = requestAnimationFrame(fn);    // 开启下次requestAnimationFrame
        window.myReq = myReq;    // 将requestAnimationFrame返回值暴露，方便清除
    });
}

// 测试
animate(function(){
    console.log("哒哒哒");
}, 1000);    // 自定义执行时间
document.onclick = function(){
    // 主动控制清除动画
    cancelAnimationFrame(myReq);
}

参考资料:
全面了解requestAnimationFrame
requestAnimationFrame & 定时器
window.requestAnimationFrame