Javascript动画（五）：基于时间的动画

将上一节更改为基于时间的动画并不复杂，我们只要将Ball类的update方法作一定的更改就可以了。

先将Ball类中，小球的默认速度更改600px/s

vx: 600,            // 小球x轴速度  px/s
vy: 600             // 小球y轴速度  px/s

再更改update方法：

that.x += that.vx * dt / 1000;                // 速度乘以时间就是一帧运动的距离啦
that.y += that.vy * dt / 1000;

基于时间的动画，就这么多了，哈哈，很简单~

多说点别的：
当帧速率降至一定程度时，我们会感觉小球是从一位置跳至另一个位置的（闪现0.0），而不是连续顺滑的动画啦，这种情况是“丢帧”导致的，而这种情况（实际是就是卡顿了）无论是不是基于时间的动画都存在的。
浏览器最高帧速是60帧/秒，那么1帧的时间大约是16.7毫秒，所以如果我们要使用动画60帧播放，那么我们就得使动画每一次循环(animate函数及浏览器渲染时间)的时间在16.7毫秒内完成，而浏览器渲染时间我们并不能直接控制，所以要播放流畅动画，就得优化animate函数啦、

当然我们这个动画就必要优化了，也优化不了啥 ?

动画的优化超纲了 0.0

下一节我们了解下动画计时器~