setTimeout、setInterval或requestAnimationFrame
setTimeout、setInterval或requestAnimationFrame
提问于 2012-12-18 22:39:14
对于HTML5游戏，具有用于移动设备的画布动画。
我正面临着一些性能问题，每个设备的速度都不同于其他设备。
requestAnimationFrame根据设备速度来加速游戏的动画。
setInterval让我大吃一惊，因为从一台设备到另一台设备存在延迟。
setTimeout在画布上的绘制速度也很慢。
谁之前有过移动HTML5游戏的经验，可以指导我使用其中三种(或其他可用的技术)中最好的方法，在canvas上开发动画，在不同的移动设备上稳定？
回答 3
Stack Overflow用户
发布于 2012-12-18 22:49:55
尽可能使用requestAnimationFrame，因为这就是它的意义所在。最好在没有的时候使用use a shim for support，这样你就不需要处理特定的细节了。
为了让动画或游戏逻辑以相同的速度执行，而不考虑实际使用的方法，您应该使用基于时间的动画和基于时间的物理计算或类似的计算。
Stack Overflow用户
发布于 2014-01-29 09:09:50
window.requestAnimFrame = function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ draw1){
window.setTimeout(draw1, 1000 / 60);
}
);
}();
window.requestAnimFrame(draw);
})();在所有情况下使用此函数
Stack Overflow用户
发布于 2019-02-12 16:56:49
优化requestAnimationFrame()，因为它的引入对CPU非常友好，如果当前窗口或选项卡不可见，会导致动画停止。
https://flaviocopes.com/requestanimationframe/
var count = 0;
const IDS = requestAnimationFrame(repeatOften);
function repeatOften() {
count++;
if(count > 4 ){
// cancelAnimationFrame (IDS);
console.warn('finish');
return;
}
console.log('init' + count);
// Do whatever
requestAnimationFrame(repeatOften);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13935262
复制相关文章
相似问题