11 lines
4.4 KiB
JavaScript
11 lines
4.4 KiB
JavaScript
/*
|
|
* Lazy Line Painter
|
|
* SVG Stroke animation.
|
|
*
|
|
* https://github.com/camoconnell/lazy-line-painter
|
|
* http://www.camoconnell.com
|
|
*
|
|
* Licensed under the MIT license.
|
|
*
|
|
*/
|
|
(function(e,t,n){"use strict";var r="lazyLinePainter";var s={init:function(t){return this.each(function(){var n=e(this);var i=n.data(r);n.addClass("lazy-line");if(!i){var s=e.extend({width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeOverColor:null,strokeCap:"round",strokeJoin:"round",strokeOpacity:1,arrowEnd:"none",strokeDash:null,onComplete:null,delay:null,overrideKey:null,drawSequential:true,speedMultiplier:1},t);var o=s.overrideKey?s.overrideKey:n.attr("id").replace("#","");var u=s.svgData[o].dimensions.width;var a=s.svgData[o].dimensions.height;s.svgData=s.svgData[o].strokepath;if(s.width===null){s.width=u}if(s.height===null){s.height=a}var f=c({viewBox:"0 0 "+u+" "+a,preserveAspectRatio:"xMidYMid"});s.svg=e(f);n.append(s.svg);n.data(r,s)}})},paint:function(){return this.each(function(){var t=e(this);var n=t.data(r);var i=function(){t.css({width:n.width,height:n.height});n.paths=[];n.longestDuration=0;n.playhead=0;for(var e=0;e<n.svgData.length;e++){var r=f(n,e);var i=r.getTotalLength();r.style.strokeDasharray=i+" "+i;r.style.strokeDashoffset=i;r.style.display="block";r.getBoundingClientRect();var s=n.svgData[e].duration*n.speedMultiplier;if(s>n.longestDuration){n.longestDuration=s}n.paths.push({duration:s,drawStartTime:n.playhead,path:r,length:i});n.playhead+=s}n.totalDuration=n.drawSequential?n.playhead:n.longestDuration;n.rAF=requestAnimationFrame(function(e){u(e,n)})};if(n.delay===null){i()}else{setTimeout(i,n.delay)}})},pauseResume:function(){return this.each(function(){var t=e(this).data(r);if(!t.paused){t.paused=true;cancelAnimationFrame(t.rAF)}else{t.paused=false;requestAnimationFrame(function(e){o(e,t)})}})},erase:function(){return this.each(function(){var t=e(this);t.removeData(r);t.find("svg").empty()})},destroy:function(){return this.each(function(){var t=e(this);t.removeData(r);t.remove()})},stamp:function(){return this.each(function(){var t=e(this),n=t.data(r);var s=function(){t.css({width:n.width,height:n.height});for(i=0;i<n.svgData.length;i++){n.paper.path(n.svgData[i].path).attr(a(n,n.svgData[i]))}};if(n.delay===null)s();else setTimeout(s,n.delay)})}};var o=function(e,t){t.startTime=e-t.elapsed_time;requestAnimationFrame(function(e){u(e,t)})};var u=function(e,t){if(t.startTime==null){t.startTime=e}t.elapsed_time=e-t.startTime;for(var n=0;n<t.paths.length;n++){var r;if(t.drawSequential){r=t.elapsed_time-t.paths[n].drawStartTime;if(r<0)r=0}else{r=t.elapsed_time}if(r<t.paths[n].duration&&r>0){var i=r/t.paths[n].duration*t.paths[n].length;t.paths[n].path.style.strokeDashoffset=t.paths[n].length-i}else if(r>t.paths[n].duration){t.paths[n].path.style.strokeDashoffset=0}}if(t.elapsed_time<t.totalDuration){t.rAF=requestAnimationFrame(function(e){u(e,t)})}else{if(t.onComplete!=null)t.onComplete()}};var a=function(e,t){var n={stroke:!t.strokeColor?e.strokeColor:t.strokeColor,"fill-opacity":0,"stroke-dasharray":!t.strokeDash?e.strokeDash:t.strokeDash,"stroke-opacity":!t.strokeOpacity?e.strokeOpacity:t.strokeOpacity,"stroke-width":!t.strokeWidth?e.strokeWidth:t.strokeWidth,"stroke-linecap":!t.strokeCap?e.strokeCap:t.strokeCap,"stroke-linejoin":!t.strokeJoin?e.strokeJoin:t.strokeJoin};return n};var f=function(t,n){var r=document.createElementNS("http://www.w3.org/2000/svg","path");var i=e(r);t.svg.append(i);i.attr(l(t,t.svgData[n]));return r};var l=function(e,t){var n={d:t.path,stroke:!t.strokeColor?e.strokeColor:t.strokeColor,"fill-opacity":0,"stroke-dasharray":!t.strokeDash?e.strokeDash:t.strokeDash,"stroke-opacity":!t.strokeOpacity?e.strokeOpacity:t.strokeOpacity,"stroke-width":!t.strokeWidth?e.strokeWidth:t.strokeWidth,"stroke-linecap":!t.strokeCap?e.strokeCap:t.strokeCap,"stroke-linejoin":!t.strokeJoin?e.strokeJoin:t.strokeJoin,"arrow-end":!t.arrowEnd?e.arrowEnd:t.arrowEnd,markerWidth:"4",markerHeight:"3",orient:"auto"};return n};var c=function(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttributeNS(null,"viewBox",e.viewBox);t.setAttributeNS(null,"preserveAspectRatio",e.preserveAspectRatio);t.setAttribute("xmlns","http://www.w3.org/2000/svg");return t};e.fn.lazylinepainter=function(e){if(s[e]){return s[e].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof e==="object"||!e){return s.init.apply(this,arguments)}else{}}})(jQuery,window) |