当前位置：首页 > 网页特效 > svg

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

分类：svg 日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="dist/segment.min.js"></script>    
```            
##### HTML结构 
要制作SVG路径动画，只需要一个带path元素的SVG即可。

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

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| 动画结束后的回调函数| 
下面是一些示例代码：

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果