2019-07-15 requestAnimationFrame复习

  • 为什么需要

    • JavaScript以前使用setTimeout和setInterval进行动画控制,由于事件队列的问题,存在时间精度不准确的问题,引起动画不平滑
    • requestAnimationFrame会根据显示器频率决定重绘,降低性能损耗
  • 如何使用

    requestAnimationFrame是全局方法,可以再window上面直接调用
    接收一个参数callback作为回调函数,callback不会立即执行,requestAnimationFrame会告知浏览器下次一UI更新时要做什么事,具体执行渲染浏览器会根据屏幕的频率计算

    // 函数签名 
    requestAnimationFrame(callback)
    

    requestAnimationFrame调用后返回一个long类型的任务id,可以通过调用cancelAnimationFrame停止动画的继续执行,但是cancelAnimationFrame是这个实验性功能,在大多数浏览器上可能不工作

  • 缺陷

    要修改UI形成动画时需要手动调用。

  • 例子


    演示图片


  
    
  
  
    

你可能感兴趣的:(2019-07-15 requestAnimationFrame复习)