JavaScript动画知多少？

　　今天，小学生以本身浅薄的见地，在前辈大能的基础上写这篇文章，但愿给你们打开一扇窥探JavaScript（如下简称JS）动画的窗户。

JS如何制造出动画效果？

　　结合浏览器提供的 setInterval 或 setTimeout API，高频改变DOM元素的一些属性，便可创造一个肉眼可见的动画效果。一个看起来很是流畅的JS动画除了须要良好的变换算法外，与其执行宿主也是非不开的。程序写得再好，若是浏览器过于老旧，电脑CPU性能低下，也会出现卡顿，甚至卡死。

　　执行一个动画函数对于浏览器来讲是个苦差，设置动画一帧为多长时间才能既流畅又不损耗性能呢？浏览器不会傻到进行一个DOM操做，就去渲染一次页面。它会把一个周期内全部的DOM操做整合起来，统一进行一次渲染。这个周期大约在16.7ms左右，不一样浏览器间会有几毫秒的差别。SetTimeout的第二个参数设置为1000/60是比较合乎情理的作法。不过了解过SetTimeout运行机制的都会清楚，这个时间并不可靠，其根据实际状况会有些许甚至至关大的延迟。那么有没有这样一个API？我不想知道你浏览器到底多久渲染一次，反正你渲染的时候给个人动画执行一帧就好了。答案是有，requestAnimationFrame，可让函数随着浏览器渲染执行，而且执行时机是可靠的。注意，这个方法在如今浏览器及IE10+才被支持。

　　如今能够封装起一个简单的requestAnimationFrame，下面的例子中将会使用到它。

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

　　更加详细的封装能够在张鑫旭的博客中看到：张鑫旭：requestAnimFrame。下面让咱们继续。

动画函数的编写

　　有了requestAnimationFrame，下面该考虑一下如何让写动画函数了。通常来讲咱们会给出一个毫秒级的during值，限制这个动画必需要在这个时间内完成。下面以实现一个小球从离页面左侧100px处匀速运动到800px处为例，编写一个动画函数：戳我查看DEMO。

            var ele = document.getElementById("block");
            var start = Date.now();//获取动画开始的时间。
            var during = 1000; //此动画要在1秒内执行完。
            var p=0;//动画完成度　从0-1；
            requestAnimationFrame(function f(){
                if(p>=1){ ele.style.left="800px";}//若是发现动画已经执行完，将元素置到终点。
                else{
                    p=(Date.now()-start)/during;
                    ele.style.left=100+700*p+"px"; //从100px开始，匀速向右移动，共移动700px;
                    requestAnimationFrame(f);
                }
            })

　　上面函数中有一个关键变量：p，即percentage，咱们能够称它为动画的完成度，它是根据当前时间计算得出的，而且从动画开始后，会从0~1匀速渐变。当其为1时，表示整个动画执行完毕。在这个函数中，让p乘以要运动的长度700，便会获得一个0-700匀速变化的值，将其加上开始的100，即可模拟小球从100px处匀速移动到800px处。

　　设想一下，假如上面红色标出的运动方程改成“ele.style.left=100+700*p*p+"px"”呢？p以二次方渐增，小球向右移动的速度会愈来愈快。是的，稍加修改即可实现一个匀加速运动的小球。

　　下面，咱们就是要针对p来作文章。

Tween算法及缓动效果

 　　下面我将列举一些经常使用的缓动算法，根据这些算法去修改上面匀速运动函数的运动方程，便可实现很赞的动画效果。

1. 2次方缓动：　　p*p
2. 3次方缓动：　　p*p*p
3. 4次方缓动：　　p*p*p*p
4. 5次方缓动：　　p*p*p*p*p
5. 正弦曲线缓动：  Math.sin(p*Math.PI/2)
6. 指数曲线缓动：  Math.pow(2,10*(p-1))
7. 圆形曲线缓动：  Math.sqrt(1-(p-1)*(p-1))
8. 超范围三次方：  p*p*(2.70158*p-1.70158)

　　验证一下吧，好比我如今想实现一个小球向右运动，有一个向左蓄力的动画，我只要把第一个demo的运动方程改成“ele.style.left=100+700*p*p*(2.70158*p-1.70158)+"px"”就好了，看看效果吧：戳我查看DEMO。

　　其实，每种缓动算法均可以进化为三种缓动方式，分别为ease-in（先慢后快），ease-out（先快后慢），ease-in-out（先慢后快再慢）。

　　以2次方缓动为例，它自己就是一个匀加速的过程，因此ease-in就是p*p。其ease-out为-(p*(p-2))。关于缓动方式，像阳光同样在他的博客中有更加详细的解释：JavaScript动画、运动算法详细解释与分析。

　　接下来要放大招了，关于缓动的整合DEMO，戳我吧。

JS动画能够作什么?

　　除了上面的缓动效果，利用常见的数学公式还能够实现一些周期性运动效果，例如小球匀速圆周运动，小球匀速简谐振动等，若是感兴趣请猛戳DEMO。

　　那么JS动画能够作什么呢？这就须要发挥咱们的我的想象力了，上面的DEMO大部分都在操控单一的属性，好比left，让DOM元素发生位移。事实上在运动方程中，元素的任何style均可以被渐变。试想一下，设置一个DOM元素的opacity从0~1进行2次方缓动，即是一个简单的jQuery fadeOut函数；让一个DOM元素高度从无到有，即是一个简单的jQuery slideDown函数。更加不要忘记的是，在动画过程当中不只仅能够操做一项属性，这为动画带来了无限的可能性，事情变得愈来愈有趣了：DEMO：一个从小到大变化的球。

　　再试想一下，使用CSS3属性，例如box-shadow，transform，做出的效果必将会更加绚丽。

总结

　　上面提到使用CSS3属性，其实若是这个浏览器支持CSS3属性的话，其实能够考虑彻底使用CSS3实现一个动画。CSS3自有Animation动画属性，能够简单快捷地实现酷炫的动画效果，而且能够启用GPU加速。美中不足的是仅现代浏览器支持，而JS实现动画胜在能够兼容低版本浏览器。

　　（做者于2015年6月19号增长）上面将JavaScript动画与CSS3动画的比较并非特别严谨，更严谨的说法请移步个人博客：实现了一个百度首页的彩蛋——CSS3Animation简介。

　　动画仅仅是JS操做DOM魅力之冰山一角，而数学与计算机老是能碰撞出耀眼的火花。继续学习JS吧，这是一门神奇的语言，同时也应该了解一些数学知识，每每可以为解决事情带来捷径。

　　（完）