【问题标题】:requestAnimFrame or setInterval for canvas animation?画布动画的 requestAnimFrame 或 setInterval?
【发布时间】:2012-12-13 05:24:19
【问题描述】:

哪一个最适合画布动画? requestAnimFrame 还是 setInterval ?

【问题讨论】:

标签: javascript jquery html canvas


【解决方案1】:

requestAnimationFrame 保证您的动画在浏览器准备好绘制新帧时准确运行。如果您使用setInterval,您将面临以下风险:

  • 使间隔太短,在这种情况下,您会因为执行过于频繁的绘制操作而耗尽电池寿命,而这些操作永远不会显示
  • 使间隔过长,在这种情况下,您可以通过使用更短的间隔来获得更流畅的动画

requestAnimationFrame 可以在页面不可见时降低运行频率(这可以节省电池寿命),但setInterval 的一些实现也可以做到这一点(目前在 Firefox 和 Chrome 中)。

requestAnimationFrame 是从头开始构建的,旨在将其用于动画; setInterval 旨在执行任何需要定期操作的操作。如果您正在制作动画(尤其是画布动画),我建议您使用 requestAnimationFrame,对于较旧的浏览器使用 setInterval

【讨论】:

    【解决方案2】:

    但是你可以在一个大的函数调用中使用 setInterval ,即加载并且只在窗口加载时调用它:

    function load()
    {
       var intervalle = x;
       var game= setInterval(process,intervalle);
       ...
    
    }
    window.addEventListener("load",load,true);
    

    【讨论】:

    • -1:这如何回答这个问题?是的,您当然可以setInterval 用于动画,但这个答案并不能解释为什么setIntervalrequestAnimationFrame 更好。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-09
    • 2014-09-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多