用requestAnimationFrame实现一些稳定的帧率
Achieve somewhat stable framerate with requestAnimationFrame?
我正在玩的requestAnimationFrame
,但我得到非常不稳定的动画在任何其他浏览器比Chrome。
我创建一个像这样的对象:
var object = function() {
var lastrender = (new Date()).getTime();
var delta = 0;
return {
update: function() {
//do updates using delta value in calculations.
},
loop: function() {
var looptimestamp = (new Date()).getTime();
delta = looptimestamp - lastrender;
lastrender = looptimestamp;
this.update();
window.requestAnimationFrame(this.loop.bind(this));
}
};
}
现在我只是在画布元素上画一个矩形并移动它。它在处理器上是一个非常轻量级的操作。这在Chrome中运行得非常顺利,当我控制台记录delta值时,它几乎一致在~17左右。但是,如果我在Firefox或Safari中执行相同的操作,我将得到以下增量值:
17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on
看起来好像浏览器没有很好地与显示同步,在Chrome以外的所有情况下,使用旧的setTimeout方法将16毫秒作为目标超时,可以获得更流畅的动画。
有没有人知道,如果有可能得到更流畅的动画使用requestAnimationFrame
在浏览器以外的Chrome?有没有人成功地获得了比上面在Firefox中发布的更稳定的增量值?
你的动画平滑帧率下降的原因是因为你的浏览器的内存与画布有关。我不知道浏览器中性能的真实细节,但firefox几乎立即出现帧率下降,而在chrome中,下降会在一段时间后发生。
真正的问题是由于canvas元素占用了内存。每次在画布上绘制内容时,该操作都会保存到画布的路径中。每次在画布上绘制内容时,此路径都会占用更多内存。如果你不清空画布的路径,你就会有帧率下降。画布路径不能通过context.clearRect(x, y, w, h);
清除画布来清空,相反,你必须通过context.beginPath();
开始一个新的路径来重置画布路径。例如:
// function that draws you content or animation
function draw(){
// start a new path/empty canvas path
canvas.beginPath();
// actual drawing of content or animation here
}
当delta <阈值,例如:>
if (delta > 5) this.update();
相关文章:
- 关键帧之间的css3动画延迟
- 画布:逐像素绘制图像并请求动画帧计时
- 访问css3动画的关键帧
- 正在从帧创建时间代码
- D3/Raphael js 以慢帧率绘制 1000+ 动画圆圈
- BlackBerry PlayBook网络作品:低帧率
- 尝试使用getUserMedia帧率约束
- 画布游戏帧率下降
- 用requestAnimationFrame实现一些稳定的帧率
- HTML5 Canvas和JS帧率慢慢下降到0
- 低帧率的JS和CSS动画
- 如何使用javascript获得良好的帧率
- EaselJS性能问题/帧率下降
- Javascript水涟漪效应减慢帧率
- 如何改变精灵帧率
- 动态调整paperjs动画的帧率
- 低帧率嵌套转换元素
- 使用JS和DOM设置多个DIV元素的动画会导致低帧率
- javascript游戏中的异步/可变帧率
- 函数计算函数帧率