关于动画播放的一些记录(setInterval和requestAnimationFrame)

FPS （每秒传输帧数(Frames Per Second)）

FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。

  理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。

  对于不同帧频的用户体验大致如下：

• 能够达到 50～60 FPS 的动画将会相当流畅，让人倍感舒适；
• 在 30～50 FPS之间的动画，因各人敏感程度不同，舒适度因人而异；
• 在 3 FPS 以下的动画，让人感觉到明显的卡顿和不适感；
• 波动很大的动画，亦会使人感觉到卡顿。

动画播放与FPS的关系

1. setInterval

按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数（当页面被隐藏或者最小化时，setInterval()仍在后台继续执行，这种动画刷新是完全没有意义的，对cpu也是极大的浪费），直到 clearInterval() 被调用或窗口被关闭。

setinterval的执行时间不确定，参数中的时间间隔是将代码添加到异步队列中等待的时间。只有当主线程中的任务以及队列前面的任务是执行完毕，才真正开始执行动画代码。所以很多场景下并不能按照期望的时间间隔、或期望时间内执行完。

setinterval的最小时间间隔也因设备不同有所区别，如chrome正常在10ms左右，也就是说，如果设置动画时间间隔小于10ms，该动画任务也只能在异步队列中排着队，也就是所谓的动画任务堆积

取消动画：clearInterval

2. requestAnimationFrame

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。不需要设置时间间隔，是由系统的时间间隔定义的。大多数浏览器的刷新频率是60Hz(每秒钟反复绘制60次)，循环间隔是1000/60，约等于16.7ms。不需要调用者指定帧速率，浏览器会自行决定最佳的帧效率。只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

取消动画：cancelAnimationFrame

参考文章：
https://www.cnblogs.com/linybo/p/13214959.html
https://www.cnblogs.com/kenkofox/p/3849067.html