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

Added support for stroking animation via draw for <ellipse>, some demo improvements.

Browse source
This commit is contained in:
thednp 2016-08-21 00:11:42 +03:00
parent dfa70cd629
commit 7d44719816
3 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/js/svg.js
View file

@ -85,11 +85,11 @@ var drawBtn = document.getElementById('drawBtn');
var drawExample = document.getElementById('draw-example');
var drawEls = drawExample.querySelectorAll('*');
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250});
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250});
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);

16
src/kute-svg.js
View file

@ -32,8 +32,7 @@
if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return
// SVG MORPH
// get path d attribute or create a path from string value
S.gPt = function(e){
S.gPt = function(e){ // get path d attribute or create a path from string value
var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
if ( el && /path|glyph/.test(el.tagName) ) {
p.e = S.fPt(el);
@ -205,7 +204,7 @@
return a;
}
S.pTA = function(p) { // simple pathToAbsolute for polygons
S.pTA = function(p) { // simple pathToAbsolute for polygons | this is still a work in progress
var np = p.match(pathReg), wp = [], l = np.length, s, c, r, x = 0, y = 0;
for (var i = 0; i<l; i++){
np[i] = np[i]; c = np[i][0]; r = new RegExp(c+'[^\\d|\\-]*','i');
@ -301,8 +300,7 @@
return S.gDr(el)
}
// SVG CSS Properties
for ( var i = 0, l = _cls.length; i< l; i++) {
for ( var i = 0, l = _cls.length; i< l; i++) { // SVG CSS Color Properties
p = _cls[i];
K.pp[p] = function(p,v){
if (!(p in K.dom)) {
@ -362,6 +360,8 @@
return S.gRL(el);
} else if (/circle/.test(el.tagName)) {
return S.gCL(el);
} else if (/ellipse/.test(el.tagName)) {
return S.gEL(el);
} else if (/polygon|polyline/.test(el.tagName)) {
return S.gPL(el);
} else if (/line/.test(el.tagName)) {
@ -417,6 +417,12 @@
S.gCL = function(el){ // getCircleLength - return the length of the circle
var r = el.getAttribute('r');
return 2 * Math.PI * r;
}
S.gEL = function(el) { // getEllipseLength - returns the length of an ellipse
var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'),
len = 2*rx, wid = 2*ry;
return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
}
return S;

11
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 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>
<p>Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <code>&lt;path></code> shapes, <code>&lt;circle></code>, <code>&lt;ellipse></code>, <code>&lt;rect></code>, <code>&lt;line></code>, <code>&lt;polyline></code> and <code>&lt;polygon></code> shapes are also supported; the script uses the SVG standard <code>.getTotalLength()</code> method for <code>&lt;path></code> shapes, 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%'});
@ -301,10 +301,11 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
<p>We're gonna chain these tweens and start the animation real quick.</p>
<div class="featurettes">
<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"/>
<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"/>
<path fill="none" style="stroke:#2196F3; stroke-width:20; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
<circle fill="none" r="220" cx="780" cy="255" style="stroke:#4CAF50; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG1"/>
<ellipse fill="none" rx="220" ry="100" cx="780" cy="255" style="stroke:#55c55a; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG11"/>
<rect fill="none" width="430" height="430" x="1070" y="30" style="stroke:#FF5722; stroke-width:20; 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:20; 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>