码迷,mamicode.com
首页 > Web开发 > 详细

jquery-drawsvg — HTML5轻量级插件

时间:2015-09-21 15:36:51      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

 

html5中,有许多插件,今天小编就为大家分享众多插件中的jquery-drawsvg插件。

jquery-drawsvg是什么插件呢?其实,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。

 

jquery-drawsvg的特点

1、轻量级,压缩后小于2kb;

2、使用简单;

3、支持Easing过渡动画效果;

技术分享

 

jquery-drawsvg的使用方法

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

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

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

初始化插件

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

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

var mySVG = $(‘#my_svg_element‘).drawsvg();

 

2、执行动画效果了

mySVG.drawsvg(‘animate‘);

 

jquery-drawsvg的配置参数

在使用jquery-drawsvg创建SVG路径动画时,常常需要用到一下配置参数:

参数

类型

默认值

描述

duration

Integer

1000

完成每一个路径动画的持续时间

stagger

Integer

200

每一个路径动画开始前的延迟时间

easing

String

swing

使用jQuery Easing插件的过渡动画效果

reverse

Boolean

FALSE

是否反向绘制

callback

Function

function() {}

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

 

以上就是html5的jquery-drawsvg插件相关知识,希望对大家在使用这个插件的时候有所帮助。

 

相关阅读:《如何通过按钮控制HTML5页面的背景音乐?

jquery-drawsvg — HTML5轻量级插件

标签:

原文地址:http://www.cnblogs.com/maizi008/p/4826234.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!