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

- 类似flash的enterFrame事件,跟浏览器重绘同步,不像setTimeout那样强行插入,更容易实现平滑的效果
- 灵活,可以实现很多css3无法实现的高级效果,例如一些曲线缓动、弹性效果等
- 容易做到浏览器兼容,可以封装函数,低级浏览器改为使用setTimeout
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
.png)



- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用
SVG 工具
SVG工具比较成熟,美术同学的AI可以直出静态SVG,而Flash IDE也可以通过Swiffy插件也可以把矢量动画导出为SVG动画。

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


HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具的更多相关文章
- HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
- HTML5 SVG实现过山车动画
HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...
- HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...
- 6款基于SVG的HTML5CSS3应用和动画
1.CSS3/SVG质感背景小图标 镂空效果图标按钮 今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错. 在线演示 源码下载 ...
- 一步步用svg做一个声波扩散动画
有个项目需要在某个坐标显示一个声波扩散(不知道这个表达对不对)的动画. 这种需求一般做法有几种,一种做成gif图片,然后贴上去,一种是用html+css3完成,要么就是画上去,这画又分两种,一种是Ca ...
- 基于jquery和svg超炫的网页动画
今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: ...
- 使用 SVG 来实现波浪 (wave) 动画效果
如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- HTML5的 2D SVG和SVG DOM的学习笔记(1)
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...
随机推荐
- Hadoop阅读笔记(二)——利用MapReduce求平均数和去重
前言:圣诞节来了,我怎么能虚度光阴呢?!依稀记得,那一年,大家互赠贺卡,短短几行字,字字融化在心里:那一年,大家在水果市场,寻找那些最能代表自己心意的苹果香蕉梨,摸着冰冷的水果外皮,内心早已滚烫.这一 ...
- 电路相关知识--读<<继电器是如何成为CPU的>>
电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...
- android 中resources管理
主要存在于res/value文件夹中 定义: dimen.xml:主要用于设置像素默认值 <resources> res/values/dimens.xml <dimen name= ...
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...
- 九、SDP
1. SDP 1.1 服务概述 SDP, Service Discovery Protocol,服务发现协议. 1.1.1 概念 SDP提供了一种用于发现服务及这些可用服务 ...
- Spring MVC 对于@ModelAttribute 、@SessionAttributes 的详细处理流程
初学 Spring MVC , 感觉对于 @ModelAttribute 和 @SessionAttributes 是如何被Spring MVC处理的,这一流程不是很清楚, 经过Google资料,有了 ...
- HoverTree.Model.ArticleSelect类的作用
ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类,用于存放查询文章时的条件,例如HvtId就是文章的id.HvtIsShow就是文章的显示属性,当为-1是 ...
- 自己实现简单Web服务器,支持GET POST请求
最近项目上遇到一个需求,最后想到的解决方案是自己实现一个web服务器去处理请求,然后再将信息发送到另外一个程序.然后返回处理之后的结果呈现出来. 现在我就来分享一下如何实现的. 通过.NET 为我们提 ...
- 如何在Web项目中给没有添加API核心组件添加APIController的帮助页HelpPage
前言: ASP.NET中的Web项目可以通过APIController控制器来为其他项目提供接口. 而我们在调试这些接口时,可以选择单元测试,网页测试(Get接口),自己写测试代码或者第三方测试工具 ...
- printf的题目
以前学习于渊老师的<自己动手写操作系统>一书的时候,也自己实现过printf,不过那是比较简单的版本.最近看<程序员面试宝典>,做到这么一道题目:#include <st ...