在我的应用程序中,我有一个CSS大小(CSS,而不是html)更新的画布,具体取决于窗口大小.
我有一个主要的gameplayLoop,看起来像这样:
run = function(){
console.log(timerDiff(frameTime));
game.inputManage();
game.logics();
game.graphics.animate();
game.graphics.render();
frameTime = timerInit();
requestAnimFrame(run);
}
我的requestAnimFrame函数来自Paul Irish:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
所以基本上问题是我记录的定时器测量requestAnimFrame调用和有效函数调用之间的时间完全改变.如果我的浏览器是全屏的,我会得到50/60毫秒,如果我有一个小窗口,我可以达到10毫秒.
由于requestAnimFrame调用应该在60fps节奏下持续调用函数(我认为这类似于30 ms)我不应该有这种结果,因为在计时器的创建和检查之间基本上没有发生任何事情,除了requestAnimFrame
我也有一些反复的微冻结(不到一秒钟),每2/3秒发生一次.但是计时器没有检测到任何时间的变化(就像javascript的时间计数器被阻止一样)
我的定时器功能是这样的,但这并不重要
timerInit = function()
{
return new Date();
}
timerDiff = function(datePrev)
{
return new Date().getTime() - datePrev.getTime();
}
我有一个 jsFiddle，我一直在摆弄它，试图让我的小游戏变得更加有类等组织，但是当我请求动画帧时，传递对象（每个帧对每个对象执行一些功能） ），我收到最大调用堆栈大小错误。我怎样才能解决这个问题而不放弃我的课程？
jsFiddle： http://jsfiddle.net/Blawkbuilder/Q5U3X/109/
我怀疑是罪魁祸首的那一行：
window.requestAnimationFrame(draw(p1,p2));
但控制台链接到的行出现在 jquery 中的某处：
} else if ( !rhtml.test( elem ) ) {
使固定？我对 javascript 有点陌生。
（如果需要，这里是以前的，不是基于类的版本，仍然可以按我想要的方式运行） http://jsfiddle.net/Blawkbuilder/9hmca/131/
如果我有以下代码：
window.requestAnimationFrame(animation1); //animation1 takes more than 16.67ms, misses the frame.
window.requestAnimationFrame(animation2); //animation2 takes 1ms to execute
假设animation1和animation2是简单的颜色变化动画，这是否意味着animation2之前会出现在屏幕上animation1？
或者调用是否requestAnimationFrame堆积在浏览器队列中，只有在前一个调用完成后才会执行后续调用？
我同时调用许多 requestAnimationFrame。我如何取消所有 requestAnimationFrames 以便不再运行？
有人可以解释一下这个函数的作用吗？我了解如何requestAnimationFrame在框架内绘制和渲染之前执行，但我不太确定将其放入承诺中有何用处。
function nextFrame() {
return new Promise(requestAnimationFrame)
}
以下是导致错误(FF,Chrome和？):
Engine.prototype.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
完整的背景是:
var Engine = function(model) {
this.model = model;
};
Engine.prototype.start = function() {
console.log("ready")
this.requestAnimationFrame(function() {
console.log("done");
});
};
Engine.prototype.updateUi = function() {
console.log("update ui");
this.requestAnimationFrame(this.updateUi);
};
Engine.prototype.logRAF = function() {
console.log(window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame);
return this;
};
Engine.prototype.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame …代码
var x = {};
x.request = window.requestAnimationFrame;
function step(timestamp) {
console.log('sth');
}
x.request(step);
它返回:
NS_ERROR_XPC_BAD_OP_ON_WN_PROTO:WrappedNative原型对象上的非法操作
它应该使x.request与window.requestAnimationFrame一样工作.我需要它,因为我想做类似的东西:
x.request = window.requestAnimationFrame
||
window.webkitRequestAnimationFrame
||
window.mozRequestAnimationFrame;
我正在尝试使用requestAnimationFrame创建具有滚动编号的javascript动画
In order to see the see the animation rolling, I need to use a $apply to refresh the view. The problem here is when I start the animation, the digest cycle is already running so my $apply return an error "$apply already in progress".
Looking for a solution I use $timeout of 0 which work perfectly but I was wondering if there was other solution to avoid using a timeout that is not really good in terms of performance? …
这个答案不容易找到.我在HTML5中搜索了RequestAnimationFrame上的许多权威文档,似乎从未指定它在GPU中运行.有时会推断出GPU,但引用似乎是必然的.
所以我认为RequestAnimationFrame是CPU,只是从未明确说明.
有没有人在CPU或GPU上找到明确的分类？
我想如果它是GPU,它将无处不在.谢谢.