From 0a373e03ee285d7a4bf975eb9a0ea9b558e083ce Mon Sep 17 00:00:00 2001 From: cam o'connell Date: Sat, 12 Sep 2015 17:57:04 +1200 Subject: [PATCH] 1.7.0 --- README.md | 9 ++- bower.json | 4 +- examples/api.html | 2 +- examples/basic.html | 2 +- examples/callbacks.html | 2 +- examples/get.html | 4 +- examples/set.html | 4 +- jquery.lazylinepainter-1.6.3.min.js | 62 ----------------- ....6.3.js => jquery.lazylinepainter-1.7.0.js | 0 jquery.lazylinepainter-1.7.0.min.js | 67 +++++++++++++++++++ 10 files changed, 81 insertions(+), 75 deletions(-) delete mode 100644 jquery.lazylinepainter-1.6.3.min.js rename jquery.lazylinepainter-1.6.3.js => jquery.lazylinepainter-1.7.0.js (100%) create mode 100644 jquery.lazylinepainter-1.7.0.min.js diff --git a/README.md b/README.md index 7a0f20a..3ead4f3 100755 --- a/README.md +++ b/README.md @@ -141,11 +141,10 @@ $('#demo').lazylinepainter('destroy'); ## Changelog -**Lazylinepainter 1.6.3** -- added `api` example -- removed outdated responsive option - [issue #37](https://github.com/camoconnell/lazy-line-painter/issues/37) -- pauseResume fix - [issue #44](https://github.com/camoconnell/lazy-line-painter/issues/44) -- overrideKey fix - [issue #38](https://github.com/camoconnell/lazy-line-painter/issues/38) +**Lazylinepainter 1.7.0** +- Added strokeDash attribute +- Added easing!! ease individual paths or the entire animation +- `pauseResume` toggling function now separarted into `pause` / `resume` functions *Refer to [Release notes](https://github.com/camoconnell/lazy-line-painter/releases) for entire Changelog* diff --git a/bower.json b/bower.json index cf797d8..28710c0 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,12 @@ { "name": "lazy-line-painter", - "version": "1.6.3", + "version": "1.7.0", "homepage": "https://github.com/camoconnell/lazy-line-painter", "authors": [ "cam o'connell" ], "description": "A Jquery plugin for svg path animation using CSS.", - "main": "jquery.lazylinepainter-1.6.3.js", + "main": "jquery.lazylinepainter-1.7.0.js", "keywords": [ "svg", "css", diff --git a/examples/api.html b/examples/api.html index 62cf4b9..e4300cb 100644 --- a/examples/api.html +++ b/examples/api.html @@ -23,7 +23,7 @@ - + diff --git a/examples/basic.html b/examples/basic.html index 1eff8b8..507dfed 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -16,7 +16,7 @@ - + diff --git a/examples/callbacks.html b/examples/callbacks.html index d944bda..deee9b9 100644 --- a/examples/callbacks.html +++ b/examples/callbacks.html @@ -16,7 +16,7 @@ - + - + + + - - + + diff --git a/jquery.lazylinepainter-1.6.3.min.js b/jquery.lazylinepainter-1.6.3.min.js deleted file mode 100644 index f7c0cc1..0000000 --- a/jquery.lazylinepainter-1.6.3.min.js +++ /dev/null @@ -1,62 +0,0 @@ -/* - * Lazy Line Painter - * SVG Stroke animation. - * - * https://github.com/camoconnell/lazy-line-painter - * http://www.camoconnell.com - * - * Licensed under the MIT license. - * - */ - -/* - * - * TERMS OF USE - EASING EQUATIONS - * - * Open source under the BSD License. - * - * Copyright © 2001 Robert Penner - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without modification, - * are permitted provided that the following conditions are met: - * - * Redistributions of source code must retain the above copyright notice, this list of - * conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above copyright notice, this list - * of conditions and the following disclaimer in the documentation and/or other materials - * provided with the distribution. - * - * Neither the name of the author nor the names of contributors may be used to endorse - * or promote products derived from this software without specific prior written permission. - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF - * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE - * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE - * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED - * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING - * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED - * OF THE POSSIBILITY OF SUCH DAMAGE. - * - */ - - -(function(k){var r={init:function(a){return this.each(function(){var c=k(this),b=c.data("lazyLinePainter");c.addClass("lazylinepainter");if(!b){var b=k.extend({width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeOverColor:null,strokeCap:"round",strokeJoin:"round",strokeOpacity:1,onComplete:null,onUpdate:null,onStart:null,onStrokeStart:null,onStrokeComplete:null,delay:0,ease:null,overrideKey:null,drawSequential:!0,speedMultiplier:1,reverse:!1,paused:!1},a),d=b.overrideKey?b.overrideKey:c.attr("id").replace("#", -""),e=b.svgData[d].dimensions.width,f=b.svgData[d].dimensions.height;b.paths=k.extend(!0,[],b.svgData[d].strokepath);null===b.width&&(b.width=e);null===b.height&&(b.height=f);d="0 0 "+e+" "+f;e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttributeNS(null,"viewBox",d);e.setAttribute("xmlns","http://www.w3.org/2000/svg");d=k(e);b.svg=d;c.append(b.svg);b.longestDuration=0;for(var g=b.playhead=0,e=d=b.delay*b.speedMultiplier,f=f=0;fb.longestDuration&&(b.longestDuration=g);var p= -g/e,m=b.reverse?m-g:b.playhead+d,q=m/e;h.duration=g;h.startTime=m;h.startProgress=q;h.durationProgress=p;h.progress=0;h.el=l;h.index=f;h.length=n;h.ease=h.ease||null;h.onStrokeStart=h.onStrokeStart||null;h.onStrokeComplete=h.onStrokeComplete||null;h.onStrokeStartDone=!1;h.onStrokeCompleteDone=!1;h.onStrokeUpdate=h.onStrokeUpdate||null;b.playhead+=g}b.totalDuration=b.drawSequential?b.playhead:b.longestDuration;b.totalDuration+=d;c.data("lazyLinePainter",b);c.lazylinepainter("resize")}})},paint:function(){return this.each(function(){var a= -k(this),c=a.data("lazyLinePainter");a.lazylinepainter("erase");c.rAF=requestAnimationFrame(function(a){p(a,c)});if(null!==c.onStart)c.onStart()})},pauseResume:function(){return this.each(function(){var a=k(this).data("lazyLinePainter");a.paused?(a.paused=!1,requestAnimationFrame(function(c){x(c,a)})):(a.paused=!0,cancelAnimationFrame(a.rAF))})},erase:function(){return this.each(function(){var a=k(this).data("lazyLinePainter");a.startTime=null;a.elapsedTime=null;cancelAnimationFrame(a.rAF);a.onStrokeCompleteDone= -!1;a.paused=!1;for(var c=0;cc.progress)c.rAF=requestAnimationFrame(function(a){p(a,c)});else if(null!==c.onComplete)c.onComplete()},t=function(a){for(var c=0;cb.startProgress&&a.progress=b.startProgress+b.durationProgress?d=1:a.progress<=b.startProgress&&(d=0):d=a.progress;b.progress=v(1,0,d,b.ease);var d=b,e=d.progress*d.length;d.el.style.strokeDashoffset=a.reverse||d.reverse?-d.length+e:d.length-e;u(a,b);d=a;if(1===b.progress)d.onStrokeComplete&&d.drawSequential&&!b.onStrokeCompleteDone&&(d.onStrokeComplete(b), -b.onStrokeComplete||(b.onStrokeCompleteDone=!0)),b.onStrokeComplete&&d.drawSequential&&!b.onStrokeCompleteDone&&(b.onStrokeComplete(b),b.onStrokeCompleteDone=!0);else if(1E-5=a?e=1:b<=c&&(e=0);return e},u=function(a,c){var b=Math.round(c.progress*(c.length-1)),b=c.positions[b];c.position={x:a.offset.left+b.x,y:a.offset.top+b.y}},w=function(a,c){return{d:c.path,stroke:c.strokeColor?c.strokeColor:a.strokeColor,"fill-opacity":0,"stroke-opacity":c.strokeOpacity?c.strokeOpacity:a.strokeOpacity,"stroke-width":c.strokeWidth?c.strokeWidth:a.strokeWidth,"stroke-linecap":c.strokeCap?c.strokeCap:a.strokeCap,"stroke-linejoin":c.strokeJoin?c.strokeJoin:a.strokeJoin}};k.fn.lazylinepainter= -function(a){if(r[a])return r[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"!==typeof a&&a)console.log("opps - issue finding method");else return r.init.apply(this,arguments)};var m={easeLinear:function(a,c,b,d){return b*a/d+c},easeInQuad:function(a,c,b,d){return b*(a/=d)*a+c},easeOutQuad:function(a,c,b,d){return-b*(a/=d)*(a-2)+c},easeInOutQuad:function(a,c,b,d){return 1>(a/=d/2)?b/2*a*a+c:-b/2*(--a*(a-2)-1)+c},easeInCubic:function(a,c,b,d){return b*(a/=d)*a*a+c},easeOutCubic:function(a, -c,b,d){return b*((a=a/d-1)*a*a+1)+c},easeInOutCubic:function(a,c,b,d){return 1>(a/=d/2)?b/2*a*a*a+c:b/2*((a-=2)*a*a+2)+c},easeInQuart:function(a,c,b,d){return b*(a/=d)*a*a*a+c},easeOutQuart:function(a,c,b,d){return-b*((a=a/d-1)*a*a*a-1)+c},easeInOutQuart:function(a,c,b,d){return 1>(a/=d/2)?b/2*a*a*a*a+c:-b/2*((a-=2)*a*a*a-2)+c},easeInQuint:function(a,c,b,d){return b*(a/=d)*a*a*a*a+c},easeOutQuint:function(a,c,b,d){return b*((a=a/d-1)*a*a*a*a+1)+c},easeInOutQuint:function(a,c,b,d){return 1>(a/=d/2)? -b/2*a*a*a*a*a+c:b/2*((a-=2)*a*a*a*a+2)+c},easeInSine:function(a,c,b,d){return-b*Math.cos(a/d*(Math.PI/2))+b+c},easeOutSine:function(a,c,b,d){return b*Math.sin(a/d*(Math.PI/2))+c},easeInOutSine:function(a,c,b,d){return-b/2*(Math.cos(Math.PI*a/d)-1)+c},easeInExpo:function(a,c,b,d){return 0==a?c:b*Math.pow(2,10*(a/d-1))+c},easeOutExpo:function(a,c,b,d){return a==d?c+b:b*(-Math.pow(2,-10*a/d)+1)+c},easeInOutExpo:function(a,c,b,d){return 0==a?c:a==d?c+b:1>(a/=d/2)?b/2*Math.pow(2,10*(a-1))+c:b/2*(-Math.pow(2, --10*--a)+2)+c},easeInCirc:function(a,c,b,d){return-b*(Math.sqrt(1-(a/=d)*a)-1)+c},easeOutCirc:function(a,c,b,d){return b*Math.sqrt(1-(a=a/d-1)*a)+c},easeInOutCirc:function(a,c,b,d){return 1>(a/=d/2)?-b/2*(Math.sqrt(1-a*a)-1)+c:b/2*(Math.sqrt(1-(a-=2)*a)+1)+c},easeInElastic:function(a,c,b,d){var e=1.70158,f=0,g=b;if(0==a)return c;if(1==(a/=d))return c+b;f||(f=.3*d);ga?-.5*g*Math.pow(2,10*--a)*Math.sin(2*(a*d-e)*Math.PI/f)+c:g*Math.pow(2,-10*--a)*Math.sin(2*(a*d-e)*Math.PI/f)*.5+b+c}, -easeInBack:function(a,c,b,d,e){void 0==e&&(e=1.70158);return b*(a/=d)*a*((e+1)*a-e)+c},easeOutBack:function(a,c,b,d,e){void 0==e&&(e=1.70158);return b*((a=a/d-1)*a*((e+1)*a+e)+1)+c},easeInOutBack:function(a,c,b,d,e){void 0==e&&(e=1.70158);return 1>(a/=d/2)?b/2*a*a*(((e*=1.525)+1)*a-e)+c:b/2*((a-=2)*a*(((e*=1.525)+1)*a+e)+2)+c},easeInBounce:function(a,c,b,d){return b-m.easeOutBounce(d-a,0,b,d)+c},easeOutBounce:function(a,c,b,d){return(a/=d)<1/2.75?7.5625*b*a*a+c:a<2/2.75?b*(7.5625*(a-=1.5/2.75)*a+ -.75)+c:a<2.5/2.75?b*(7.5625*(a-=2.25/2.75)*a+.9375)+c:b*(7.5625*(a-=2.625/2.75)*a+.984375)+c},easeInOutBounce:function(a,c,b,d){return ab.longestDuration&&(b.longestDuration=g);q=g/e;m=b.reverse?m-g:b.playhead+d;n=m/e;h.duration=g;h.startTime=m;h.startProgress=n;h.durationProgress=q;h.progress=0;h.el=l;h.index=f;h.length=p;h.ease=h.ease||null;h.onStrokeStart=h.onStrokeStart||null;h.onStrokeComplete=h.onStrokeComplete||null;h.onStrokeStartDone=!1;h.onStrokeCompleteDone=!1;h.onStrokeUpdate=h.onStrokeUpdate||null;b.playhead+=g}b.totalDuration=b.drawSequential? +b.playhead:b.longestDuration;b.totalDuration+=d;c.data("lazyLinePainter",b);c.lazylinepainter("resize")}})},paint:function(){return this.each(function(){var a=k(this),c=a.data("lazyLinePainter");a.lazylinepainter("erase");c.rAF=requestAnimationFrame(function(a){r(a,c)});if(null!==c.onStart)c.onStart()})},pause:function(){return this.each(function(){var a=k(this).data("lazyLinePainter");a.paused||(a.paused=!0,cancelAnimationFrame(a.rAF))})},resume:function(){return this.each(function(){var a=k(this).data("lazyLinePainter"); +a.paused&&(requestAnimationFrame(function(c){z(c,a)}),a.paused=!1)})},erase:function(){return this.each(function(){var a=k(this).data("lazyLinePainter");a.startTime=null;a.elapsedTime=null;cancelAnimationFrame(a.rAF);a.onStrokeCompleteDone=!1;a.paused=!1;for(var c=0;cc.progress)c.rAF=requestAnimationFrame(function(a){r(a,c)});else if(null!==c.onComplete)c.onComplete()},v=function(a){for(var c=0;cb.startProgress&&a.progress=b.startProgress+b.durationProgress?d=1:a.progress<=b.startProgress&&(d=0):d=a.progress;b.progress= +x(1,0,d,b.ease);var d=b,e=d.progress*d.length;d.el.style.strokeDashoffset=a.reverse||d.reverse?-d.length+e:d.length-e;w(a,b);d=a;if(1===b.progress)d.onStrokeComplete&&d.drawSequential&&!b.onStrokeCompleteDone&&(d.onStrokeComplete(b),b.onStrokeComplete||(b.onStrokeCompleteDone=!0)),b.onStrokeComplete&&d.drawSequential&&!b.onStrokeCompleteDone&&(b.onStrokeComplete(b),b.onStrokeCompleteDone=!0);else if(1E-5=a?e=1:b<=c&&(e=0);return e},w=function(a,c){var b=Math.round(c.progress*(c.length-1)),b=c.positions[b];c.position={x:a.offset.left+b.x,y:a.offset.top+b.y}},y=function(a,c){return{d:c.path,stroke:c.strokeColor?c.strokeColor:a.strokeColor,"fill-opacity":0,"stroke-opacity":c.strokeOpacity? +c.strokeOpacity:a.strokeOpacity,"stroke-width":c.strokeWidth?c.strokeWidth:a.strokeWidth,"stroke-linecap":c.strokeCap?c.strokeCap:a.strokeCap,"stroke-linejoin":c.strokeJoin?c.strokeJoin:a.strokeJoin}},u=function(a,c){for(var b="",d=a.split(","),e=0,f=d.length-1;0<=f;f--)e+=Number(d[f]);d=Math.floor(c/e);for(f=d-1;0<=f;f--)b+=a+", ";return(b+(c-d*e)+", "+c).split(",").join("px,")+"px"};k.fn.lazylinepainter=function(a){if(t[a])return t[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"!== +typeof a&&a)console.log("opps - issue finding method");else return t.init.apply(this,arguments)};var m={easeLinear:function(a,c,b,d){return b*a/d+c},easeInQuad:function(a,c,b,d){return b*(a/=d)*a+c},easeOutQuad:function(a,c,b,d){return-b*(a/=d)*(a-2)+c},easeInOutQuad:function(a,c,b,d){return 1>(a/=d/2)?b/2*a*a+c:-b/2*(--a*(a-2)-1)+c},easeInCubic:function(a,c,b,d){return b*(a/=d)*a*a+c},easeOutCubic:function(a,c,b,d){return b*((a=a/d-1)*a*a+1)+c},easeInOutCubic:function(a,c,b,d){return 1>(a/=d/2)? +b/2*a*a*a+c:b/2*((a-=2)*a*a+2)+c},easeInQuart:function(a,c,b,d){return b*(a/=d)*a*a*a+c},easeOutQuart:function(a,c,b,d){return-b*((a=a/d-1)*a*a*a-1)+c},easeInOutQuart:function(a,c,b,d){return 1>(a/=d/2)?b/2*a*a*a*a+c:-b/2*((a-=2)*a*a*a-2)+c},easeInQuint:function(a,c,b,d){return b*(a/=d)*a*a*a*a+c},easeOutQuint:function(a,c,b,d){return b*((a=a/d-1)*a*a*a*a+1)+c},easeInOutQuint:function(a,c,b,d){return 1>(a/=d/2)?b/2*a*a*a*a*a+c:b/2*((a-=2)*a*a*a*a+2)+c},easeInSine:function(a,c,b,d){return-b*Math.cos(a/ +d*(Math.PI/2))+b+c},easeOutSine:function(a,c,b,d){return b*Math.sin(a/d*(Math.PI/2))+c},easeInOutSine:function(a,c,b,d){return-b/2*(Math.cos(Math.PI*a/d)-1)+c},easeInExpo:function(a,c,b,d){return 0==a?c:b*Math.pow(2,10*(a/d-1))+c},easeOutExpo:function(a,c,b,d){return a==d?c+b:b*(-Math.pow(2,-10*a/d)+1)+c},easeInOutExpo:function(a,c,b,d){return 0==a?c:a==d?c+b:1>(a/=d/2)?b/2*Math.pow(2,10*(a-1))+c:b/2*(-Math.pow(2,-10*--a)+2)+c},easeInCirc:function(a,c,b,d){return-b*(Math.sqrt(1-(a/=d)*a)-1)+c},easeOutCirc:function(a, +c,b,d){return b*Math.sqrt(1-(a=a/d-1)*a)+c},easeInOutCirc:function(a,c,b,d){return 1>(a/=d/2)?-b/2*(Math.sqrt(1-a*a)-1)+c:b/2*(Math.sqrt(1-(a-=2)*a)+1)+c},easeInElastic:function(a,c,b,d){var e=1.70158,f=0,g=b;if(0==a)return c;if(1==(a/=d))return c+b;f||(f=.3*d);ga?-.5*g*Math.pow(2,10*--a)*Math.sin(2*(a*d-e)*Math.PI/f)+c:g*Math.pow(2,-10*--a)*Math.sin(2*(a*d-e)*Math.PI/f)*.5+b+c},easeInBack:function(a,c,b,d,e){void 0==e&&(e=1.70158);return b*(a/=d)*a*((e+1)*a-e)+c},easeOutBack:function(a, +c,b,d,e){void 0==e&&(e=1.70158);return b*((a=a/d-1)*a*((e+1)*a+e)+1)+c},easeInOutBack:function(a,c,b,d,e){void 0==e&&(e=1.70158);return 1>(a/=d/2)?b/2*a*a*(((e*=1.525)+1)*a-e)+c:b/2*((a-=2)*a*(((e*=1.525)+1)*a+e)+2)+c},easeInBounce:function(a,c,b,d){return b-m.easeOutBounce(d-a,0,b,d)+c},easeOutBounce:function(a,c,b,d){return(a/=d)<1/2.75?7.5625*b*a*a+c:a<2/2.75?b*(7.5625*(a-=1.5/2.75)*a+.75)+c:a<2.5/2.75?b*(7.5625*(a-=2.25/2.75)*a+.9375)+c:b*(7.5625*(a-=2.625/2.75)*a+.984375)+c},easeInOutBounce:function(a, +c,b,d){return a