所以我一直是一个很好的网民,使用功能检测来查看浏览器是否支持requestAnimationFrame,否则只回退到基于setTimeout的解决方案(约为
Paul Irish’s famous post行).
var NOW = Date.now || function () { return new Date.getTime(); };
var reqAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
/* ... || */
function (callback) {
setTimeout(function () { callback(NOW()); },1000 / 60);
};
var prevIoUsTime = NOW();
function animStep(time) {
var timePassed = time - prevIoUsTime;
myCharacter.move(myCharacter.speed * timePassed);
prevIoUsTime = time;
reqAnimationFrame(animStep);
}
// start the animation
reqAnimationFrame(animStep);
在Internet Explorer 10出现之前,这种方法无处不在.在IE10中,传递的时间参数似乎与当前时间无关,搞砸了timePassed的计算.
这是怎么回事？
解决方法
所有(据我所知)其他实现requestAnimationFrame的浏览器都遵循(在撰写本文时)当前
Working Draft的规范：
Let time be [the redraw time] expressed as the number of milliseconds since 1970-01-01T00:00:00Z.
这就像你的NOW()那样代表时间.
IE10然而goes由当前Editor’s Draft的规格：
Let time be the result of invoking the 07003 within this context.
这实质上意味着自浏览器加载此页面以来的毫秒数(这也意味着测量更精确,因为performance.now返回小数毫秒).
因此,当你在IE10中第一次计算timePassed时,你会得到负面的43年.
幸运的是,因为传递给requestAnimationFrame回调的值在任何一种情况下具有相同的单位,只是一个不同的参考点,你可以很容易地调整到这一点.
有三种可能性：
>你可以扔掉第一个动画步骤,仅使用它来设置prevIoUsTime,但不做其他任何事情.
>您可以忽略传递的参数并每次使用您的NOW()(或performance.now),因此始终具有相同的参考点.
>或者您可以将动画的开头更改为：
// start the animation
reqAnimationFrame(function (t) {
prevIoUsTime = t - (NOW() - prevIoUsTime);
animStep(t);
);
这将使得无论浏览器遵循哪个规范,timePassed的计算(包括第一个)都是正确的.并且因为它只改变了第一次调用,所以从长远来看,你也没有任何额外的开销.
