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高手与我交流。

没有更多推荐了,返回首页