window.requestAnimFrame澄清 [英] window.requestAnimFrame Clarification

问题描述

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

I had two questions about window.requestAnimFrame in Javascript/HTML5

1. window.requestAnimFrame和window .requestAnimationFrame？

1. Is there a difference between window.requestAnimFrame and window.requestAnimationFrame?

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

Is window.requestAnimFrame/AnimationFrame similar to the document.onload = or img.onload = functions

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

Sorry I may be a bit unclear but if you understand would you be able to explain? Thanks :D

推荐答案

1. 您应该完全忘记window.requestAnimFrame。
   
   并不是所有的浏览器都实现它本身，而是作为一个实验功能：在这种情况下，他们在方法的名称前面添加一个前缀：mozRequestAnimationFrame的FF，webkitRequestAnimationFrame的Chrome / Safari ，等等。
   
   polyfill是一种方法，将标准化这些命名，以便能够简单地访问rAF，而不希望浏览器认为它是实验性的。
   
   这可能似乎失去时间，但到目前为止，所有rAF版本的行为不一样：Chrome的rAF将回调函数与亚毫秒（微秒精度）时间戳，当firefox将使用毫秒时间戳，例如。

我在我的画布中使用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是关于文档准备好。

2) onload and rAF are very different : as i stated in the comments, rAF will wait for the next vertical synchronisation (VSYNC) of the screen to execute the (draw) code. So basically, rAF is about the screen being ready when onload is about the document being ready.

这篇关于window.requestAnimFrame澄清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！