对于HTML5游戏,使用移动设备的画布动画。
我面临一些性能问题,这些问题会影响每台设备与其他设备之间的速度。
requestAnimationFrame 根据设备速度加快游戏动画 setInterval 让我感到震惊的是,从设备到另一个设备有延迟 setTimeout 在画布上的绘图速度也很慢。
谁曾经有过移动HTML5游戏的经验可以指导我在其他三个游戏(或其他技术,如果有的话)中使用最佳方式在不同的移动设备上稳定地开发动画?
答案 0 :(得分:19)
尽可能使用requestAnimationFrame
,因为这就是它的意思。最好use a shim for support当它不是时,所以你不需要处理具体的细节。
为了使动画或游戏逻辑尽管使用实际方法以相同的速度执行,您应该使用基于时间的动画和基于时间的物理计算等。
答案 1 :(得分:13)
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);
})();
对所有情况使用此功能
答案 2 :(得分:0)
优化 由于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);
}