浏览器动画与requestAnimationFrame

作为一枚前端呢，需要经常处理动画的问题，当然CSS动画在大多数场景下都是经济高效的选择,但也有着许多CSS动画无法满足的场景，如canvas下的动画效果，就无法使用CSS来实现。

这些场景下，我们不得不使用js来实现动画效果，但是js实现动画会有些什么问题呢？

大概的问题有以下几点：
1.掉帧
2.重复执行
3.并发动画

掉帧

掉帧就是指某些动画过程并没有展示到显示器上，这与显示器的刷新率有关，当js动画执行的频率与显示其刷新频率存在交错时，就很容易出现掉帧现象，此时我们需要的时一个接口，能够在显示器刷新的恰当时机执行我们的动画，这就是requestAnimationFrame

requestAnimationFrame

这是浏览器提供的接口，接受一个函数作为参数，该参数会在调用接口后的下一次显示器刷新之前被执行。

重复执行

当我们的动画效果较为复杂、或者包含了某些网络请求过程的时候，我们无法确定动画逻辑将会在什么时候执行，这时无论是以自定时间间隔还是以显示器刷新时间间隔执行动画时都有可能造成事件的重叠，即多个事件被交错执行，不仅浪费资源，还会造成动画混乱。这是我们应该使用标记的方式在执行动画重复逻辑时确保上一个动画过程已经被结束

并发动画

我们常常想要使得多个元素的不同的动画逻辑同时执行，但是js针对同一个页面是单线程的，也就是一颗dom树只能循序一个js线程来进行操作，因此真正的并发动画在现有技术条件下无法实现，我们应该尽量将动画逻辑放在一起执行，而不是执行多个setTimeout或者多个requestAnimationFrame