我是动画新手,但我最近使用 setTimeout
创建了一个动画。 FPS 太低,所以我找到了使用 requestAnimationFrame
的解决方案,在 link 中有描述.
到目前为止,我的代码是:
//shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop(){
//Get metrics
var leftCurveEndX = finalLeft - initialLeft;
var leftCurveEndY = finalTop + finalHeight - initialTop;
var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
var rightCurveEndY = leftCurveEndY;
chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame
requestAnimFrame(animloop);
})();
这在第一帧停止。我在 chopElement
函数中有一个回调函数 requestAnimFrame(animloop);
。
此外,是否有更全面的使用此 API 的指南?
最佳答案
警告!这个问题不是关于 shim 的最佳方式 requestAnimFrame
。如果您正在寻找它,请转到此页面上的任何其他答案。
您被自动分号插入欺骗了。试试这个:
window.requestAnimFrame = function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
}
);
}();
javascript 会自动在您的return
语句后面放置一个分号。它这样做是因为它后面跟着一个换行符,而下一行是一个有效的表达式。事实上它被翻译成:
return;
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback){
window.setTimeout(callback, 1000 / 60);
};
此代码返回 undefined
并且从不执行 return 语句后面的代码。所以 window.requestAnimFrame
是 undefined
。当您在 animloop
中调用它时,javascript 会产生错误并停止执行。您可以通过将表达式括在括号中来解决问题。
我可以推荐 Chrome 开发人员工具或 firebug 来检查 javascript 执行情况。使用这些工具,您会发现错误。你应该按如下方式调试它(我假设是 Chrome):
- 执行代码(它会产生意想不到的结果)
- 打开开发人员工具(右键单击 -> 检查元素) 你会在右边的状态栏看到一个红色的x(这意味着执行有错误)
- 打开控制台标签
- 你会看到
Uncaught TypeError: Property 'requestAnimFrame' of object [object DOMWindow] is not a function
- 在控制台中输入:
window.requestAnimFrame
然后按回车,你会看到它是undefined
。现在您知道问题实际上与requestAnimationFrame
无关,您应该专注于代码的第一部分。 - 现在的问题是将代码缩小到返回某些东西的程度。这是困难的部分,如果此时您仍然找不到它,您可能需要转向互联网寻求更多帮助。
另外,观看 this video对于编写 javascript 的一些良好实践,他还提到了邪恶的自动分号插入。
关于javascript - 如何使用requestAnimationFrame?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5605588/