上一节结尾说到,当小球数量增加到成千上万时,明显感觉到小球跑的慢了,这节我们来了解下为什么会这样。
帧速率
动画是由一系列叫做“帧”的图像组成的,这些图像的显示频率就叫做“帧速率”。
现在我们来基于上一回的代码做修改,添加显示帧速率的代码,在addBallBtn添加事件监听的代码后面添加显示帧速率的代码如下:
/**
* 画出帧速率
* @param dt
*/
function drawFps(dt) {
var fps = 1000 / dt;
ctx.font = '30px 宋体';
ctx.fillStyle = 'red';
ctx.fillText('FPS:' + fps.toFixed(0), 20, cvs.height - 40);
// 额外添加显示当前有多少个小球的代码
ctx.fillText('小球个数:' + balls.length, 20, cvs.height - 30);
}
再将animate函数修改为如下
function animate(time) {
if (lasttime === undefined) {
lasttime = time;
} else {
var dt = time - lasttime;
lasttime = time;
// 省略其它代码...
drawFps(dt);
}
requestAnimationFrame(animate);
}
运行代码,看看效果:
提示: 为了更快出结果,我将按钮的事件更改为了一次性添加10000个小球,如果一次只添加100的话,麒麟臂都受不了~
我们重点关注下图片中的fps的值。当只有10个小球时,fps是满速60帧,而到了上万个小球时,fps只有可怜的12帧了。
不知道是否记得小球的速度是怎么定义:
vx: 10, // 小球x轴速度 px/帧
vy: 10 // 小球y轴速度 px/帧
我们定义的速度是10像素/每帧,当动画是满帧60帧时,那小球每秒移动的距离是:10 * 60 * 1 = 600像素,而上万小球时,小球每秒移动的距离只有:10 * 12 * 1 = 120像素,只有满帧的速度1/5了,我们肯定会感觉小球速度变慢了。
明显,这种动画效果是我们所不需要,不管是多少帧,我们所期望的是,单位时间内,小球运动的距离是一致的。所以下一节我们来了解下基于时间的动画。