window.requestAnimFrame澄清

Question

我在Javascript/HTML5中有两个关于window.requestAnimFrame的问题

1. window.requestAnimFrame和window.requestAnimationFrame之间有区别吗？

2. window.requestAnimFrame/AnimationFrame类似于document.onload =或img.onload = functions

对不起,我可能有点不清楚,但如果你明白,你能解释一下吗？感谢:D

Answer 1

window.requestAnimFrame和window.requestAnimationFrame之间有区别吗？

是的,requestAnimFrame是添加到窗口对象的自定义非官方属性,同时requestAnimationFrame也是W3C在"基于脚本的动画的时序控制"的WindowAnimation部分中提供的HTML5画布的官方标准的一部分.

但是,他们做同样的事情.保罗爱尔兰要么有一个懒惰的时刻(在这种情况下他应该称之为rAFIMO :-)) - 或者 - 他不想冒着在他写作时浏览器内部保护方法的风险( Opera的ErikMöller编写了他自己的使用全名的polyfill版本.

一个polyfill,或垫片,或shiv,或猴子补丁,或鸭子打孔,或摇动袋(!谁提出这些名称？)只是尝试,在这种情况下,无论如何,统一各种浏览器的功能.

例如,当requestAnimationFrame以实验状态实现时,该方法在各种浏览器中加上前缀,即.mozRequestAnimationFrame适用于Firefox/Aurora,webkitRequestAnimationFrame适用于Chrome和Safari等WebKit浏览器,oRequestAnimationFrame适用于Opera等.

因此,每次需要调用方法时,不要对此进行测试,而是将这些方法合并,或者将可用的方法合并到一个公共命名调用中,以及确保将来的非前缀实现也能正常工作.

这意味着您可以使用polyfill所在的名称,而不必担心将来的更改,因为当浏览器中提供官方命名方法时它将起作用.

(在这方面的好消息:Chrome和Firefox现在已经发布了这种方法没有前缀,其他浏览器也可能会效仿).

window.requestAnimFrame/AnimationFrame类似于document.onload =或img.onload = functions？

并不是的.这是一种简单的做法:

document.onload = function;
img.onload = function;

而polyfill相当于:

var myVar = var1 || var2 || var3;

(||= JavaScript中的OR)如果myVar只设置了一个,那么它将成为第一个定义的值(请注意,这是一种非常简单的说法,因为除了这些变量之外还有更多的内容).

所以window.requestAnimFrame(或window.requestAnimationFrame)只是"要求"设置第一个可用的定义方法,其中非前缀优先:

window.requestAnimationFrame = window.requestAnimationFrame;

只会将它自己设置为存在,但如果不存在,我们需要提供其他值:

window.requestAnimationFrame = window.requestAnimationFrame ||
                               Window.mozRequestAnimationFrame ...

所以,如果window.requestAnimationFrame不存在,它将尝试使用moz前缀,依此类推.对于其他前缀选项,此OR'ing的结果将设置为window.mozRequestAnimationFrame可用window.requestAnimationFrame等等.

如果不存在,那么最后的手段,setTimeout将设置后备.这适用于这种情况,因为它们是签名兼容的(将函数作为参数调用).

结果是你可以调用window.requestAnimationFrame(或者在Pauls polyfill的情况下window.requestAnimFrame)它可以在任何浏览器中工作,无论它们是否支持前缀或不支持的方法.

(我现在肯定怀疑保罗,因为我厌倦了一直输入requestAnimationFrame ..: - |)

Answer 2

1. 你应该完全忘记window.requestAnimFrame.只关心window.requestAnimationFrame.
   并非所有浏览器都本机地实现它,而是作为实验性功能:在这种情况下,他们在方法名称前加上一个前缀:FF的mozRequestAnimationFrame,Chrome/Safari的webkitRequestAnimationFrame,等等.
   polyfill是一种方法,可以将这些命名规范化,以便能够轻松访问rAF,而无需考虑浏览器认为它是否具有实验性.
   这可能看起来有点浪费时间,但截至目前,所有rAF版本的行为都不一样:例如,当firefox使用毫秒时间戳时,Chrome的rAF将以亚毫秒(微秒精度)时间戳回调函数.

我在我的画布库中使用的polyfill 是这样的:

// requestAnimationFrame polyfill
(function() {
var  w=window,    foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                               w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                               w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                                        function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;
}());

2)onload和rAF非常不同:正如我在评论中所述,rAF将等待屏幕的下一个垂直同步(VSYNC)来执行(绘制)代码.所以基本上,当onload是关于文档准备好时,rAF是关于屏幕准备好的.