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"),
    segment = new segment (MyPath);

Segment.draw ("25%", "75%-10", 1);

2. Using the detailed 2.1 Constructors

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.
Percent percentage + 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%-ten", 1, {delay:0.5, easing:cubicin, callback:done});

3. Resources and CasesCodrop animating an SVG Menu Icon with Segment official case official tutorial 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 = typeof begin!== ' undefined '?
    This.valueof (BEGIN): 0; This.end = typeof end!== ' 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) {var delay = Options && options.hasownproperty (' delay ')? Parsefloat (options.delay) * 1000:0, easing = options && options.hasownproperty (' easing ')? Options.easing:null, callback = Options && options.hasownproperty (' callback ')? Options.callback:null, that = this;
            This.stop ();
                if (delay) {delete options.delay;
                This.timer = SetTimeout (function () {That.draw (Begin, end, duration, options);
                }, delay);
            return this.timer;
                } var startTime = new Date (), rate = 1000/60, Initbegin = This.begin, Initend = this.end, Finalbegin = this.valueof (begin), finalend = this.valueof (end

            );
                    (function calc () {var now = new Date (), elapsed = (now-starttime)/1000,

                Time = (elapsed/parsefloat (duration)), t = time;
                if (typeof easing = = = ' 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 && typeof callback = = = ' function ') {return callback.c
                All (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) {var val = parsefloat (input);
                if (typeof input = = = ' String ' | | input instanceof String) {if (~input.indexof ('% ')) {var arr;
                    if (~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);
    }}} return Val;
        }, 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 Headlines