segment-js/dist/segment.min.js

A JavaScript library to draw and animate SVG path strokes

/**
 * segment - A JavaScript library to draw and animate SVG path strokes
 * @version v1.1.0
 * @link https://github.com/lmgonzalves/segment
 * @license MIT
 */
!function(i,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():i.Segment=t()}(this,function(){function i(i,t,e,s){this.path=i,this.reset(),this.begin="undefined"!=typeof t?this.valueOf(t):0,this.end="undefined"!=typeof e?this.valueOf(e):this.length,this.circular="undefined"!=typeof s&&s,this.timer=null,this.animationTimer=null,this.draw(this.begin,this.end,0,{circular:this.circular})}return i.prototype={reset:function(){this.length=this.path.getTotalLength(),this.path.style.strokeDashoffset=2*this.length},draw:function(i,t,e,s){if(this.circular=!(!s||!s.hasOwnProperty("circular"))&&s.circular,e){this.stop();var n=this,h=s&&s.hasOwnProperty("delay")?1e3*parseFloat(s.delay):0;if(h)return delete s.delay,this.timer=setTimeout(function(){n.draw(i,t,e,s)},h),this.timer;this.startTime=new Date,this.initBegin=this.begin,this.initEnd=this.end,this.finalBegin=this.valueOf(i),this.finalEnd=this.valueOf(t),this.pausedTime=0,this.duration=e,this.easing=s&&s.hasOwnProperty("easing")?s.easing:null,this.callback=s&&s.hasOwnProperty("callback")?s.callback:null,this.animationTimer=requestAnimationFrame(this.play.bind(this))}else this.path.style.strokeDasharray=this.strokeDasharray(i,t)},play:function(){var i=new Date;this.pausedTime&&(this.startTime.setMilliseconds(this.startTime.getMilliseconds()+(i-this.pausedTime)),this.pausedTime=0);var t=(i-this.startTime)/1e3,e=t/parseFloat(this.duration),s=e;if("function"==typeof this.easing&&(s=this.easing(s)),e>1?(s=1,this.stop()):this.animationTimer=requestAnimationFrame(this.play.bind(this)),this.drawStep(s),e>1&&"function"==typeof this.callback)return this.callback.call(this)},pause:function(){this.animationTimer&&(this.stop(),this.pausedTime=new Date)},resume:function(){this.animationTimer||(this.animationTimer=requestAnimationFrame(this.play.bind(this)))},stop:function(){cancelAnimationFrame(this.animationTimer),this.animationTimer=null,clearTimeout(this.timer),this.timer=null},drawStep:function(i){this.begin=this.initBegin+(this.finalBegin-this.initBegin)*i,this.end=this.initEnd+(this.finalEnd-this.initEnd)*i,this.begin=this.begin<0&&!this.circular?0:this.begin,this.begin=this.begin>this.length&&!this.circular?this.length:this.begin,this.end=this.end<0&&!this.circular?0:this.end,this.end=this.end>this.length&&!this.circular?this.length:this.end,this.end-this.begin<=this.length&&this.end-this.begin>0?this.draw(this.begin,this.end,0,{circular:this.circular}):this.circular&&this.end-this.begin>this.length?this.draw(0,this.length,0,{circular:this.circular}):this.draw(this.begin+(this.end-this.begin),this.end-(this.end-this.begin),0,{circular:this.circular})},strokeDasharray:function(i,t){if(this.begin=this.valueOf(i),this.end=this.valueOf(t),this.circular){var e=this.begin>this.end||this.begin<0&&this.begin<this.length*-1?parseInt(this.begin/parseInt(this.length)):parseInt(this.end/parseInt(this.length));0!==e&&(this.begin=this.begin-this.length*e,this.end=this.end-this.length*e)}if(this.end>this.length){var s=this.end-this.length;return[this.length,this.length,s,this.begin-s,this.end-this.begin].join(" ")}if(this.begin<0){var n=this.length+this.begin;return this.end<0?[this.length,this.length+this.begin,this.end-this.begin,n-this.end,this.end-this.begin,this.length].join(" "):[this.length,this.length+this.begin,this.end-this.begin,n-this.end,this.length].join(" ")}return[this.length,this.length+this.begin,this.end-this.begin].join(" ")},valueOf:function(i){var t=parseFloat(i);if(("string"==typeof i||i instanceof String)&&~i.indexOf("%")){var e;~i.indexOf("+")?(e=i.split("+"),t=this.percent(e[0])+parseFloat(e[1])):~i.indexOf("-")?(e=i.split("-"),t=3===e.length?-this.percent(e[1])-parseFloat(e[2]):e[0]?this.percent(e[0])-parseFloat(e[1]):-this.percent(e[1])):t=this.percent(i)}return t},percent:function(i){return parseFloat(i)/100*this.length}},i});