pomelovico
commented
6 years ago 帧速率（fps）计算
动画的帧速率就是动画每秒钟播放的帧的次数，在window.requestAnimationFrame()注册的回调函数里，将上次绘制动画的时间从当前时间中减去得到时间差，就是两次帧之间的时间差，取倒数就是帧速率了。
let lastTime = 0;
function fps(){
var now = (+new Date()),
f = 1000 / (now - lastTime);
lastTime = now;
return f;
}之所以会有帧速率这个概念，是因为在一个复杂的动画中，可以能有些动画不需要太高频次的速度运行，所以在复杂动画 中，可以把不懂的任务安排在不同的帧速率上执行。大致过程就是用不同的变量记录上次动画执行的时刻，然后与当前时刻做差值，把不同的任务放到不同的差值范围内进行绘制，这样可以避免一次动画中绘制太多内容影响性能。
在这里个人有个问题，如果把不同的绘制任务放到不同的帧速率中，按上诉方式来看，那么针对慢速率的动画内容，就不会在每次的requestAnimationFrame()注册函数中执行，然而由于canvas的特点以及动画要求，每次绘制都会清除原来画板中的内容，那么在这次绘制中，没有绘制出来的内容岂不就是被擦除掉变成空白。所以我理解的慢速率绘制应该是要保证在人眼能够接受动画的正常帧速率以上，大概就是24帧以上，才能给人一种连续性的感觉（视觉暂留效应）
动画循环
动画是一种持续的循环，由于浏览器是单线程的，所以不能通过一个
while(true){}的形式来达到持续执行动画代码的目的，否则将会使页面失去响应，取而代之的是让浏览器有一个休息的时间，每个一小段时间来执行一次动画实现循环的方式大致有两类：
setTimeout && setInterval: 这两种浏览器提供的定时器函数都不是特别精准，这依赖于当前的事件队列，此外，重要的是，使用定时器函数来让浏览器定时执行动画，是一种命令式的操作，它要求浏览器这么做,所以绘制动画的开发人员必须知道绘制下一帧动画精准时机，也就是间隔时间，而这个间隔时间往往会因浏览器的不同而略有差别。
window.requesAnimationFrame()方法是W3C标准中的全局方法，通过该方法可以向浏览器注册动画绘制函数，浏览器在绘制下一帧（浏览器在实时的绘制页面，就算你对页面没有任何操作，他也在不停的刷新和绘制当前页面）的时候会自动调用注册的函数，从而达到绘制动画的效果，该方法的优点在于，是浏览器主动通知用户绘制，绘制的时机交给了更有经验的浏览器，用户更加专注于绘制函数本身requestAnimationFrame()
所以在现代浏览器的动画绘制中，都应当使用
requestAnimationFrame()这个API，与之对应的是cancleRequestAnimationFrame(handle)方法，其中handle参数是一个句柄，由requestAnimationFrame返回，可用于取消回调函数的执行.动画函数调用规则：
参数
requestAnimationFrame(callback,optional Element)中，callback回调函数的参数是一个time，表示此次动画执行的时间，由于有些浏览器的bug，time可能为undefined，所以需要手动更正。第二个参数是一个可选的HTML元素引用，表示，当该HTML元素不可见时，该方法也就不会再调用传入的动画回调函数了。