deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

SVG Plugin added draw (stroke animations) support for additional elements: <line>, <circle>, <rect>, <polygon> and <polyline>.

Browse source 
https://github.com/thednp/kute.js/issues/28
This commit is contained in:
thednp 2016-08-20 15:58:30 +03:00
parent 3d8fadde3e
commit f121972947
3 changed files with 98 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/js/svg.js
View file

@ -88,10 +88,36 @@ var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {durat
var draw4 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw5 = KUTE.fromTo('#drawSVG',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw11 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw21 = KUTE.fromTo('#drawSVG1',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw31 = KUTE.fromTo('#drawSVG1',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw41 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw51 = KUTE.fromTo('#drawSVG1',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw12 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw22 = KUTE.fromTo('#drawSVG2',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw32 = KUTE.fromTo('#drawSVG2',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw42 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw52 = KUTE.fromTo('#drawSVG2',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw13 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw23 = KUTE.fromTo('#drawSVG3',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw33 = KUTE.fromTo('#drawSVG3',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw43 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw53 = KUTE.fromTo('#drawSVG3',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
draw11.chain(draw21); draw21.chain(draw31); draw31.chain(draw41); draw41.chain(draw51);
draw12.chain(draw22); draw22.chain(draw32); draw32.chain(draw42); draw42.chain(draw52);
draw13.chain(draw23); draw23.chain(draw33); draw33.chain(draw43); draw43.chain(draw53);
drawBtn.addEventListener('click', function(){
!draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start();
if ( !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing ) {
draw1.start();
draw11.start();
draw12.start();
draw13.start();
}
}, false);

67
src/kute-svg.js
View file

@ -258,7 +258,7 @@
// SVG DRAW
S.gDr = function(e,v){
var l = e.getTotalLength(), start, end, d, o;
var l = /path|glyph/.test(e.tagName) ? e.getTotalLength() : S.gL(e), start, end, d, o;
if ( v instanceof Object ) {
return v;
} else if (typeof v === 'string') {
@ -352,9 +352,72 @@
}
}
K.prS[p] = function(el,p,v){
return K.gCS(el,p) || 0;
return K.gCS(el,p) || 0;
}
}
// SVG DRAW UTILITITES
S.gL = function(el){ // getLength - returns the result of any of the below functions
if (/rect/.test(el.tagName)) {
return S.gRL(el);
} else if (/circle/.test(el.tagName)) {
return S.gCL(el);
} else if (/polygon|polyline/.test(el.tagName)) {
return S.gPL(el);
} else if (/line/.test(el.tagName)) {
return S.gLL(el);
}
}
S.gRL = function(el){ // getRectLength - return the length of a Rect
var w = el.getAttribute('width');
var h = el.getAttribute('height');
return (w*2)+(h*2);
}
S.gPL = function(el){ // getPolygonLength - return the length of the Polygon / Polyline
var points = el.getAttribute('points').split(' '), len = 0;
if (points.length > 1) {
function coord(p) {
var c = p.split(',');
if (c.length != 2) {
return; // return undefined
}
if (isNaN(c[0]) || isNaN(c[1])) {
return;
}
return [parseFloat(c[0]), parseFloat(c[1])];
}
function dist(c1, c2) {
if (c1 != undefined && c2 != undefined) {
return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
}
return 0;
}
if (points.length > 2) {
for (var i=0; i<points.length-1; i++) {
len += dist(coord(points[i]), coord(points[i+1]));
}
}
len += dist(coord(points[0]), coord(points[points.length-1]));
}
return len;
}
S.gLL = function(el){ // getLineLength - return the length of the line
var x1 = el.getAttribute('x1');
var x2 = el.getAttribute('x2');
var y1 = el.getAttribute('y1');
var y2 = el.getAttribute('y2');
return Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
}
S.gCL = function(el){ // getCircleLength - return the length of the circle
var r = el.getAttribute('r');
return 2 * Math.PI * r;
}
return S;
}));

10
svg.html
View file

@ -288,7 +288,7 @@ var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, {
</ul>
<h3>Drawing Stroke</h3>
<p>Next, we're going to animate the stroke of a <code>&lt;path></code> element, as this type of animation only works with this kind of SVG elements because it's the only one that supports the <code>.getTotalLength()</code> method. Here some code examples:</p>
<p>Next, we're going to animate the stroke of some elements. Starting with KUTE.js version 1.5.2, along <code>&lt;path></code> element, <code>&lt;circle></code>, <code>&lt;rect></code>, <code>&lt;line></code>, <code>&lt;polyline></code> and <code>&lt;polygon></code> elements are supported, as <code>&lt;path></code> uses the SVG standard <code>.getTotalLength()</code> method, while the others use some helper methods. Here some code examples:</p>
<pre><code class="language-javascript">// draw the stroke from 0-10% to 90-100%
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
@ -300,10 +300,12 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
</code></pre>
<p>We're gonna chain these tweens and start the animation real quick.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<svg style="width:600px" class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2046 513">
<path fill="none" style="stroke:#2196F3; stroke-width:10; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
</svg>
<circle fill="none" r="220" cx="780" cy="255" style="stroke:#4CAF50; stroke-width:10; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG1"/>
<rect fill="none" width="430" height="430" x="1070" y="30" style="stroke:#FF5722; stroke-width:10; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG2"/>
<polygon fill="none" points="1579,307 1623,117 1801,33 1978,117 2022,307 1899,460 1702,460 1579,307" style="stroke:#673AB7; stroke-width:10; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG3"/>
</svg>
<div class="example-buttons">
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>