标签: requestanimationframe

适用于HTML5游戏,适用于移动设备的画布动画.

我面临一些性能问题,这些问题会影响每个设备与其他设备之间的速度.

requestAnimationFrame根据设备速度加快游戏动画.
setInterval震惊了我,从设备到另一个设备有一个延迟.
setTimeout在画布上绘图也很慢.

曾有过移动HTML5游戏经验的人可以指导我在其他三个(或其他技术,如果可用的话)中使用最佳方式在不同的移动设备上稳定地开发动画？

在主程序中,我随机选择一个我想要动画的对象,所以我用对象作为参数调用该函数.第一个循环没问题,X设置得很好,但是在下一个循环中它变得不确定.

像这样的东西:

var anim = {
        mainFunc: function(x) {
            anim.update(x);
            anim.redraw(x);
            window.requestAnimationFrame(anim.mainFunc);
        },

        update: function(x) {

        },

        redraw: function(x) {

        }
};

var n=Math.floor(Math.random() * (ArrayOfAnimObject.length));
anim.mainFunc(ArrayOfAnimObject[n]);

我找到了两个来源,它说React正在使用requestAnimationFrame 这个博客文章关于Om,一个基于React的ClojureScript框架.还有关于这个SO答案的评论.

我不确定它是React的一部分还是人们在React中使用它.

有人能告诉我requestAnimationFrameReact中的用法是什么吗？或者它如何与React一起使用以及为什么我会选择将它与React一起使用？

编辑:我已将此报告为Chromium错误:https://bugs.chromium.org/p/chromium/issues/detail？ id = 668257

我在JS中用可以射击的敌人创建一个小帆布游戏.为了测试,我创建了一个全局声明的标志,let fancy = true;以确定是否使用"花式"定位算法.我这样按下P就会切换这个标志.我的主要功能,每秒frame调用另一个函数autoShoot,五次.autoShoot使用fancy旗帜.

今天,奇怪的事情开始发生了; 我不记得引入了什么变化.有时,当我按下P时,autoShoot表现得像fancy是没有被切换.我做了一些调试和发现新的触发值是反映内frame,但autoShoot不更新的价值.它间歇性地发生,有时它的价值autoShoot会自行解决(没有我做过任何事情).

我把代码减少到了以下,这对我来说仍然存在问题.尝试多次按P.对我来说,两个值"不同步"并在按P一次或两次后显示不同:

(我在Windows 10上运行Chrome"Version 54.0.2840.99 m".)

const canvas = document.getElementById("c");
const width = 0;
const height = 0;
const ctx = canvas.getContext("2d");
const ratio =1;// (window.devicePixelyRatio||1)/(ctxFOOOOOOOOFOOOOOOOOOFOOOOO||1);
canvas.width = width*ratio;
canvas.height = height*ratio;
canvas.style.width = width+"px";
canvas.style.height = height+"px";
ctx.scale(ratio, ratio);

function testSet(id, val) {
  console.log(id+": …

(我需要在浏览器上使用process.nextTick等效项.)

我正在努力充分利用javascript的性能,所以我做了一个简单的计数器...在一秒钟内我连续调用一个函数,只是将一个函数添加到变量中.

代码:codepen.io/rafaelcastrocouto/pen/gDFxt

我使用setTimeout大约250,使用google chrome/win7中的requestAnimationFrame获得70.我知道requestAnimationFrame与屏幕刷新率一致,所以我们怎样才能让它更快？

PS:我知道asm.js

我试图捕获视频的每个帧编号,但看起来没有办法实现它.所以我开始使用自己的时钟来匹配视频的帧数,但它们从不匹配,随着视频的进展,差异也在不断增加.

请看看我的垃圾箱.http://jsbin.com/dopuvo/4/edit

我已经将帧编号添加到Adobe After Effects的每个视频帧中,因此我可以获得更准确的差异信息.视频以29.97fps运行,requestAnimationFrame也设置为以相同的速率增加数量,但我不确定这种差异来自何处.

有时他们匹配,有时他们不匹配.我也尝试离线,但我得到相同的结果.任何帮助.

requestAnimationFrame刚刚发现,我已经深入了解了我能找到的所有信息.仅列举我遇到的一些资源,以防有其他人寻找有关它的更多信息:

• http://creativejs.com/resources/requestanimationframe/ - 解释它的基础知识.
• http://www.html5rocks.com/en/tutorials/speed/animations/ - 解释如何使用它.

无论如何,所有这些资源告诉我一些关于如何requestAnimationFrame工作或如何使用它的信息,但没有一个告诉我什么时候使用它.

• 我应该将它用于动画(重复更改元素的样式,就像CSS动画一样)？
• 当自动事件想要更改一个或多个元素的css /类时,我应该使用它吗？
• 当自动事件想要更改一个或多个元素的文本值时,我应该使用它吗？(例如,每秒更新一次时钟的值)
• 当自动事件想要修改DOM时,我应该使用它吗？
• 当自动事件需要像.offsetTop,.offsetLeft这样的值时,我是否应该使用它,然后想要进一步改变顶部和左侧的样式？
• 当用户生成的事件导致上述任何变化时,我应该使用它吗？

TL; DR:什么时候使用requestAnimationFrame？

Paul Irish有一个名为requestAnimationFrame的帖子,用于智能动画.现在保罗是一个聪明人 - 我只是想了解这个想法的应用范围.

他说要做HTML5动画 - 你应该像这样使用requestAnimationFrame垫片:

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

这是可以理解的.我们可以在这样的JSFiddle中应用它,结果非常好.

但如果我撕掉垫片层功能,那么在Chrome 31和Firefox 24中它可以正常工作.

因此,如果我查看RequestAnimationFrame函数的兼容性 - …

我正在绘制一些形状(弧形,线条等)requestAnimationFrame.没有什么太花哨,但我注意到一些偶尔的动画片.我在Chrome开发工具中使用时间轴检查器进行了分析,并且每帧看到大量的空闲时间,其中一些将FPS降至60以下(见截图).是否有已知原因或解决方案？

我的意思是一次调用多个requestAnimationFrame具有相同的功能

function Draw() { /* DoSomething */ }
function AFunc() {
    /* prepare something */
    requestAnimationFrame(Draw);
}
function BFunc() {
    /* prepare something */
    requestAnimationFrame(Draw);
}

window.onload(function(){
   AFunc();
   BFunc();
});

会发生什么？它会复制吗？它会在同一帧中被调用2次吗？或者它会被堆叠并在差异框架上调用？