动画初探

最近要做动画有关的东西，看了两天动画有关的知识，零零散散的先记录下来。

业界动画引擎：

• PhysicsJS: 基于JavaScript、模块化、可扩展、易于使用的物理引擎，github
• animate.css: CSS3动画，github
• Matter.js: 基于canvas，兼容IE9+，github
• collie：基于Canvas，IE9+

FPS：

动画间隔决定了动画的每秒帧数（FPS），一般的，FPS越高，动画就表现得越流畅，FPS偏低，动画就会不流畅、卡顿。JQuery中，动画间隔默认为13ms，也就是说理想状态下，动画的每秒帧数是70（1000/13）多。

但是动画间隔并非越短就越流畅，因为浏览器需要渲染的时间，所以间隔一方面必须足够短，从而使不同的动画都能流畅的进行，别一方面还要足够长，使得浏览器可以完成渲染。没有找到官方的文档，网上的文章大多倾向于13ms。

参考:

• stackoverflow
• jQuery 的动画帧宽为什么是 13ms 呢
• 使用requestAnimationFrame更好的实现javascript动画

requestAnimationFrame:

setInterval 和 setTimeout 的缺陷：

• 无论是setInterval()还是setTimeout()都无法达到精确，这个延迟即你指定的第二个参数仅仅表示何时代码会添加到浏览器的可能被执行的UI线程队列中。如果队列中有其他工作在此之前，那代码将会等到他完成才会执行。简而言之，毫秒级的延迟不是表示何时代码会执行，而是表示何时代码会添加进队列；
• 当相应的浏览器窗口最小化，JavaScript 计时器在背景标签仍然持续运行，消耗CPU和电池。

CSS transitions 和 animations 的优势在于浏览器知道哪些动画将会发生，所以得到正确的间隔来刷新UI。而javascript动画，浏览器不知道动画正在发生，所以催生了requestAnimationFrame，对于延迟做了很大程度的优化。

• 仅绘制用户可见的动画，这意味着在页面不可见时不会绘制动画，节省 CPU 和电池；
• 绘制动画不可能出现多个排队的回调函数，或者阻塞浏览器;
• 由于浏览器准备好时（空闲时）才绘制帧，不会有等待绘制的帧，没有多余的帧绘制，因此动画更平滑，CPU 和电池使用被进一步优化。

注意：在有多个动画时，出现一个可见一个不可见，requestAnimationFrame 会导致动画不同步，所以， 指定一个参数确保所有需要同步的动画状态，不受可见程度的影响（如一组动画从开始以来经过的时间），而不是根据每个动画的前一帧。

兼容各浏览器的 requestAnimationFrame 方法：RAF.js。

总结：

目前的动画库基本通过两种方式：css3 和 canvas，css3难度相对小一些，但降级方案成本比较大，canvas学习成本会高一些，具体的降级方案还有待研究。

在做之前，需要先确认好具体要支持哪些需求，别人怎么使用，然后再选择一个最优的方案。