requestAnimationFrame

  • 使用requestAnimationFrame方法可以优化动画效果,避免出现卡顿和掉帧的情况
  • 它会在浏览器下一次重绘之前执行回调函数,通常是每秒60次,与屏幕刷新率相匹配
  • 在动画效果中使用requestAnimationFrame可以确保动画在浏览器性能允许的情况下平滑运行

实际开发经验

  • 在实际开发中,尽量使用requestAnimationFrame来执行动画效果,而不是直接使用定时器或者setInterval
  • 避免在循环中频繁调用requestAnimationFrame,可以通过设置一个标记来控制动画的开始和结束
  • 注意不要在不必要的情况下频繁调用requestAnimationFrame,这样会导致浏览器性能问题

取消下一帧

  • 如果在动画执行过程中需要取消下一帧的绘制,可以使用cancelAnimationFrame方法来实现
  • 通过将requestAnimationFrame的返回值传递给cancelAnimationFrame,可以取消下一帧的绘制操作
  • 这在某些情况下可以提高性能和节省资源,尤其是当动画不再需要或者用户离开当前页面时