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

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具的更多相关文章

  1. HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  2. HTML5 SVG实现过山车动画

    HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...

  3. HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

    接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...

  4. 6款基于SVG的HTML5CSS3应用和动画

    1.CSS3/SVG质感背景小图标 镂空效果图标按钮 今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错. 在线演示 源码下载 ...

  5. 一步步用svg做一个声波扩散动画

    有个项目需要在某个坐标显示一个声波扩散(不知道这个表达对不对)的动画. 这种需求一般做法有几种,一种做成gif图片,然后贴上去,一种是用html+css3完成,要么就是画上去,这画又分两种,一种是Ca ...

  6. 基于jquery和svg超炫的网页动画

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: ...

  7. 使用 SVG 来实现波浪 (wave) 动画效果

    如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...

  8. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  9. HTML5的 2D SVG和SVG DOM的学习笔记(1)

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

随机推荐

  1. MongoDB的学习--explain()和hint()

    Explain 从之前的文章中,我们可以知道explain()能够提供大量与查询相关的信息.对于速度比较慢的查询来说,这是最重要的诊断工具之一.通过查看一个查询的explain()输出信息,可以知道查 ...

  2. 转载----How fast is Redis?

    How fast is Redis? Redis includes the redis-benchmark utility that simulates running commands done b ...

  3. ProGuard代码混淆技术详解

    前言     受<APP研发录>启发,里面讲到一名Android程序员,在工作一段时间后,会感觉到迷茫,想进阶的话接下去是看Android系统源码呢,还是每天继续做应用,毕竟每天都是画UI ...

  4. redis学习教程之一基本命令

    参阅redis中文的 互动教程(interactive tutorial)来学习的. 目录: 全局操作 get  get incr  自增 del 删除 expire 定时 list  队列 set ...

  5. HT for Web 3D游戏设计设计--汉诺塔(Towers of Hanoi)

    在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Towe ...

  6. 理解SQL Server是如何执行查询的 (3/3)

    页并发访问的保护:闩锁 在多线程并发情况下,需要防止读线程读到写线程正在写的资源,在编程中,通过使用互斥器(Mutexes), 信号量(Semaphore), 临界区(Critical Section ...

  7. Python语言特性之3:@staticmethod和@classmethod

    问题:Python中@staticmethod和@classmethod两种装饰器装饰的函数有什么不同? 原地址:http://stackoverflow.com/questions/136097/w ...

  8. Emit学习(1) - HelloWorld

    之前看过Dapper(使用到了Emit), CYQ.Data(另一种思路,没有使用Emit)类的框架之后, 也想自己做一个小框架玩一下, 不过此时能力太过欠缺, 做不了Cyq.Data或者PDF.Ne ...

  9. C语言学习012:将代码文件分成多个文件

    如果将所有的代码都写到一个文件中,当对于小项目来说不会有什么问题,但是当它一个很大的工程的时候,如果将所有代码都写到一个文件中,不但开发起来很困难,维护更是头疼,所以我们应该将代码按不同的功能分别建立 ...

  10. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...