Javascript动画（四）：帧速率

上一节结尾说到，当小球数量增加到成千上万时，明显感觉到小球跑的慢了，这节我们来了解下为什么会这样。

帧速率

动画是由一系列叫做“帧”的图像组成的，这些图像的显示频率就叫做“帧速率”。
现在我们来基于上一回的代码做修改，添加显示帧速率的代码，在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了，我们肯定会感觉小球速度变慢了。

明显，这种动画效果是我们所不需要，不管是多少帧，我们所期望的是，单位时间内，小球运动的距离是一致的。所以下一节我们来了解下基于时间的动画。