【初识HTML5】(5) : 动画

动画无非的就是触发动画、循环动画、控制时间。 我们可能最先想到的是：

setInterval()

setTimeout()

诚然，以上两个命令确实可以起到触发动画、循环动画、控制时间的作用，但是不准确。因为浏览器比你更清楚什么时候执行动画命令。所以说，与其你告诉浏览器不如让浏览器告诉你TA什么时候已经准备好执行下一个命令了。

从根本上来说，以上两条命令的问题在于他们不知道什么时候该做什么事情。我们想要的其实就是一个浏览器的执行动画的API，我们需要执行动画的时候，调用它就可以了，对吧？那OK啊，我们现在已经拿到了这个API：

function animate(time) {
// 更新动画状态
requestAnimationFrame(animate); // 继续动画
}
...
requestAnimationFrame(animate); // 开始动画

requestAnimationFrame()

但是相信大家也看到网上的一些大牛的文章了。这个requestAnimationFrame()代码不是十分的完美。因为大牛们给出了一个解决方案。具体可以到Sam的个人网站下载。

http://www.letsgosam.com/2015-02-25/128/chushihtml55donghua.html

OK，最后我们来看一下帧速率，做动画这个我们还是要了解下。

FPS是图像领域中的定义，是指画面每秒传输帧数，通俗来讲就是指动画或视频的画面数。

我们来看一段计算平均帧速率的代码：

function calculateFps() {
var now = (+new Date),
fps = 1000 / (now - lastTime);
lastTime = now;
return fps; }

我们来看计算的原理：每次执行动画的时候我们就会调用这个代码。那么now - lastTime 很明显就是计算单次执行的时间，或者说我们单次动画的执行时间，那么1秒钟之内到底可以执行多少动画呢？所以我们就用1000毫秒去除以1次动画执行的毫秒数，也就得出了1秒钟可以执行多少次动画了，对吧？这个只是比较简单的计算，复杂一点的大家可以自己去网上搜索一下