HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame

2、css3

3、svg

4、canvas（当然，这个还是要配合js）

 

也许这么分类是不对的，因为无论如何都需要脚本控制，那么也许应该分为

1、js+传统css

2、css3

3、js+svg

4、js+canvas

但由于requestAnimationFrame比较特殊，所以还是单独出来说吧。

 

 

1、setTimeout和requestAnimationFrame

 

setTimeout就比较基本了，没什么说的，然后requestAnimationFrame可以看看这个文章：

http://www.zhangxinxu.com/wordpress/?p=3695

 

 

requestAnimationFrame的好处是

• 类似flash的enterFrame事件，跟浏览器重绘同步，不像setTimeout那样强行插入，更容易实现平滑的效果
• 灵活，可以实现很多css3无法实现的高级效果，例如一些曲线缓动、弹性效果等
• 容易做到浏览器兼容，可以封装函数，低级浏览器改为使用setTimeout

缺点是，很多浏览器不支持，尤其android，只能使用setTimeout弥补。

 

简单兼容：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

 

2、CSS3

 

CSS3可以利用css语法把动画绑定到dom上，不需要js代码参与。CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

 

Transform： http://www.w3cplus.com/content/css3-transform

Transition： http://www.w3cplus.com/content/css3-transform

Animation： http://www.w3cplus.com/content/css3-animation

 

好处是：方便，不需要js参与，适合做一些图片/文字的简单效果

坏处是：不灵活，效果有限

 

网上一些所谓“惊讶”的CSS3效果，很多都是配合js实现的，可以说，js+css应该是灵活运用，包括css2和css3的内容。

 

 

3、SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

 

例子： http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html

 

官方资料： http://www.w3.org/TR/SVG11/

 

由于svg每个图形都是一个对象，那么处理鼠标事件就跟普通的html相差无几了，这个在开发效率上是比较高的。

 

例如这样的地图应用：

 

 

SVG特点是：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

 

SVG 工具

SVG工具比较成熟，美术同学的AI可以直出静态SVG，而Flash IDE也可以通过Swiffy插件也可以把矢量动画导出为SVG动画。

 

4、canvas

 

依赖js（参考1），修改canvas的效果，简单的效果可以直接利用canvas.getContext("2d")画出来；复杂的效果，可以配合Image实现。

 

简单例子： http://widgets.better2web.com/loader/

http://anthonyterrien.com/knob/

 

非常好的学习资料： http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

 

 

特点是：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

 

Flash CC在支持Canvas方面也是很强大，已经集成到IDE中，可以直接新建HTML 5 canvas动画文档，也可以从原有的Flash动画导出canvas动画。

 

5、兼容性

 

PC浏览器实在多，直接看终端的浏览器吧， http://mobilehtml5.org/

 

 

 

 

可以发现，CSS3和canvas是清一色都被支持到了，而SVG在Android低版本（2.X）浏览器是不支持的。

 

另外，在android上requestAnimationFrame也是不支持的（4.2前）。

 

 

6、总结

 

如果做游戏，肯定是清一色canvas+开源的框架，但是普通的简单网页效果，例如图表，就应该根据实际的情况灵活运用各种方式了。而SVG相对而言，可能是较方便实现图表的方式。