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

【前言】

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

 

【主体】

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

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

 

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

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

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

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

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

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

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

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

 

 序号   名称   格式     桌面端兼容性            移动端容性   交互          效率               资源占用

                                   

GIF动画	二进制	非常好	非常好	支持	无	高	低
Flash / SilverLight 等	二进制	非常好	非常差	支持	容易	高	高
Javascript + HTML	纯文本	非常好	非常好	支持	容易	低	中
Javascript + Canvas	纯文本	一般	好	不支持	难	高	中
Javascript + SVG	纯文本	一般	好	不支持	容易	低	中
SVG+SMIL	纯文本	差	非常差	不支持	容易	高	中
APNG	二进制	非常差	非常差	不支持	无	高	低
CSS3	纯文本	一般	好	不支持	无	高	低
Video	二进制	一般	一般	不支持	难	高	中

 

 

 

 

 

 

 

 

 

 

 

.