我对广泛使用的requestAnimationFrame()
函数有一些疑问。最近我在多人游戏中遇到了一些在客户端而不是服务器端使用它的实现。
我在动画和游戏循环之间有点混淆 - 我正在寻找的是NodeJS中的实现=>例如setInterval
。
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
}
}());
答案 0 :(得分:8)
这样做有什么好处吗?
在客户端 - 有。当setTimeout
及其朋友在计时器队列中运行时,requestAnimationFrame
会同步到浏览器的页面渲染(绘制它),因此当您使用它时,没有抖动,因为您告诉它要绘制的内容和浏览器绘图是同步的。
通常游戏有两个循环 - 渲染循环(绘制内容)和游戏循环(事物的逻辑)。第一个位于requestAnimationFrame
,另一个位于setTimeout
- 两者都必须非常快。
以下是Paul Irish的a reference on requestAnimationFrame。
您能引用我参考NodeJS中的任何“最佳实践”服务器端实现吗?
由于服务器不呈现任何图像 - 在服务器中填充requestAnimationFrame
没有意义。您可以在Node / io.js中使用setImmediate
来表示您在客户端中使用requestAnimationFrame
的内容。
简单地说 - 添加了requestAnimationFrame来解决服务器中不存在的问题(图形数据的无抖动渲染)。
答案 1 :(得分:0)
function requestAnimationFrame(f){
setImmediate(()=>f(Date.now()))
}
答案 2 :(得分:-1)
if(!window.requestAnimationFrame)
window.requestAnimationFrame = window.setImmediate