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

当前位置:主页 > Html5库 > SVG > 实用绘制和动画SVG描边路径的JavaScript插件
实用绘制和动画SVG描边路径的JavaScript插件
分享:

    插件介绍

    segment.js是一款非常实用的绘制和制作SVG描边路径动画的JavaScript插件。该插件最大的特点是可以只绘制和动画某一段SVG路径,你可以在参数中指定需要动画那一段SVG路径。

    浏览器兼容性

    浏览器兼容性
    时间:2015-11-12
    阅读:
简要教程

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 动画的选项

注意:beginend选项可以是下面的这些类型值:

  • 浮动数值
  • 百分比值
  • 百分比值 + 浮动数值
  • 百分比值 - 浮动数值
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});