轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程

看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。

该SVG路径动画插件的特点有:

轻量级,压缩后小于2kb

使用简单

支持Easing过渡动画效果

演示地址:http://www.htmleaf.com/Demo/201509112558.html

插件下载地址:http://down.htmleaf.com/1509/201509111546.zip

使用方法:

使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。

<script src="js/jquery.min.js"></script>

<script src="js/jquery.drawsvg.js"></script>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。

首先将初始化的对象实例保存为一个变量:

var mySVG = $('#my_svg_element').drawsvg()

然后就可以执行动画效果了:

mySVG.drawsvg('animate')

配置参数

下面是该SVG路径动画创建的可用配置参数:

参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery

Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()

{}路径动画完成之后的回调函数

13 个JavaScript图表和图形绘制插件。少数是独立的框架，大多数支持条图、线图、饼图等基本图形，很多甚至支持更加复杂的图形，

比如：维恩图、热图、进化树、二维散点图、二维散点气泡图、三维散点图等。相信你应当能在这个列表中找到所需的。

1. Flotr2

独立框架库，支持HTML5图表和图形。它是 flotr 的一个分支版本，

移除了 Prototype 依赖性，并且有很多改进。支持：线图、条图、蜡状图、饼图、气泡图。诸如 IE6 类的老浏览器也支持。

2. Rickshaw

用于创建交互式时序图的JS工具。它依赖 D3 可视化库和其他一些 jQuery 和 jQuery UI 的插件。

3. D3

一款著名且高效的可视化库。

4. Awesome Chart JS

简洁的JS库，用于基于HTML5画布元素的图表。

5. canvasXpress

CanvasXpress是一个JavaScript库的基础上实现的标签在HTML5。

我开发这个我们的BMS系统生物学平台为核心的可视化组件库。

它支持疯狂的高度复杂的图表和图形。

6. RGraph

RGraph是一个HTML5的JavaScript图表库，支持超过20种不同类型的图表。

RGraph创建使用新的HTML5 canvas标签，这些JavaScript图表在Web浏览器，这意味着更快的网页和Web服务器的负载较少。，

使用RGraph是一种简单的方法加快你的网站。

7. dygraphs

dygraphs是一个开源JavaScript库，生产产生交互式的，可缩放的时间序列图。

它被设计为显示密集的数据集，使用户能够探索和解释他们。这是一个轻量级的解决方案，并在Internet Explorer中的作品。

8. HighCharts

Highcharts是一个纯JavaScript编写的图表库，提供直观的，交互式的图表到您的网站或Web应用程序。

Highcharts目前支持线，样条，面积，areaspline，柱，棒图，饼图，散点图类型。

一位著名的图表/图形解决方案，如IBM，美国航空航天局，西门子，惠普等众多知名机构

9. gRaphael

gRapha?l的目标是帮助您在您的网站上创造了惊人的图表。它是基于上拉斐尔图形库。退房的演示，在行动中看到静态和交互式图表。

gRapha?l目前支持Firefox3.0+，Safari 3.0以上版本，歌剧9.5+和Internet Explorer 6.0以上。

10. jqPlot

jqplot的绘图和制图插件的jQuery的JavaScript框架。 jqplot的产生美丽的线，棒材和饼图的许多功能。

11. JS Charts

JS Charts是一种基于JavaScript的图表生成，需要很少或根本没有编码。

用JS图表绘制图表是一个简单而容易的事，因为你只需要使用客户端脚本（即通过您的Web浏览器）。

无需额外的插件或服务器模块是必需的。包括我们的脚本，准备图表数据，XML，JSON或JavaScript数组和您的图表已准备就绪！

12. JSXGraph

JSXGraph是一个跨浏览器库进行互动几何，函数绘图，制图，并在Web浏览器中的数据可视化。

完全实现在JavaScript中，不依赖于任何其他的库，并使用SVG，VML，或帆布。

JSXGraph容易嵌入，具有占地面积小：小于100 K字节，如果嵌入在网页中。无插件！已采取特别护理，以优化性能。

13. Humble Finance

HumbleFinance是一个HTML5写作为示范在HTML5的互动图形数据可视化工具。它是类似的Flash上http://finance.google.com/工具。

工具本身是完全用JavaScript编写，使用Prototype和Flotr库。它可用于显示任何两个2-D的数据集的真实的数值数据共享的轴线。

---