requestAnimationFrame
- 使用
requestAnimationFrame方法可以优化动画效果,避免出现卡顿和掉帧的情况 - 它会在浏览器下一次重绘之前执行回调函数,通常是每秒60次,与屏幕刷新率相匹配
- 在动画效果中使用
requestAnimationFrame可以确保动画在浏览器性能允许的情况下平滑运行
实际开发经验
- 在实际开发中,尽量使用
requestAnimationFrame来执行动画效果,而不是直接使用定时器或者setInterval - 避免在循环中频繁调用
requestAnimationFrame,可以通过设置一个标记来控制动画的开始和结束 - 注意不要在不必要的情况下频繁调用
requestAnimationFrame,这样会导致浏览器性能问题
取消下一帧
- 如果在动画执行过程中需要取消下一帧的绘制,可以使用
cancelAnimationFrame方法来实现 - 通过将
requestAnimationFrame的返回值传递给cancelAnimationFrame,可以取消下一帧的绘制操作 - 这在某些情况下可以提高性能和节省资源,尤其是当动画不再需要或者用户离开当前页面时