segment-a lightweight library for drawing and animating SVG path strokes

Join us today to learn about a lightweight class library that implements the SVG path stroke drawing and animation, we introduce the segment from easy to use, detailed usage, resources and cases, and source code interpretation.

1. Easy to get started

Add segment to the HTML aspect to define path.

<script src="/dist/segment.min.js"></script><svg>    <path id="my-path" ...></svg>

JS uses path to instantiate a segment, then you can use the segment draw method.

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

2. Use the detailed 2.1 constructor

The segment constructor can receive three parameters.

var segElement=new Segment(path,begin,end);

• Path: The route that needs to be drawn (DOM element).
• Begin: The location where the path begins to be drawn, optional parameters, and the default value is 0.
• End: The position at which the path ends drawing, optional parameters, and the default value is 100%.

2.2 Draw method

The Draw method is the core method of segment and can accept four parameters.

segElement.draw(begin, end, duration, options);

• Begin: The path begins to draw where the default value is 0. The parameter type is string.
  
  • Digital
  • Percentage
  • Percent + number
  • Percent-Number
• End: The position at which the path ends drawing, the default value is 100%, and the parameter type is string. Enter the same notation as begin.
• Duration: Draw duration, default value is 0.
• Options: Draw parameter, default value is null, parameter type is object type. The specific parameters are as follows.
  
  • Delay: The default value is 0, in S.
  • Easing: The ease type of the animation is drawn, and the default value is linear.
  • Callback: callback function, default value is null.

The specific case of the draw method is as follows.

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

3. Resources and Cases

1. Codrop animating an SVG Menu Icon with Segment
2. Official case
3. Official tutorials animating SVG path segments

4. Source Code Interpretation

Through the source reading, learning the development of Class library, SVG animation concrete implementation.

/** * segment-a Little JavaScript class (without dependencies) to draw and animate SVG path strokes * @version v0.0. 4 * @link https://github.com/lmgonzalves/segment * @license MIT * * function Segment(path, begin, end) {     This. Path = path; This. length = Path.gettotallength (); This. Path.style.strokeDashoffset = This. length *2; This. Begin =typeofBegin!==' undefined '? This. VALUEOF (BEGIN):0; This. end =typeofEnd!==' undefined '? This. ValueOf (end): This. length; This. Timer =NULL; This. Draw ( This. Begin, This. end);} Segment.prototype = {draw: function(begin, end, duration, options){        if(duration) {varDelay = Options && Options.hasownproperty (' delay ') ?parsefloat(options.delay) * +:0, easing = Options && Options.hasownproperty (' easing ') ? Options.easing:NULL, callback = Options && Options.hasownproperty (' Callback ') ? Options.callback:NULL, that = This; This. Stop ();if(delay) {DeleteOptions.delay; This. Timer = SetTimeout ( function () {That.draw (Begin, end, duration, options); }, delay);return  This. Timer; }varStartTime =New Date(), rate = +/ -, Initbegin = This. Begin, Initend = This. End, Finalbegin = This. ValueOf (begin), finalend = This. ValueOf (end); ( function calc(){                varnow =New Date(), elapsed = (now-starttime)/ +, Time = (elapsed/parsefloat(duration)), t = time;if(typeofeasing = = =' function ') {T = easing (t); }if(Time >1) {that.stop (); t =1; }Else{That.timer = setTimeout (calc, rate);                } That.begin = Initbegin + (finalbegin-initbegin) * t; That.end = Initend + (finalend-initend) * t;if(That.begin <0) {That.begin =0; }if(That.end > That.length)                {that.end = That.length; }if(That.begin < That.end)                {That.draw (That.begin, that.end); }Else{That.draw (That.begin + (that.end-that.begin), That.end-(That.end-that.begin)); }if(Time >1&&typeofcallback = = =' function '){returnCallback.call (That.context);        }            })(); }Else{ This. Path.style.strokeDasharray = This. Strokedasharray (begin, end); }}, Strokedasharray: function(begin, end){         This. Begin = This. valueOf (begin); This. end = This. ValueOf (end);return[ This. length, This. length + This. Begin, This. End- This. Begin].join ("'); }, ValueOf: function(input){        varval =parsefloat(input);if(typeofinput = = =' String '|| Inputinstanceof String){if(~input.indexof ('% ')){varArrif(~input.indexof (' + ') {arr = Input.split (' + '); val = This. Percent (arr[0]) +parsefloat(arr[1]); }Else if(~input.indexof ('-') {arr = Input.split ('-'); val = This. Percent (arr[0]) -parsefloat(arr[1]); }Else{val = This. percent (input); }            }        }returnVal }, STOP: function(){Cleartimeout ( This. timer); This. Timer =NULL; }, Percent: function(value){        return parsefloat(value)/ -* This. length; }};

5. Disclaimer

This article is starting with the geek headline. Love front end, music share. Fedfun hope to make progress together with you.
Welcome any kind of reprint, please indicate loading, keep this paragraph text.
Independent blog Http://whqet.github.io
Sina Weibo Http://weibo.com/FedFun
Geek Headline Http://geek.csdn.net/user/publishlist/whqet

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

segment-a lightweight library for drawing and animating SVG path strokes