jQuery DrawSVG 插件完整攻略
插件简介
jQuery DrawSVG 插件是一款基于 jQuery 的 SVG 动画插件,可以通过 JavaScript 和 CSS 控制 SVG 路径的展现。该插件拥有一系列 API,可以便捷地增加、删除和修改 SVG 路径,达到良好的流畅效果。
安装
jQuery DrawSVG 插件的安装需要完成以下两个步骤:
- 引入 jQuery 库
在 html 文件中,通过以下方式引入 jQuery 库:
“`
“`
- 引入 DrawSVG 插件
在 html 文件中,通过以下方式引入 jQuery DrawSVG 插件:
“`
“`
使用
在成功引入 jQuery 和 DrawSVG 插件后,即可使用相关 API 来完成 SVG 路径的动画效果。
API
以下为 DrawSVG 插件常用 API 介绍:
- drawsvg(‘draw’,{duration:xxx})
将 SVG 路径绘制出来,duration 表示持续时间。例如,以下代码会在 3 秒钟内将 SVG 路径绘制出来:
$('path').drawsvg('draw',{duration:3000});
- drawsvg(‘undraw’,{duration:xxx})
将 SVG 路径擦除,duration 表示持续时间。例如,以下代码会在 2 秒钟内将 SVG 路径擦除:
$('path').drawsvg('undraw',{duration:2000});
- drawsvg(‘progress’,progress,{duration:xxx})
控制 SVG 路径的完成度,progress 为完成度,为 0 ~ 1 之间的数值,duration 表示持续时间。例如,以下代码会花费 5 秒钟将 SVG 路径完成度达到 0.5:
$('path').drawsvg('progress',0.5,{duration:5000});
示例
以下示例将向您展示 DrawSVG 插件的使用方法:
- 绘制 SVG 路径
HTML 代码:
<svg>
<path d="M0,100 L400,100" stroke="black" stroke-width="2" fill="none"></path>
</svg>
JS 代码:
$('path').drawsvg('draw',{duration:3000});
效果:会将 SVG 路径绘制出来,从左到右完成绘制效果
- 擦除 SVG 路径
HTML 代码:
<svg>
<path d="M0,100 L400,100" stroke="black" stroke-width="2" fill="none"></path>
</svg>
JS 代码:
$('path').drawsvg('undraw',{duration:2000});
效果:会将 SVG 路径擦除,从右到左擦除效果
总结
以上就是 jQuery DrawSVG 插件的使用攻略,包括安装和使用两个方面的介绍,以及两个示例展示对应 API 的使用方法。通过使用 DrawSVG 插件,可以方便地实现 SVG 路径的各种动画效果。