9种网页动画常用实现方式总结

随着HTML5的逐步普及，在Web页上实现动画的方式也增加了，但也带来了一些兼容性问题，本文做一个总结。

目前来说，没有一种方式是完美的。

GIF兼容性最好，但是画质差，无交互。

Canvas很火热，功能也强大，编程难度也稍高，旧IE不支持。

SVG擅长处理矢量图形，交互容易，旧IE不支持。

CSS3很闪亮，但功能有限，旧IE不支持。

APNG, SMIL 还需看将来各浏览器的支持进展。

Video也华丽，只是一个视频要准备多种文件格式，令人不爽。

Javascript是个万金油，只要做交互，他还是一员大将。

Flash很强大，但前途暗淡，移动端不給力。

序号	名称	简述	优点	缺点	适用场景
1	GIF动画	这是最历史悠久的方式了，GIF89a也已经过了专利期限，现在使用没有法律问题了。	文件小、工具多、浏览器兼容性好、资源占用少。	支持颜色少(最大256色)、Alpha透明度支持差，导致图像锯齿毛边比较严重。	适用于颜色少、画面简单的场合
2	Flash / SilverLight 等	通过浏览器plugin来支持特定文件格式的动画。	跨浏览器、处理复杂动画无压力	需要安装插件、移动设备不支持、占用资源多、易导致浏览器崩溃	桌面系统、复杂的动画
3	Javascript + HTML	通过js动态修改DOM节点及属性来实现动画。	兼容性好(桌面端、移动端都行)	需要搭配CSS,JS,图片等文件，运行效率不高	兼容性重要、计算量不大的动画
4	Javascript + Canvas / WebGL	通过Canvas 2D/3D Context来绘图	运行效率高、工具支持好、功能够强大、可硬件加速	旧IE不支持，现代浏览器支持情况有所差异，交互麻烦	可以无视IE678的场合
5	Javascript + SVG	通过js动态修改SVG节点及属性来实现动画。	编程简单，绘图容易，功能强大，交互方便	旧IE不支持，现代浏览器支持情况有所差异	要求矢量图形的场合，且可以无视IE678
6	SVG+SMIL	通过完全的SVG标签式的语言来编写动画	编程简单，无需JS	旧IE不支持，现代浏览器支持情况也相差巨大，仅Firefox支持较好	Firefox
7	APNG	比GIF动画更先进的动画图像文件格式，支持真彩色，支持alpha透明	画质高、单文件、资源占用少。	浏览器支持差，只支持逐帧动画，不能交互	Firefox, Opera
8	CSS3	通过CSS直接实现动画效果	标准化、资源占用少。	旧IE不支持，现代浏览器支持情况有所差异，交互功能弱	现代浏览器
9	Video	通过HTML5视频来实现动画	标准化、资源占用少。	旧IE不支持，现代浏览器支持情况有所差异，交互麻烦	现代浏览器

用Video来做动画？没听错，确实有！今天早上打开Bing.com就是的，刚开始以为是CSS3，查看一下发现是个Video.

上面表格看起来还是有些不爽，还是弄一个评分的简单表吧，如下：

序号	名称	格式	桌面端 兼容性	移动端 兼容性	IE 6/7/8	交互	效率	资源占用
1	GIF动画	二进制	非常好	非常好	支持	无	高	低
2	Flash / SilverLight 等	二进制	非常好	非常差	支持	容易	高	高
3	Javascript + HTML	纯文本	非常好	非常好	支持	容易	低	中
4	Javascript + Canvas	纯文本	一般	好	不支持	难	高	中
5	Javascript + SVG	纯文本	一般	好	不支持	容易	低	中
6	SVG+SMIL	纯文本	差	非常差	不支持	容易	高	中
7	APNG	二进制	非常差	非常差	不支持	无	高	低
8	CSS3	纯文本	一般	好	不支持	无	高	低
9	Video	二进制	一般	一般	不支持	难	高	中

以上仅是个人浅见之中的不完全表达，欢迎指正。

另外，强烈期待Canvas高手、SVG高手与我交流。