JavaScript动画-1

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

今天想学习一下JavaScript动画相关的知识点，现代Web程序必备的功能里包括图形和动画，但是实现起来还有困难，视觉上复杂的功能需要性能调优还有硬件加速，不过目前已经有逐渐完善的API和工具用来开发这样的功能了。

早期定时动画

以前在JavaScript中创建动画基本上就是使用setInterval()来控制动画的执行，比如：

（function() {
    function updateAnimations() {
        doAnimation1();
        doAnimation2();
        //其它任务
    }
    setInterval(updateAnimations,100);
})();

作为一个小型动画库的标配，这个方法会周期性运行注册的动画任务，并反映出每个任务的变化，如果没有动画需要更新，则这个方法可以什么也不做。
这种定时动画的问题在于无法准确知晓循环之间的延时，定时间隔必须足够短，这样才能让不同的动画类型都能平滑顺畅，但是又要足够长，以便产生浏览器可以渲染出来的变化，一般计算机显示器的屏幕刷新率都是60Hz,基本上意味着每秒需要重绘60次，大多数浏览器还会限制重绘频率让它不超出屏幕的刷新率。因此实现平滑动画最佳的重绘间隔为1000毫秒/60,以这个速度重绘可以实现最平滑的动画，如果同时运行多个动画，可能需要加以限流，以免17毫秒的重绘间隔过快，导致动画过早运行完。
虽然使用setInterval()的定时动画比使用多个setTimeout()实现循环效率更高，但是也还有问题。这两个方法都不能保证时间精度，作为第二个参数的延时只能保证什么时候会把代码加入浏览器的任务队列，不能保证添加到队列就会立即运行，如果队伍前面还有其它任务，那么就要等这些任务执行完再执行。
因此呢，知道何时绘制下一帧是创造平滑动画的关键，明天继续分解~