3

我对 Javascript/HTML5 中的 window.requestAnimFrame 有两个问题

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

  2. 是window.requestAnimFrame/AnimationFrame类似document.onload=或img.onload=的功能吗

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

4

2 回答 2

6
  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）来执行（绘制）代码。所以基本上，rAF 是关于屏幕准备就绪，而 onload 是关于文档准备就绪。

于 2013-09-27T20:19:28.143 回答
6

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

是的，requestAnimFrame是添加到窗口对象的自定义非官方属性，同时是 W3C 在其“基于脚本的动画的时间控制”requestAnimationFrame的 WindowAnimation 部分中提供的 HTML5 画布官方标准的一部分。

然而，他们做同样的事情。保罗爱尔兰要么有一个懒惰的时刻（在这种情况下，他应该称它为rAFIMO :-)） - 或者 - 他不想在编写它时遇到该方法在浏览器内部受到保护的风险（ Opera 的 Erik Möller使用全名编写了他自己的 polyfill 版本）。

一个polyfill、或shim 、或 shiv、或猴子补丁、或打鸭子或摇袋（！谁想出了这些名字？？）无论如何，在这种情况下，只是试图统一各种浏览器中的功能。

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

因此，无需在每次需要调用方法时都进行测试，而是使用 polyfill 将这些方法或选择可用的方法合并到单个常见的命名调用中，并确保未来的非前缀实现也能正常工作。

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

（这方面的好消息是：Chrome 和 Firefox 现在已经提供了不带前缀的这种方法，其他浏览器可能会效仿）。

window.requestAnimFrame/AnimationFrame 是否类似于 document.onload = 或 img.onload = 函数？

并不真地。这是一种简写方式：

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

而 polyfill 相当于做：

var myVar = var1 || var2 || var3;

（||JavaScript 中的 = OR） wheremyVar将成为第一个定义的值，前提是只设置了一个值（请注意，这是一种非常简化的说法，因为它不仅仅是这取决于这些变量是什么）。

因此window.requestAnimFrame(or window.requestAnimationFrame) 将简单地“要求”将第一个可用的已定义方法设置为它，其中非前缀优先：

window.requestAnimationFrame = window.requestAnimationFrame;

只会设置它自己存在，但如果它不存在，我们需要提供替代值：

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

所以如果window.requestAnimationFrame不存在，它将尝试使用 moz 前缀等等。如果其他前缀选项window.mozRequestAnimationFrame可用，则此 OR'ing 的结果将设置。window.requestAnimationFrame

如果不存在，那么最后的手段，setTimeout将设置回退。这在这种情况下有效，因为它们是签名兼容的（将函数作为参数调用）。

结果是您可以调用window.requestAnimationFrame（或者在 Pauls polyfill 的情况下window.requestAnimFrame）并且它可以在任何浏览器中工作，无论它们是否支持前缀方法，或者根本不支持。

（我现在肯定怀疑 Paul，因为我厌倦了一直输入 requestAnimationFrame .. :-| ）

于 2013-09-27T18:47:00.753 回答