画布动画的requestAnimFrame或setInterval？

Question

哪种画布动画效果最好？ requestAnimFrame或setInterval？

Answer 1

requestAnimationFrame可确保您的动画在浏览器准备好绘制新帧时完全运行。如果您使用setInterval，则可能存在以下风险：

• 使间隔时间过短，在这种情况下，您会耗尽电池寿命，执行过于频繁的永不显示的绘制操作
• 使间隔时间过长，在这种情况下，您可以通过使用更短的间隔获得更平滑的动画

当页面不可见时，

requestAnimationFrame可以减少运行频率（这可以节省电池寿命），但setInterval的某些实现也会这样做（目前在Firefox和Chrome中）。< / p>

requestAnimationFrame是从头开始构建的，旨在用于动画; setInterval旨在执行任何需要定期操作的操作。如果您正在制作动画（尤其是画布动画），我建议使用requestAnimationFrame，并为旧版浏览器支持setInterval。

Answer 2

但是你可以在一个大函数调用中使用setInterval，即加载并仅在窗口加载时调用它：

function load()
{
   var intervalle = x;
   var game= setInterval(process,intervalle);
   ...

}
window.addEventListener("load",load,true);