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});