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可以看看这个文章:
 
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。
 
 
好处是:方便,不需要js参与,适合做一些图片/文字的简单效果
坏处是:不灵活,效果有限
 
网上一些所谓“惊讶”的CSS3效果,很多都是配合js实现的,可以说,js+css应该是灵活运用,包括css2和css3的内容。
 
 
3、SVG

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

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

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

 
 
 
由于svg每个图形都是一个对象,那么处理鼠标事件就跟普通的html相差无几了,这个在开发效率上是比较高的。
 
例如这样的地图应用:
 
 
SVG特点是:
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用
 

SVG 工具

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

 
4、canvas
 
依赖js(参考1),修改canvas的效果,简单的效果可以直接利用canvas.getContext("2d")画出来;复杂的效果,可以配合Image实现。
 
 
 
 
特点是:
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .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相对而言,可能是较方便实现图表的方式。
posted @ 2016-12-07 09:47  我爱吃小丸子  阅读(1297)  评论(0编辑  收藏  举报