转载

绘制动画SVG描边路径的JavaScript插件

简要教程

segment.js是一款非常实用的HTML5绘制和制作SVG描边路径动画的JavaScript插件。该插件最大的特点是可以只绘制和动画某一段SVG路径，你可以在参数中指定需要动画那一段SVG路径。它通过简单的设置要绘制的SVG路径的开始和结束位置，以及动画持续时间和动画的easing效果，就可以制作出非常酷的绘制SVG路径的动画效果。

查看演示 下载插件

使用方法

使用该SVG路径动画插件需要引入segment.js文件。

<script src="dist/segment.min.js"></script>

HTML结构

要制作SVG路径动画，只需要一个带path元素的SVG即可。

<svg>   <path id="my-path" ...> </svg>

初始化插件

要初始化segment.js插件，首先需要获取path元素的示例对象，然后将它传入Segment()构造函数中，获取Segment的对象实例。之后可以通过segment的.draw(begin, end, duration, options)方法来绘制SVG路径。

var myPath = document.getElementById("my-path"),     segment = new Segment(myPath);   segment.draw("25%", "75% - 10", 1);

构造函数

Segment的构造函数需要三个参数：

path：要绘制的DOM元素。

begin：可选，默认为0。开始绘制路径的位置。

end ：可选，默认为100%。结束绘制路径的位置。

方法draw(begin, end, duration, options)

名称	类型	默认值	描述
begin	string	0	开始绘制的路径的长度
end	string	100%	结束绘制的路径的长度
duration	float	0	动画持续时间，单位秒
options	object	null	动画的选项

注意：begin和end选项可以是下面的这些类型值：

浮动数值

百分比值

百分比值 + 浮动数值

百分比值 - 浮动数值

draw方法的options参数的可选值

名称	类型	默认值	描述
delay	float	0	开始绘制路径前的等待时间，单位秒
easing	function	linear	Easing函数
callback	function	null	动画结束后的回调函数

下面是一些示例代码：

function cubicIn(t) {     return t * t * t; }   function done() {     alert("Done!"); }   segment.draw("25%", "75% - 10", 1, {delay: 0.5, easing: cubicIn, callback: done});

来源 jQuery之家

正文到此结束