Web前端图形动画技术概览

1.    基本

html标签div等及css1/css2

2.    图形

2.1.    矢量图

vml(微软IE专有，已经过时)和svg(html5标准)

非IE浏览器使用SVG格式来描述矢量数据，IE浏览器(低版本，高版本也已支持SVG)使用VML格式，每个SVG/VML对象都是DOM对象，可以使用CSS渲染样式格式，也可以触发DOM事件，可以用javascript编程。比较有名的javascript矢量库Raphaël就是用了SVG/VML，兼容几乎所有浏览器，参考http://raphaeljs.com，目前其已经并入sencha lab，参考：http://www.sencha.com/，其中的ExtJS拥有的绘图动画功能(Drawing)就是使用了Raphaël

2.2.    位图

canvas，使用javascript进行绘图

html5标准，在标签canvas内使用javascript编程展现2D/3D图型图像，2D类似于Windows中GDI+编程，3D即WebGL类似于OpenGL编程，需要自己考虑刷新的问题。WebGL请参考google的http://www.chromeexperiments.com/webgl/，里面有很多精彩实例

 

3.    动画

3.1.    JavaScript

直接使用js操作div等元素通过setinterval等定时器或者浏览器提供的刷新接口(如firefox中的window.requestAnimationFrame参考：https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame)来实现动画，jquery里的动画就是通过此方式实现

3.2.    CSS3

直接针对div等dom元素进行渲染，通过编写CSS3样式来实现，不需要js编程，参考：http://www.w3school.com.cn/css3/css3_animation.asp