如何使用 requestAnimationFrame 函数代替 setInterval 函数来实现动画效果

使用 requestAnimationFrame 函数来实现动画效果相比 setInterval 函数更为优雅，因为它能够充分利用浏览器的绘制机制，避免出现卡顿现象。下面是一个简单的示例代码：

function animate() {
  // 在这里编写动画代码
  requestAnimationFrame(animate);
}
animate();

以上代码中，我们使用 requestAnimationFrame 函数来代替 setInterval 函数。requestAnimationFrame 函数会在浏览器每一次重绘之前执行一次回调函数，因此我们可以在回调函数中编写动画逻辑，并且动画效果会根据浏览器的刷新频率进行平滑的展示。如果你需要停止动画，可以使用 cancelAnimationFrame 函数来取消 requestAnimationFrame 函数的执行。

需要注意的是，requestAnimationFrame 函数在不同的浏览器中有不同的兼容性实现，因此你需要编写兼容性代码来支持所有的浏览器。