From f0abd9f8abafba32d970fa5a408681830bed51e5 Mon Sep 17 00:00:00 2001 From: cam o'connell Date: Sat, 12 Sep 2015 17:40:41 +1200 Subject: [PATCH] strokeDash is back! --- README.md | 40 ++++++++++------------------- jquery.lazylinepainter-1.6.3.js | 45 ++++++++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index ad7d536..7a0f20a 100755 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ A jQuery plugin for path animation using CSS. ## Getting started Implementing this plugin is broken into two parts. -Preparing your web-friendly data & Configuring lazy-line-painter.js +Preparing your svg data & Configuring lazy-line-painter.js **Preparing your SVG data**
@@ -26,7 +26,7 @@ Copy lazy line code and paste into your DOM ready function. **Configuring lazy-line-painter options**
-A number of attributes can be setup before the line art is Painted, +Style attributes, callbacks and other options can be setup before the line art is Painted, these include; ```js 'strokeWidth' // Adjust width of stroke @@ -34,11 +34,14 @@ these include; 'strokeCap' // Adjust stroke cap - butt | round | square 'strokeJoin' // Adjust stroke join - miter | round | bevel 'strokeOpacity' // Adjust stroke opacity 0 - 1 +'strokeDash' // Adjust stroke dash - '5, 5' + 'onComplete' // Callback fired after animation finishes 'onUpdate' // Callback fired on animation update 'onStart' // Callback fired before animation starts 'onStrokeStart' // Callback fires after each stroke animation starts 'onStrokeComplete' // Callback fires after each stroke animation completes + 'delay' // Delay before animation starts 'overrideKey' // Set this property if you selector id doesn't match the key referencing your path data value within svgData. 'speedMultiplier' // slow down or speed up the animation @@ -68,22 +71,21 @@ var svgData = { 'paths' : // this contains all your SVG path info [ { - 'path': "M144.869,199c0....", // path string , - 'duration':300, // time taken to animate that path - 'strokeColor':'#000000', // stroke color can be set individually - 'strokeWidth':3 // stroke width can be set individually + 'path': "M144.869,199c0....", // path string + 'duration':300, // path duration + 'strokeWidth': 3, // all style attr can be set individually 'reverse': true // reverse stroke individually - 'ease': '' // ease stroke individually - i.e 'easeInOutExpo', 'easeOutBounce' - 'onStrokeStart': function(){console.log("Stroke started")} // Callback fires after the stroke animation starts - 'onStrokeComplete': function(){console.log("Stroke completed")} // Callback fires after the stroke - 'onStrokeUpdate': function(){console.log("Stroke update")} // Callback fires during the stroke animation + 'ease': 'easeInOutExpo' // ease stroke individually + 'onStrokeStart': function(){console.log("Stroke started")} + 'onStrokeComplete': function(){console.log("Stroke completed")} + 'onStrokeUpdate': function(){console.log("Stroke update")} }, { 'path': "M155.85,29c0...." 'duration':1000 }, { etc ... ], - 'dimensions' : // dimensions of element + 'dimensions' : // dimensions of viewbox { 'width': 270, 'height':266 @@ -155,18 +157,4 @@ $('#demo').lazylinepainter('destroy'); ## Author [http://camoconnell.com/](http://camoconnell.com/)
-camoconnell@gmail.com - - - -## Contributors -Many thats to;
- -- saeedseyfi / 0lumide - * 1.6.1 additions - -- [Jamie Perkins](http://inorganik.github.io) - * 1.5.0 additions - -- Matt Kemp - * specify strokeWidth and strokeColor on a per-path basis. \ No newline at end of file +camoconnell@gmail.com \ No newline at end of file diff --git a/jquery.lazylinepainter-1.6.3.js b/jquery.lazylinepainter-1.6.3.js index 7a62c19..74d491e 100644 --- a/jquery.lazylinepainter-1.6.3.js +++ b/jquery.lazylinepainter-1.6.3.js @@ -12,6 +12,7 @@ * */ + /* * * TERMS OF USE - EASING EQUATIONS @@ -45,6 +46,7 @@ * */ + (function($) { 'use strict'; @@ -79,6 +81,7 @@ 'height': null, 'strokeWidth': 2, + 'strokeDash': null, 'strokeColor': '#000', 'strokeOverColor': null, 'strokeCap': 'round', @@ -160,7 +163,7 @@ }); }; - el.style.strokeDasharray = length + ' ' + length; + el.style.strokeDasharray = _getStrokeDashArray(path, options, length); el.style.strokeDashoffset = length; el.style.display = 'block'; el.getBoundingClientRect(); @@ -620,6 +623,46 @@ }; + /** + * _getStrokeDashArray + * @private + */ + var _getStrokeDashArray = function(path, options, length) { + var strokeDash; + if (path.strokeDash) { + strokeDash = _getStrokeDashString(path.strokeDash, length); + } else if (options.strokeDash) { + strokeDash = _getStrokeDashString(options.strokeDash, length); + } else { + strokeDash = length + ' ' + length; + }; + return strokeDash; + }; + + + /** + * _getStrokeDashString + * @private + */ + var _getStrokeDashString = function(dashArray, length) { + var strokeDashString = ''; + var strokeDashArray = dashArray.split(','); + var strokeDashTotal = 0; + var strokeDashNum; + var strokeDashRemainder; + for (var i = strokeDashArray.length - 1; i >= 0; i--) { + strokeDashTotal += Number(strokeDashArray[i]); + }; + strokeDashNum = Math.floor(length / strokeDashTotal); + strokeDashRemainder = length - (strokeDashNum * strokeDashTotal); + for (var i = strokeDashNum - 1; i >= 0; i--) { + strokeDashString += (dashArray + ', '); + }; + var preArray = strokeDashString + strokeDashRemainder + ', ' + length; + return preArray.split(',').join('px,') + 'px'; + }; + + /** * lazylinepainter * Extends jQuery's prototype object.