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相对而言,可能是较方便实现图表的方式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

82720
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(上篇)

移动端 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文...

30280
来自专栏九彩拼盘的叨叨叨

用 Compass 分分钟地做图片精灵

对于页面仔来说,做图片精灵是一件枯燥无聊又废时的事。然后不甘于现状的人们发明了些做图片精灵的工具。我觉得用 Compass 来做图片精灵是最快速简单的。

17030
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

41220
来自专栏Guangdong Qi

iOS开发常用之网络

17410
来自专栏公众号_薛勤的博客

Comfort - 一款MarkDown风格的博客园主题

目录和返回顶部一直位于右下角,鼠标移入显示,移出隐藏。注意,在手机端是不显示目录按钮和返回顶部按钮。

47930
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

478150
来自专栏企鹅号快讯

5个你可能不知道的CSS属性

每年都有新的CSS属性被标准化,并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松,创造出新颖美丽的网站。 在这篇文章中,我将介绍5个相对较新的CS...

20880
来自专栏Android机动车

Web App 一分钟适配 iPhone X

iPhone X 已经开抢了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?

8820
来自专栏我和未来有约会

Silverlight制作逐帧动画

打算用sl来制作一个游戏,我曾经有flash开发游戏的经验.现在想用sl来做.打算记录下我开发游戏探索的过程. 打开http://www.emu-zone.o...

24490

扫码关注云+社区

领取腾讯云代金券