几种制作页面动画的总结

往昔流行的页面flash动画，已经逐渐被日益强大的CSS，Canvas和Js动画取代，多种多样的动画实现API，可能会给前端开发带来一些选择恐惧症，尤其对于新人，所以这里总结一下几种动画的使用，方便日后选择使用，提示：本文不是细致的API使用介绍，是对于几种动画开发API的使用场景的总结。

一、Canvas

首当其冲的，当然是H5的canvas了，当然它虽然是H5的标签，但是具体的实现，完全要靠Js，所以利用Canvas绘图制作动画，需要一定的原生Js功底。

简述：Canvas绘图，少不了以下代码：

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

获取页面Canvas画布DOM，然后建立2d上下文，可以说之后所有的fillStyle; fillRect,甚至于moveTo等操作，全都是建立在2d上下文中的，每个画布左上角为（0,0）坐标，右下角为（width,height）即画布设置的宽高数值坐标，所有动画点位都是基于这些坐标和对应API绘制的；当然，如果觉得自己画麻烦，可以制作帧图，利用drawImage(img,x,y)读取图片，配合requestAnimationFrame动画API就可以完成一个动态显示了。

场景：一般游戏场景用Canvas比较多；如果绘画能力很强的，也可以用这个绘制比较炫酷的动画，甚至是3D效果的动画；毕竟这是H5贡献给前端的强大神器，更多使用场景有待于不断的探索和开发。

难点：Js的API操作以及构图技巧。

兼容性：IE9及以上支持，其他浏览器及移动端均支持。

二、requestAnimationFrame/setTimeout/setInterval

定时器动画，后面两个“set”系列的，应该是最早期的Js动画实现模范了，通过设置时间间隔，回调函数，绘制动画，然而具有性能问题，窗口隐藏时，既然会运行；并且在时间选择上，由于定时器本身只是在设定的时间后将任务加入队列，而非立刻运行，是否运行要看当前线程是否空闲，否则会延后，所以动画的流畅性就会受到影响，甚至会丢失动画帧（setInterval如果任务超出时长仍未执行，怎会丢弃之前的任务）；如果大量的任务堆积，会导致过渡绘制，尤其是循环动画时，更容易发生卡顿。

而现在requestAnimationFrame(RAF)动画API诞生了，可以说，它的诞生，应该让你忘了定时器动画（除非你想自己控制动画间隔时间，或者有着非常非常高的兼容性要求，否则请使用RAF吧）。

简述：requestAnimationFrame设置连续的动画，基本是交给浏览器自己去渲染，一般是16ms的刷新频率；而且，RAF将渲染交给浏览器，让浏览器根据自己运行去处理所有动画，这就相当于调用浏览器自己的内部优化方式，只在需要绘制帧的时候，才会进行绘制。这就不会产生大量堆积任务，使动画更流畅，性能更优；另外当窗口不可见时，动画不会运行。

RAF的使用和传统定时器一样，传入一个回调函数即可，返回一个id，如果需要停止动画，可以调用cancelAnimationFrame(id)；

场景：替换所有传统定时器动画，并且以后就使用RAF制作Js动画；

难点：目前阶段还是建议考虑兼容性，可以参考Paul Irish’s fantastic original groundwork on the subject进行修改；

兼容性：IE10+不需要前缀，FF需要前缀，Chrome24后不需要前缀；

三、@keyframes与animation

这是CSS3提供给我们的复杂动画搭档。

简述：@keyframes定义名称和动画规则，可以使用from/to，也可以用百分比表示动画状态，动画的复杂程度，取决于各个状态之间设置的属性值；然后利用animation属性，将对应的帧规则写成动画类，设置相应的播放次数，间隔时间，延迟时间，动画速度曲线等属性，然后将对应的类，写在需要动画的元素上，然后大功告成。一般情况下，动画结束，元素会恢复原状，可利用animation-fill-mode属性，设置元素动画结束后固定位置，不还原等。

场景：移动端对CSS3动画的支持好，移动端建议使用，桌面需考虑兼容性，建议对位移形变影响不大的元素使用；

难点：兼容性处理，目前所有动画属性需要加webkit-前缀，同时，如果动画元素在结束后需要保持位置，animation-fill-mode属性IE10以下是不支持的，所以如果要兼容，就需要写更多逻辑来满足，甚至需要js配合，这就失去了CSS动画的优势。当然移动端没有这么多困扰。

兼容性：移动端基本都OK，桌面IE10+支持，safari4.0 -webkit-前缀，其他主流OK。

四、transform/transition

CSS3简单动画的搭档。

简述：严格意义上讲，transform属性应该和上述第三种动画使用，实现正统的CSS3动画，而transform本身不是动画，只是一个元素位置x,y,z轴的位移translate，旋转rotate，缩放scale，翻折(3D)的改变而已，配合perspective和transform-style可以实现3D的效果的属性而已；而transition是一个可以产生过渡效果的CSS3属性，可以延迟，过渡持续时间等；二者结合起来，可以实现简单的动画，如开门等，但是仅限于单次的动画，不能循环，并且结束后，元素就定位在新的位置了即transform设定的状态。具体的3D小动画实现方式，可以参考我的另一篇文章。当然，transition和其他支持属性也可以形成简单的动画效果，比如opacity实现淡入淡出。这里将 transform与之绑定，只是为了让动画更加丰富一些。

场景：同第三种方式，移动端优选，桌面考虑兼容性，单次且无需复位的动画可以考虑使用；

难点：兼容性（主要由于transition的支持）2D动画IE10+，3D动画需要IE12，safari webkit-前缀，其他主流浏览器目前都OK，并且transition并非支持所有属性，比如display就不支持，另外如果使用transition，不建议用all字段，除非你的这个元素确定无论怎样都要缓慢的过渡一下。否则页面但凡有一点变化，元素都会慢悠悠的改变，用户体验不好。所以不要犯懒，用啥写啥，就是多几个逗号而已。

完。

工作累了吧，可以扫描二维码关注公众号，看看轻松的文章，放松一下。再忙，也该有自己的生活，一定要爱惜身体！