diff --git a/jquery.lazylinepainter-1.4.1.js b/jquery.lazylinepainter-1.4.1.js deleted file mode 100644 index e741841..0000000 --- a/jquery.lazylinepainter-1.4.1.js +++ /dev/null @@ -1,311 +0,0 @@ -/* -* Lazy Line Painter 1.4.1 -* SVG Stroke animation. -* -* https://github.com/camoconnell/lazy-line-painter -* http://www.camoconnell.com -* -* Copyright 2013 Cam O'Connell -* Licensed under the MIT license. -* -*/ - -(function( $, window, undefined ){ - - var dataKey = 'lazyLinePainter'; - - var methods = { - - - // setup lazy line data - init : function( options ) { - - return this.each(function(){ - - var $this = $(this), - d = $this.data( dataKey ); - - $this.addClass('lazy-line'); - - // If the plugin hasn't been initialized yet - if ( ! d ) { - - /* - SETUP DATA - */ - - // Collect settings, define defaults - var o = $.extend( { - 'width' : null, - 'height' : null, - 'strokeWidth' : 2, - 'strokeColor' : '#000', - 'strokeCap' : 'round', - 'strokeJoin' : 'round', - 'strokeOpacity' : 1, - 'strokeDash' : null, - 'onComplete' : null, - 'delay' : null, - 'overrideKey' : null - }, options); - - // Set up path information - // if overrideKey has been defined - use overrideKey as key within the svgData object. - // else - use the elements id as key within the svgData object. - var target = ( o.overrideKey === null ) ? $this.attr('id').replace('#','') : o.overrideKey; - - var $w = o.svgData[target].dimensions.width, - $h = o.svgData[target].dimensions.height; - - o.svgData = o.svgData[target].strokepath; - - // Setup dimensions - if( o.width === null ) o.width = $w; - if( o.height === null ) o.height = $h; - - // Setup Rapheal - var $s = $this.attr("id"); // Requires Id - var paper = new Raphael($s, $w, $h); - - - /* - BIND DATA TO ELEMENT - */ - - $this.data( dataKey , { - 'svgData' : o.svgData, - 'width' : o.width, - 'height' : o.height, - 'strokeWidth' : o.strokeWidth, - 'strokeColor' : o.strokeColor, - 'strokeCap' : o.strokeCap, - 'strokeJoin' : o.strokeJoin, - 'strokeOpacity' : o.strokeOpacity, - 'strokeDash' : o.strokeDash, - 'onComplete' : o.onComplete, - 'delay' : o.delay, - 'overrideKey' : o.overrideKey, - 'paper' : paper, - 'count' : 1, - 'complete' : false, - 'playhead' : 0, - 'setTimeOutHandler' : [] - }); - } - }); - - }, - - - /* - PAINT LAZY LINE DATA - */ - paint : function( ) { - - return this.each(function(){ - - var $this = $(this), - d = $this.data( dataKey ); - - var init = function(){ - - // Set width / height of container element - $this.css({'width' : d.width, 'height' : d.height}); - - // Loop paths - $.each(d.svgData, function (i, val) { - - var p = d.paper.path(val.path); - - p.attr({ - "stroke" : "none", - "stroke-width": d.strokeWidth, - "fill-opacity": 0 - }); - - var sto = setTimeout(function () { - var s = draw({ - 'count' : d.count, - 'canvas' : d.paper, - 'pathstr' : p, - 'duration' : val.duration, - 'attr' : applyStyles( d, val ), - 'callback' : function (e) { - - // remove reference to setTimeOut - d.setTimeOutHandler.splice(d.count,1); - - d.count++; - - if ((d.svgData.length+1) == d.count){ - d.complete = true; - if(d.onComplete !== null) d.onComplete.call($this); - } - } - }); - - }, d.playhead); - - d.playhead += val.duration; - - // Keep track of setTimeOuts calls - d.setTimeOutHandler.push(sto); - - }); - }; - - - // if delay isset - if(d.delay === null) - init(); - else - setTimeout(init, d.delay); - }); - }, - - - /* - ERASE LAZY LINE DATA - */ - erase : function( ) { - - return this.each(function(){ - - var $this = $(this); - $this.find('svg').empty(); - d = $this.data( dataKey ); - - // reset properties - for (i = 0; i < d.setTimeOutHandler.length; i++) { - clearTimeout( d.setTimeOutHandler[i] ); - } - - d.playhead = 0; - d.count = 0; - d.complete = false; - }); - }, - - - /* - DESTROY LAZY LINE DATA & ELEMENT - */ - destroy : function( ) { - - return this.each(function(){ - - var $this = $(this), - d = $this.data( dataKey ); - $this.removeData( dataKey ); - $this.remove(); - }); - }, - - - /* - STAMP LAZY LINE DATA - */ - stamp : function( ) { - - return this.each(function(){ - - var $this = $(this), - d = $this.data( dataKey ); - - var init = function(){ - - // Set width / height of container element - $this.css({'width' : d.width, 'height' : d.height}); - - // Loop paths - //$.each(d.svgData, function (i, val) { - for (i = 0; i < d.svgData.length; i++) { - d.paper.path( d.svgData[i].path ).attr( applyStyles( d, d.svgData[i] ) ); - } - - }; - - // if delay isset - if(d.delay === null) - init(); - else - setTimeout(init, d.delay); - }); - } - }; - - - - var applyStyles = function( data, value ) { - - var styles = { - "stroke" : ( !value.strokeColor ) ? data.strokeColor : value.strokeColor, - "fill-opacity" : 0, - "stroke-dasharray": ( !value.strokeDash ) ? data.strokeDash : value.strokeDash, - "stroke-opacity" : ( !value.strokeOpacity )? data.strokeOpacity : value.strokeOpacity, - "stroke-width" : ( !value.strokeWidth ) ? data.strokeWidth : value.strokeWidth, - "stroke-linecap" : ( !value.strokeCap ) ? data.strokeCap : value.strokeCap, - "stroke-linejoin" : ( !value.strokeJoin ) ? data.strokeJoin : value.strokeJoin - }; - - return styles; - }; - - - - var draw = function( settings ) { - - var canvas = settings.canvas, - pathstr = settings.pathstr, - duration = settings.duration, - attr = settings.attr, - callback = settings.callback; - - var guide_path; - - if ( typeof( pathstr ) == "string" ) - guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } ); - else - guide_path = pathstr; - - var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr ), - total_length = guide_path.getTotalLength( guide_path ), - last_point = guide_path.getPointAtLength( 0 ), - start_time = new Date().getTime(), - interval_length = 25; - - var interval_id = setInterval( function() - { - var elapsed_time = new Date().getTime() - start_time, - this_length = elapsed_time / duration * total_length, - subpathstr = guide_path.getSubpath( 0, this_length ); - - attr.path = subpathstr; - - path.animate( attr, interval_length ); - if ( elapsed_time >= duration ) - { - clearInterval( interval_id ); - if ( callback !== undefined ) callback(); - guide_path.remove(); - } - }, interval_length ); - }; - - - $.fn.lazylinepainter = function(method){ - - if ( methods[method] ) { - - return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); - - } else if ( typeof method === 'object' || ! method ) { - - return methods.init.apply( this, arguments ); - - } else { - // error - } - }; - -})( jQuery, window ); \ No newline at end of file diff --git a/jquery.lazylinepainter-1.4.1.min.js b/jquery.lazylinepainter-1.4.1.min.js deleted file mode 100644 index f5c8200..0000000 --- a/jquery.lazylinepainter-1.4.1.min.js +++ /dev/null @@ -1,18 +0,0 @@ -/* -* Lazy Line Painter 1.4.1 -* SVG Stroke animation. -* -* https://github.com/camoconnell/lazy-line-painter -* http://www.camoconnell.com -* -* Copyright 2013 Cam O'Connell -* Licensed under the MIT license. -* -*/ -(function(e,r,p){var l={init:function(c){return this.each(function(){var a=e(this),b=a.data("lazyLinePainter");a.addClass("lazy-line");if(!b){var b=e.extend({width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeCap:"round",strokeJoin:"round",strokeOpacity:1,strokeDash:null,onComplete:null,delay:null,overrideKey:null},c),h=null===b.overrideKey?a.attr("id").replace("#",""):b.overrideKey,f=b.svgData[h].dimensions.width,k=b.svgData[h].dimensions.height;b.svgData=b.svgData[h].strokepath;null=== -b.width&&(b.width=f);null===b.height&&(b.height=k);h=a.attr("id");f=new Raphael(h,f,k);a.data("lazyLinePainter",{svgData:b.svgData,width:b.width,height:b.height,strokeWidth:b.strokeWidth,strokeColor:b.strokeColor,strokeCap:b.strokeCap,strokeJoin:b.strokeJoin,strokeOpacity:b.strokeOpacity,strokeDash:b.strokeDash,onComplete:b.onComplete,delay:b.delay,overrideKey:b.overrideKey,paper:f,count:1,complete:!1,playhead:0,setTimeOutHandler:[]})}})},paint:function(){return this.each(function(){var c=e(this), -a=c.data("lazyLinePainter"),b=function(){c.css({width:a.width,height:a.height});e.each(a.svgData,function(b,f){var e=a.paper.path(f.path);e.attr({stroke:"none","stroke-width":a.strokeWidth,"fill-opacity":0});var g=setTimeout(function(){n({count:a.count,canvas:a.paper,pathstr:e,duration:f.duration,attr:m(a,f),callback:function(b){a.setTimeOutHandler.splice(a.count,1);a.count++;a.svgData.length+1==a.count&&(a.complete=!0,null!==a.onComplete&&a.onComplete.call(c))}})},a.playhead);a.playhead+=f.duration; -a.setTimeOutHandler.push(g)})};null===a.delay?b():setTimeout(b,a.delay)})},erase:function(){return this.each(function(){var c=e(this);c.find("svg").empty();d=c.data("lazyLinePainter");for(i=0;i=e&&(clearInterval(q),k!==p&&k(),g.remove())},25)};e.fn.lazylinepainter=function(c){if(l[c])return l[c].apply(this, -Array.prototype.slice.call(arguments,1));if("object"===typeof c||!c)return l.init.apply(this,arguments)}})(jQuery,window); \ No newline at end of file diff --git a/jquery.lazylinepainter-1.5.0.js b/jquery.lazylinepainter-1.5.0.js index 414635a..87a074a 100644 --- a/jquery.lazylinepainter-1.5.0.js +++ b/jquery.lazylinepainter-1.5.0.js @@ -45,11 +45,10 @@ 'delay' : null, 'overrideKey' : null, 'drawSequential': true, - 'speed' : 1 + 'speedMultiplier' : 1, + 'useRandomColors' : false }, options); - console.log(options); - // Set up path information // if overrideKey has been defined - use overrideKey as key within the svgData object. // else - use the elements id as key within the svgData object. @@ -68,31 +67,8 @@ var $s = $this.attr("id"); // Requires Id o.paper = new Raphael($s, $w, $h); - /* - BIND DATA TO ELEMENT - */ + // cache $this.data(dataKey, o); - /* - $this.data(dataKey, { - 'svgData' : o.svgData, - 'width' : o.width, - 'height' : o.height, - 'strokeWidth' : o.strokeWidth, - 'strokeColor' : o.strokeColor, - 'strokeCap' : o.strokeCap, - 'strokeJoin' : o.strokeJoin, - 'strokeOpacity' : o.strokeOpacity, - 'strokeDash' : o.strokeDash, - 'onComplete' : o.onComplete, - 'delay' : o.delay, - 'overrideKey' : o.overrideKey, - 'paper' : paper, - 'complete' : false, - 'playhead' : 0, - 'drawSequential' : o.drawSequential, - 'speedMultiplier' : o.speedMultiplier - }); - */ } }); }, @@ -108,8 +84,7 @@ $this.init = function() { - //o.stroke = randomColor(); // for dev - + // Set width / height of container element $this.css({'width' : o.width, 'height' : o.height}); @@ -121,6 +96,7 @@ var duration = val.duration * o.speedMultiplier if (duration > o.longestDuration) o.longestDuration = duration; var p = o.paper.path(val.path); + if (o.useRandomColors) o.strokeColor = randomColor(); p.attr({ 'stroke': 'none', 'fill-opacity': 0 @@ -135,7 +111,6 @@ }); o.totalDuration = (o.drawSequential) ? o.playhead : o.longestDuration; - o.rAF = requestAnimationFrame(function(timestamp) { draw(timestamp, o); }); @@ -157,12 +132,15 @@ }; // if delay isset - if (o.delay === null) + if (o.delay === null) $this.init(); - else - setTimeout($this.init, d.delay); + else + setTimeout($this.init, o.delay); }); }, + /* + TOGGLE PAUSE/RESUME ANIMATION + */ pauseResume : function() { return this.each(function() { @@ -170,12 +148,10 @@ var o = $(this).data(dataKey); if (!o.paused) { - console.log('-*- pause'); o.paused = true; cancelAnimationFrame(o.rAF); } - else { - console.log('-*- resume'); + else { o.paused = false; // resume requestAnimationFrame(function(timestamp) { @@ -256,7 +232,6 @@ var draw = function(timestamp, o) { if (o.startTime == null) o.startTime = timestamp; - // console.log('Draw -- start time: '+o.startTime); o.elapsed_time = timestamp - o.startTime; $.each(o.paths, function(i, val) { @@ -283,10 +258,6 @@ var frame_length = path_elapsed_time / val.duration * total_length; var subpathstr = guide_path.getSubpath( 0, frame_length ); - // console.log('attributes'); - // console.log(val.attr); - - console.log('draw path '+i); o.paper.path(subpathstr).attr(val.attr); } @@ -298,7 +269,6 @@ draw(timestamp, o); }); } else { - console.log('---- end'); if (o.onComplete != null) o.onComplete(); } } diff --git a/jquery.lazylinepainter-1.5.0.min.js b/jquery.lazylinepainter-1.5.0.min.js new file mode 100644 index 0000000..13a794d --- /dev/null +++ b/jquery.lazylinepainter-1.5.0.min.js @@ -0,0 +1 @@ +!function(a){var e=a(this),f="lazyLinePainter";e.methods={init:function(b){return this.each(function(){var c=a(this),d=c.data(f);if(c.addClass("lazy-line"),!d){var e=a.extend({width:null,height:null,strokeWidth:2,strokeColor:"#000",strokeCap:"round",strokeJoin:"round",strokeOpacity:1,strokeDash:null,onComplete:null,delay:null,overrideKey:null,drawSequential:!0,speedMultiplier:1,useRandomColors:!1},b),g=null===e.overrideKey?c.attr("id").replace("#",""):e.overrideKey,h=e.svgData[g].dimensions.width,i=e.svgData[g].dimensions.height;e.svgData=e.svgData[g].strokepath,null===e.width&&(e.width=h),null===e.height&&(e.height=i);var j=c.attr("id");e.paper=new Raphael(j,h,i),c.data(f,e)}})},paint:function(){return this.each(function(){var b=a(this),c=b.data(f);b.init=function(){b.css({width:c.width,height:c.height}),c.paths=[],c.longestDuration=0,c.playhead=0,a.each(c.svgData,function(a,d){var e=d.duration*c.speedMultiplier;e>c.longestDuration&&(c.longestDuration=e);var f=c.paper.path(d.path);c.useRandomColors&&(c.strokeColor=k()),f.attr({stroke:"none","fill-opacity":0}),c.paths.push({pathstr:f,duration:e,attr:b.applyStyles(d),drawStartTime:c.playhead}),c.playhead+=e}),c.totalDuration=c.drawSequential?c.playhead:c.longestDuration,c.rAF=requestAnimationFrame(function(a){h(a,c)})},b.applyStyles=function(a){var b={stroke:a.strokeColor?a.strokeColor:c.strokeColor,"fill-opacity":0,"stroke-dasharray":a.strokeDash?a.strokeDash:c.strokeDash,"stroke-opacity":a.strokeOpacity?a.strokeOpacity:c.strokeOpacity,"stroke-width":a.strokeWidth?a.strokeWidth:c.strokeWidth,"stroke-linecap":a.strokeCap?a.strokeCap:c.strokeCap,"stroke-linejoin":a.strokeJoin?a.strokeJoin:c.strokeJoin};return b},null===c.delay?b.init():setTimeout(b.init,c.delay)})},pauseResume:function(){return this.each(function(){var b=a(this).data(f);b.paused?(b.paused=!1,requestAnimationFrame(function(a){g(a,b)})):(b.paused=!0,cancelAnimationFrame(b.rAF))})},erase:function(){return this.each(function(){var b=a(this);b.find("svg").empty(),d=b.data(f),d.playhead=0,d.count=0,d.complete=!1})},destroy:function(){return this.each(function(){var b=a(this);b.data(f),b.removeData(f),b.remove()})},stamp:function(){return this.each(function(){var b=a(this),c=b.data(f),d=function(){for(b.css({width:c.width,height:c.height}),i=0;id&&(d=0)):d=c.elapsed_time,d0){var e;e="string"==typeof b.pathstr?c.paper.path(pathstr).attr({stroke:"none",fill:"none"}):b.pathstr,c.paper.path(b.pathstr).attr(b.attr);var g=e.getTotalLength(e),h=d/b.duration*g,i=e.getSubpath(0,h);c.paper.path(i).attr(b.attr)}}),c.elapsed_timec;c++){var d=Math.round(6*Math.random()),e=a.substr(d,1);b.push(e)}return"#"+b.join("")};a.fn.lazylinepainter=function(a){return e.methods[a]?e.methods[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?void 0:e.methods.init.apply(this,arguments)}}(jQuery,window); \ No newline at end of file diff --git a/rAF-polyfil.js b/rAF-polyfil.js new file mode 100644 index 0000000..a54b651 --- /dev/null +++ b/rAF-polyfil.js @@ -0,0 +1,25 @@ +// make sure requestAnimationFrame and cancelAnimationFrame are defined +// polyfill for browsers without native support +// by Opera engineer Erik Möller +var lastTime = 0; +var vendors = ['webkit', 'moz', 'ms', 'o']; +for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; +} +if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + } +} +if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + } +} \ No newline at end of file