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

Final version 1.5 commit.

Browse source
This commit is contained in:
thednp 2016-03-24 14:27:27 +02:00
parent 97b6608392
commit 2564472f53
12 changed files with 637 additions and 435 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
demo/assets/js/svg.js
View file

@ -9,7 +9,7 @@ morphBtn.addEventListener('click', function(){
}, false);
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
showMorphInfo: true, morphIndex: 79,
showMorphInfo: true, morphIndex: 73,
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
@ -18,6 +18,37 @@ morphBtn1.addEventListener('click', function(){
!morphTween1.playing && morphTween1.start();
}, false);
// polygon morph
var morphTween21 = KUTE.fromTo('#triangle', {path: '#triangle', fill: '#673AB7'}, { path: '#square', fill: '#2196F3' }, {
duration: 1500, easing: 'easingCubicOut',
});
var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', fill: '#2196F3'}, { path: '#star2', fill: 'deeppink' }, {
morphIndex: 9,
delay: 500, duration: 1500, easing: 'easingCubicOut'
});
var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', fill: 'deeppink'}, { path: '#triangle', fill: '#673AB7' }, {
delay: 500, duration: 1500, easing: 'easingCubicOut'
});
morphTween21.chain(morphTween22);
morphTween22.chain(morphTween23);
morphTween23.chain(morphTween21);
var morphBtn2 = document.getElementById('morphBtn2');
morphBtn2.addEventListener('click', function(){
if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) {
morphTween21.start(); morphTween21._dl = 500;
morphBtn2.innerHTML = 'Stop';
morphBtn2.className = 'btn btn-pink';
} else {
morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
morphTween22.playing && morphTween22.stop();
morphTween23.playing && morphTween23.stop();
morphBtn2.innerHTML = 'Start';
morphBtn2.className = 'btn btn-green';
}
}, false);
// simple multi morph
var multiMorphBtn = document.getElementById('multiMorphBtn');
@ -36,10 +67,10 @@ multiMorphBtn.addEventListener('click', function(){
// complex multi morph
var compliMorphBtn = document.getElementById('compliMorphBtn');
var compliMorph1 = KUTE.to('#rectangle-container', { path: '#circle-container', fill: "#FF5722" }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph2 = KUTE.to('#symbol-left', { path: '#eye-left', fill: "#fff" }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph3 = KUTE.to('#symbol-left-clone', { path: '#mouth', fill: "#fff" }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph4 = KUTE.to('#symbol-right', { path: '#eye-right', fill: "#fff" }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', fill: "#2196F3"}, { path: '#circle-container', fill: "#FF5722" }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left', fill: "#fff"}, { path: '#eye-left', fill: "#fff" }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone', fill: "#fff"}, { path: '#mouth', fill: "#fff" }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right', fill: "#CDDC39"}, { path: '#eye-right', fill: "#fff" }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
compliMorphBtn.addEventListener('click', function(){
!compliMorph1.playing && compliMorph1.start();
@ -56,11 +87,6 @@ var draw2 = KUTE.fromTo('#drawSVG',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration
var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
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 draw1 = KUTE.to('#drawSVG', {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
// var draw2 = KUTE.to('#drawSVG', {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
// var draw3 = KUTE.to('#drawSVG', {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
// var draw4 = KUTE.to('#drawSVG', {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
// var draw5 = KUTE.to('#drawSVG', {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);

2
demo/css.html
View file

@ -152,7 +152,7 @@ var tween3 = KUTE.to('selector1',{wordSpacing:50});
<pre><code class="language-javascript">KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
KUTE.to('selector1',{borderTopColor:'#069'}).start();
KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
KUTE.to('selector1',{borderBottomColor:'#069'}).start();
KUTE.to('selector1',{borderBottomColor:'red'}).start(); // IE9+ browsers
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
KUTE.to('selector1',{outlineColor:'#069'}).start();
</code></pre>

8
demo/extend.html
View file

@ -153,6 +153,14 @@ K.Tween.prototype.restart = function(){
}
return this;
}
// methods to queue callbacks with ease
K.Tween.prototype.onUpdate = function(){
this._uC = arguments;
return this;
}
// _sC = startCallback | _cC = completeCallback | _stC = stopCallback
// _pC = pauseCallback | _rC = resumeCallback
</code></pre>
<p>For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very secific need.</p>

12
demo/properties.html
View file

@ -92,8 +92,8 @@
<li><kbd class="bg-blue">rotate</kbd> is a property used to rotate an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. Supported on IE9.</li>
<li><kbd class="bg-blue">skewX</kbd> is a property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
<li><kbd class="bg-blue">skewY</kbd> is a property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
<li><kbd class="bg-blue">scale</kbd> is a property used to apply a size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. Supported on IE9.</li>
<li><kbd class="bg-red">matrix</kbd> property is not supported.</li>
<li><kbd class="bg-blue">scale</kbd> is a property used to apply a single value size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. Supported on IE9.</li>
<li><kbd class="bg-red">matrix</kbd>, double axis <kbd class="bg-red">skew</kbd> and double axis <kbd class="bg-red">scale</kbd> properties are not supported.</li>
</ul>
<h3>3D Transform Properties</h3>
@ -106,7 +106,7 @@
<li><kbd class="bg-blue">rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.</li>
<li><kbd class="bg-blue">rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.</li>
<li><kbd class="bg-blue">rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.</li>
<li><kbd class="bg-red">rotate3d</kbd> and <kbd class="bg-red">matrix3d</kbd> properties are not supported.</li>
<li><kbd class="bg-red">matrix3d</kbd>, <kbd class="bg-red">rotate3d</kbd>, and <kbd class="bg-red">scale3d</kbd> properties are not supported.</li>
</ul>
<h3>Box Model Properties</h3>
@ -196,7 +196,7 @@
</ul>
<h3>Did We Miss Any Important Property?</h3>
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP.</p>
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP, or you can check the <a href="extend.html">extend</a> guide and learn how to develop a plugin to support a new property yourself.</p>
</div>
<div class="content-wrap">
@ -210,12 +210,12 @@
</div>
<!-- FOOTER -->
<footer>
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</footer>
</div><!-- /.site-wrapper -->

186
demo/src/kute-svg.js
View file

@ -23,31 +23,31 @@
'use strict';
var K = window.KUTE, S = S || {}, p,
_svg = document.getElementsByTagName('path')[0],
_svg = K.selector('path') || K.selector('svg'),
_ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg',
_nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
_cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
trm = function(s){ if (!String.prototype.trim) { return s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } else { return s.trim(); }};
pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi;
if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return
// SVG MORPH
// get path d attribute or create a path with string value
S.getPath = function(e){
// get path d attribute or create a path from string value
S.gPt = function(e){
var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
if ( el && /path|glyph/.test(el.tagName) ) {
p.e = S.forcePath(el);
p.e = S.fPt(el);
p.o = el.getAttribute('d');
} else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already
var np = S.createPath(trm(e));
var np = S.cP(e.trim());
p.e = np;
p.o = e;
}
return p;
}
S.pathCross = function(w){
S.pCr = function(w){ // pathCross
// path tween options
this._mpr = w.morphPrecision || 25;
this._midx = w.morphIndex;
@ -55,24 +55,45 @@
this._rv1 = w.reverseFirstPath;
this._rv2 = w.reverseSecondPath;
var p1 = S.getOnePath(w._vS.path.o), p2 = S.getOnePath(w._vE.path.o), arr;
var p1 = S.gOp(w._vS.path.o), p2 = S.gOp(w._vE.path.o), arr;
this._isp = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // both shapes are polygons
arr = S._pathCross(p1,p2);
arr = S._pCr(p1,p2,w._el.parentNode);
w._vS.path.d = arr[0];
w._vE.path.d = arr[1];
}
S._pathCross = function(s,e){
s = S.createPath(s); e = S.createPath(e);
var arr = S.getSegments(s,e,this._mpr), s1 = arr[0], e1 = arr[1], arL = e1.length, idx;
S._pCr = function(s,e,svg){ // _pathCross
var s1, e1, arr, idx, arL, sm, lg, smp, lgp, nsm = [], sml, cl = [], len, tl, cs;
this._sp = false;
if (!this._isp) {
s = S.cP(s); e = S.cP(e);
arr = S.gSegs(s,e,this._mpr);
s1 = arr[0]; e1 = arr[1]; arL = e1.length;
} else {
s = S.pTA(s); e = S.pTA(e);
arL = Math.max(s.length,e.length);
if ( arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; }
sml = sm.length;
smp = S.cP('M'+sm.join('L')+'z'); len = smp.getTotalLength() / arL;
for (var i=0; i<arL; i++){
tl = smp.getPointAtLength(len*i);
cs = S.gCP(len,tl,sm);
nsm.push( [ cs[0], cs[1] ] );
}
if (arL === e.length) { e1 = lg; s1 = nsm; } else { s1 = lg; e1 = nsm; }
}
// reverse arrays
if (this._rv1) { s1.reverse(); }
if (this._rv2) { e1.reverse(); }
// determine index for best/minimum distance between points
if (this._smi) { idx = S.getBestIndex(s1,e1); }
if (this._smi) { idx = S.gBi(s1,e1); }
// shift second array to for smallest tween distance
if (this._midx) {
@ -82,7 +103,10 @@
// the console.log helper utility
if (this._smi) {
console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+this._mpr+' morphPrecision value.\n'
// also show the points
S.shP(s1,e1,svg);
var mpi = this._isp ? 'the polygon with the most points.\n' : (this._mpr === 25 ? 'the default' : 'your') +' morphPrecision value of '+this._mpr+'.\n';
console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+mpi
+ (this._midx ? 'You\'ve configured the morphIndex to ' + this._midx + ' while the recommended is ' + idx+ '.\n' : 'You may also consider a morphIndex for the second path. Currently the best index seems to be ' + idx + '.\n')
+ (
!this._rv1 && !this._rv2 ? 'If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.' :
@ -95,93 +119,137 @@
return [s1,e1]
}
S.getSegments = function(s,e,r){
S.gSegs = function(s,e,r){ // getSegments returns an array of points based on a sample size morphPrecision
var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2),
d = r, ar = ml / r, j = 0, sl = ar*r; // sl = sample length
// populate the points arrays based on morphPrecision as sample size
while ( (j += r) < sl ) {
while ( (j += r) < sl ) { // populate the points arrays based on morphPrecision as sample size
s1.push( [s.getPointAtLength(j).x, s.getPointAtLength(j).y]);
e1.push( [e.getPointAtLength(j).x, e.getPointAtLength(j).y]);
}
return [s1,e1];
}
}
S.getBestIndex = function(s,e){
var s1 = S.clone(s), e1 = S.clone(e), d = [], i, r = [], l = s1.length, t, ax, ay;
S.gCP = function(p,t,s){ // getClosestPoint for polygon paths it returns a close point from the original path (length,pointAtLength,smallest); // intervalLength
var x, y, a = [], l = s.length, dx, nx, pr;
for (i=0; i<l; i++){
x = Math.abs(s[i][0] - t.x);
y = Math.abs(s[i][1] - t.y);
a.push( Math.sqrt( x * x + y * y ) );
}
dx = a.indexOf(Math.min.apply(null,a));
pr = !!s[dx-1] ? dx-1 : l-1;
nx = !!s[dx+1] ? dx+1 : 0;
return Math.abs(s[pr][0] - t.x) < p && Math.abs(s[pr][1] - t.y) < p ? s[pr]
: Math.abs(s[nx][0] - t.x) < p && Math.abs(s[nx][1] - t.y) < p ? s[nx]
: Math.abs(s[dx][0] - t.x) < p && Math.abs(s[dx][1] - t.y) < p ? s[dx]
: [t.x,t.y];
}
S.shP = function(s,e,v){// showPoints helper function to visualize the points on the path
if (!this._sp){
var c, a = arguments, cl, p, l;
for (var i=0; i<2; i++){
p = a[i]; l = p.length; cl = i=== 0 ? { f: 'DeepPink', o: 'HotPink' } : { f: 'Lime', o: 'LimeGreen' };
for (var j=0; j<l; j++) {
c = document.createElementNS(_ns,'circle');
c.setAttribute('cx',p[j][0]); c.setAttribute('cy',p[j][1]);
c.setAttribute('r', j===0 ? 20 : 10 ); c.setAttribute('fill', j===0 ? cl.f : cl.o);
if (this._isp) { v.appendChild(c); } else if (!this._isp && j===0 ) { v.appendChild(c);}
}
}
this._sp = true; c = null;
}
}
S.gBi = function(s,e){ // getBestIndex for shape rotation
var s1 = S.clone(s), e1 = S.clone(e), d = [], i, l = e.length, t, ax, ay;
for (i=0; i<l; i++){
t = e1.splice(i,l-i); e1 = t.concat(e1);
ax = Math.abs(s1[i][0] - e1[i][0]);
ay = Math.abs(s1[i][1] - e1[i][1]);
d.push( Math.sqrt( ax * ax + ay * ay ) );
r.push( e1 );
e1 = []; e1 = S.clone(e); t = null;
}
return d.indexOf(Math.min.apply(null,d));
}
S.getOnePath = function(p){
S.gOp = function(p){ // getOnePath, first path only
var a = p.split(/z/i);
if (a.length > 2) {
return trm(a[0]) + 'z';
} else { return trm(p); }
return a[0].trim() + 'z';
} else { return p.trim(); }
}
S.createPath = function (p){
S.cP = function (p){ // createPath
var c = document.createElementNS(_ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
c.setAttribute('d',d); return c;
}
S.forcePath = function(p){
S.fPt = function(p){ // forcePath for glyph elements
if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future
var c = S.createPath(p); p.parentNode.appendChild(c); return c;
var c = S.cP(p); p.parentNode.appendChild(c); return c;
}
return p;
}
S.clone = function(obj) {
S.clone = function(a) {
var copy;
// Handle Array
if (obj instanceof Array) {
if (a instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = S.clone(obj[i]);
for (var i = 0, len = a.length; i < len; i++) {
copy[i] = S.clone(a[i]);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) {
copy[attr] = S.clone(obj[attr]);
return a;
}
S.pTA = function(p) { // simple pathToAbsolute for polygons
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');
np[i] = np[i].replace(/(^|[^,])\s*-/g, '$1,-').replace(/(\s+\,|\s|\,)/g,',').replace(r,'').split(',');
np[i][0] = parseFloat(np[i][0]);
np[i][1] = parseFloat(np[i][1]);
if (i === 0) { x+=np[i][0]; y +=np[i][1]; }
else {
x = np[i-1][0];
y = np[i-1][1];
if (/l/i.test(c)) {
np[i][0] = c === 'l' ? np[i][0] + x : np[i][0];
np[i][1] = c === 'l' ? np[i][1] + y : np[i][1];
} else if (/h/i.test(c)) {
np[i][0] = c === 'h' ? np[i][0] + x : np[i][0];
np[i][1] = y;
} else if (/v/i.test(c)) {
np[i][0] = x;
np[i][1] = c === 'v' ? np[i][0] + y : np[i][0];
}
}
return copy;
}
return obj;
}
return np;
}
// a shortHand pathCross
K.svq = function(w){ if ( w._vE.path ) S.pCr(w); }
// register the render SVG path object
// process path object and also register the render function
K.pp['path'] = function(a,o,l) {
K.pp['path'] = function(a,o,l) { // K.pp['path']('path',value,element);
if (!('path' in K.dom)) {
K.dom['path'] = function(w,p,v){
var curve =[], i, l;
K.dom['path'] = function(w,p,v){
var points =[], i, l;
for(i=0,l=w._vE.path.d.length;i<l;i++) { // for each point
curve[i] = [];
points[i] = [];
for(var j=0;j<2;j++) { // each point coordinate
curve[i].push(w._vS.path.d[i][j]+(w._vE.path.d[i][j]-w._vS.path.d[i][j])*v);
points[i].push(w._vS.path.d[i][j]+(w._vE.path.d[i][j]-w._vS.path.d[i][j])*v);
}
}
w._el.setAttribute("d", v === 1 ? w._vE.path.o : 'M' + curve.join('L') + 'Z' );
w._el.setAttribute("d", v === 1 ? w._vE.path.o : 'M' + points.join('L') + 'Z' );
}
}
return S.getPath(o);
return S.gPt(o);
};
K.prS['path'] = function(el,p,v){
@ -189,14 +257,14 @@
};
// SVG DRAW
S.getDraw = function(e,v){
S.gDr = function(e,v){
var l = e.getTotalLength(), start, end, d, o;
if ( v instanceof Object ) {
return v;
} else if (typeof v === 'string') {
v = v.split(/\,|\s/);
start = /%/.test(v[0]) ? S.percent(trm(v[0]),l) : parseFloat(v[0]);
end = /%/.test(v[1]) ? S.percent(trm(v[1]),l) : parseFloat(v[1]);
start = /%/.test(v[0]) ? S.pc(v[0].trim(),l) : parseFloat(v[0]);
end = /%/.test(v[1]) ? S.pc(v[1].trim(),l) : parseFloat(v[1]);
} else if (typeof v === 'undefined') {
o = parseFloat(K.gCS(e,'strokeDashoffset'));
d = K.gCS(e,'strokeDasharray').split(/\,/);
@ -208,7 +276,7 @@
return { s: start, e: end, l: l }
};
S.percent = function(v,l){
S.pc = function(v,l){
return parseFloat(v) / 100 * l;
};
@ -226,11 +294,11 @@
w._el.style.strokeDasharray = e+o<1 ? '0px, ' + l + 'px' : (e+o) + 'px, ' + l + 'px';
}
}
return S.getDraw(l,o);
return S.gDr(l,o);
}
K.prS['draw'] = function(el,p,v){
return S.getDraw(el)
return S.gDr(el)
}
// SVG CSS Properties
@ -262,7 +330,7 @@
}
}
for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props SVG related
for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props for SVG elements
p = _nm[i];
if (p === 'strokeWidth'){
K.pp[p] = function(p,v){

234
demo/src/kute.js
View file

@ -27,14 +27,15 @@
return r ? f + (p.charAt(0).toUpperCase() + p.slice(1)) : p;
};
K.selector = function(el,multi){
K.selector = function(el,multi){ // a selector utility
var nl;
if (multi){
nl = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
} else {
nl = typeof el === 'object' ? el : /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
}
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el); else return nl;
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el);
return nl;
};
var _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
@ -89,9 +90,9 @@
};
K.fromTo = function (el, f, to, o) {
var _el = K.selector(el), ft = K.prP(f, to, _el),
_vS = ft[0], _vE = ft[1]; o = o || {};
return new K.Tween(_el, _vS, _vE, o);
var _el = K.selector(el), ft = K.prP(f, to, _el), _vS = ft[0], _vE = ft[1]; o = o || {};
var tw = new K.Tween(_el, _vS, _vE, o); K.svg && K.svq(tw); // on init we process the SVG paths
return tw;
};
// multiple elements tweening
@ -173,111 +174,9 @@
K.add = function (tw) { _tws.push(tw); };
K.remove = function (tw) {
var i = _tws.indexOf(tw);
if (i !== -1) {
_tws.splice(i, 1);
}
if (i !== -1) { _tws.splice(i, 1); }
};
K.s = function () { _caf(_t); _t = null; };
// register functions for the render object K.dom(w, p, w._e(e));
K._queue = function (w) {
for ( var p in w._vE ) {
var cls = _cls.indexOf(p) !== -1,
bm = _bm.indexOf(p) !== -1,
sc = _sc.indexOf(p) !== -1,
op = _op.indexOf(p) !== -1,
tf = p === 'transform';
if ( bm && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
} else if (tf && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) ';
for (tP in w._vE[p]) {
var t1 = w._vS[p][tP], t2 = w._vE[p][tP];
rps = rps || _3d.indexOf(tP) !== -1 && !_isIE;
if ( tP === 'translate' ) {
var tls = '', ts = {}, ax;
for (ax in t2){
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
}
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
} else if ( tP === 'rotate' ) {
var rt = '', rS = {}, rx;
for ( rx in t2 ){
if ( t1[rx] ) {
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
av = a1 + (a2 - a1) * v;
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
}
}
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
} else if (tP==='skew') {
var sk = '', sS = {};
for ( var sx in t2 ){
if ( t1[sx] ) {
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
sv = s1 + (s2 - s1) * v;
sS[sx] = sx + '(' + sv + su + ') ';
}
}
sk = (sS.skewX||'') + (sS.skewY||'');
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
} else if (tP === 'scale') {
var sc1 = t1.value, sc2 = t2.value,
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
_tS = (_tS === '') ? scS : (_tS + ' ' + scS);
}
}
w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
};
} else if ( cls && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
var _c = {};
for (var c in w._vE[p].value) {
if ( c !== 'a' ){
_c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;
} else {
_c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
}
}
if ( w._hex ) {
w._el.style[p] = K.rth( _c.r, _c.g, _c.b );
} else {
w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
}
};
} else if ( sc && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
w._el = (w._el === undefined || w._el === null) ? _sct : w._el;
w._el.scrollTop = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
} else if ( op && (!(p in K.dom)) ) {
if (_isIE8) {
K.dom[p] = function(w,p,v) {
w._el.style.filter = "alpha(opacity=" + ( w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) * 100 + ")";
};
} else {
K.dom[p] = function(w,p,v) {
w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
}
}
}
};
K.s = function () { _caf(_t); _t = null; };
// process properties for _vE and _vS or one of them
K.prP = function (e, s, l) {
@ -330,6 +229,57 @@
// process properties object | registers the plugins prepareStart functions
K.pp = {}; K.prS = {};
K.pp.tf = function(p,v){ // transform prop / value
if (!('transform' in K.dom)) {
K.dom['transform'] = function(w,p,v) {
var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) ';
for (tP in w._vE[p]) {
var t1 = w._vS[p][tP], t2 = w._vE[p][tP];
rps = rps || _3d.indexOf(tP) !== -1 && !_isIE;
if ( tP === 'translate' ) {
var tls = '', ts = {}, ax;
for (ax in t2){
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
}
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
} else if ( tP === 'rotate' ) {
var rt = '', rS = {}, rx;
for ( rx in t2 ){
if ( t1[rx] ) {
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
av = a1 + (a2 - a1) * v;
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
}
}
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
} else if (tP==='skew') {
var sk = '', sS = {};
for ( var sx in t2 ){
if ( t1[sx] ) {
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
sv = s1 + (s2 - s1) * v;
sS[sx] = sx + '(' + sv + su + ') ';
}
}
sk = (sS.skewX||'') + (sS.skewY||'');
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
} else if (tP === 'scale') {
var sc1 = t1.value, sc2 = t2.value,
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
_tS = (_tS === '') ? scS : (_tS + ' ' + scS);
}
}
w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
};
}
var t = p.replace(/X|Y|Z/, ''), tv;
if (p === 'translate3d') {
tv = v.split(',');
@ -360,9 +310,57 @@
return { value: K.truD(v,p).v };
}
};
K.pp.unl = function(p,v){ return { value: K.truD(v).v }; } // scroll | opacity | unitless
K.pp.box = function(p,v){ return { value: K.truD(v).v, unit: K.truD(v).u }; } // box model | text props | radius props
K.pp.cls = function(p,v){ return { value: K.truC(v) }; } // colors
K.pp.unl = function(p,v){ // scroll | opacity | unitless
if (/scroll/.test(p)){
K.dom[p] = function(w,p,v) {
w._el = (w._el === undefined || w._el === null) ? _sct : w._el;
w._el.scrollTop = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
} else if (p === 'opacity') {
if (!(p in K.dom)) {
if (_isIE8) {
K.dom[p] = function(w,p,v) {
w._el.style.filter = "alpha(opacity=" + ( w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) * 100 + ")";
};
} else {
K.dom[p] = function(w,p,v) {
w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
}
}
}
return { value: K.truD(v).v };
}
K.pp.box = function(p,v){
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
}
return { value: K.truD(v).v, unit: K.truD(v).u };
}
// box model | text props | radius props
K.pp.cls = function(p,v){ // colors
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v) {
var _c = {};
for (var c in w._vE[p].value) {
if ( c !== 'a' ){
_c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;
} else {
_c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
}
}
if ( w._hex ) {
w._el.style[p] = K.rth( _c.r, _c.g, _c.b );
} else {
w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
}
};
}
return { value: K.truC(v) };
}
K.truD = function (d,p) { //true dimension returns { v = value, u = unit }
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length,
@ -453,7 +451,7 @@
}
} else {
return _d[p];
}
}
}
};
@ -569,8 +567,6 @@
//also add plugins options
for (var o in _o) { if (!(o in this) && !/perspective|delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(o) ) { this[o] = _o[o]; } }
K._queue(this);
};
var w = K.Tween.prototype;
@ -580,10 +576,7 @@
K.perspective(this._el,this); // apply the perspective and transform origin
if ( this._rpr ) { this.stack(); } // on start we reprocess the valuesStart for TO() method
// SVG Plugin
if (K.svg && this._vE.path) K.svg.pathCross(this); // on start we process the SVG paths
for ( var e in this._vE ) {
this._vSR[e] = this._vS[e];
}
@ -716,7 +709,8 @@
}
}
}
}
}
K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths
};
//prepare valuesStart for .to() method

158
demo/svg.html
View file

@ -81,11 +81,11 @@
<div class="content-wrap">
<h2>SVG Plugin</h2>
<p>The SVG Plugin for KUTE.js extends the core engine and enables animation for various CSS properties specific to SVG elements as well as morphing path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.</p>
<p>Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below <a href="http://caniuse.com/#search=svg" target="_blank">do not support inline SVG</a>.</p>
<p>Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below <a href="http://caniuse.com/#search=svg" target="_blank">do not support inline SVG</a> so make sure to fiter out your SVG tweens.</p>
<h3>Shape Morphing</h3>
<p>One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <code>&lt;path></code> and <code>&lt;glyph></code> SVG elements, with closed shapes (their <code>d</code> attribute ends with <code>z</code>). The plugin is packed with specific tween options to help you improve the morph animation:</p>
<p>One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <code>&lt;path></code> and <code>&lt;glyph></code> SVG elements, with closed shapes (their <code>d</code> attribute ends with <code>z</code>). On initialization or animation start, depending on the chosen KUTE.js method, it will <a href="http://phrogz.net/SVG/convert_path_to_polygon.xhtml" target="_blank">sample a number of points</a> along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:</p>
<ul>
<li><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is <code>false</code> for serious performance reasons.</li>
<li><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is <code>false</code> for serious performance reasons. This option will also show you the first point for both shapes so you can visualize</li>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">D3.js example</a> uses 4.</li>
<li><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape. By default this option is <code>false</code>.</li>
@ -113,21 +113,21 @@ var tween = KUTE.to('#rectangle', { path: '#star' }).start();
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
</code></pre>
<p>For all the above tween objects the animation should look like this:</p>
<p>For all the above tween objects the animation should look like this:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the <code>showMorphInfo: true</code> tween option that will help us find the best possible morph as performance and visual. Have a look:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the <code>showMorphInfo: true</code> tween option that will help us find the best possible morph as performance and visual. Have a look:</p>
<pre><code class="language-javascript">// let's check the morph info again
var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).start();
@ -141,23 +141,54 @@ If the current animation is not satisfactory, consider reversing one of the path
*/
</code></pre>
<p>Next, we're going to set the <code>morphIndex: 79</code> and we will get an improved morph.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle1" class="bg-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star1" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn1" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Much better! You can play with <code>morphIndex</code> value, maybe you can get an even better or more interesting morph.</p>
<p>Next, we're going to set the <code>morphIndex: 79</code> option and we will get an improved morph.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle1" class="bg-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star1" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn1" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Much better! You can play with the <code>morphIndex</code> value, maybe you can get an even better or more interesting morph. Also notice the above shapes have some points indicating the start for each shape, making it even easier for you to improve the morph, a nice addition to the <code>showMorphInfo</code> option.</p>
<h4>Morphing Polygon Paths</h4>
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of <code>L</code>, <code>V</code> and <code>H</code> path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The <code>morphPrecision</code> option will not apply since the paths are already polygons, still you will have access to all the other options.</p>
<pre><code class="language-javascript">// let's morph a triangle into a star
var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
// or same path into a square
var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
</code></pre>
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="triangle" class="bg-indigo" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="star2" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
</svg>
<div class="example-buttons">
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only <code>L</code> path command will make sure to prevent value processing and allow the animation to start as fast as possible.</p>
<h4>Multi Path Example</h4>
<p>In other cases, you may want to morph multiple paths at the same time. Let's have a look at the following paths:</p>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
@ -169,7 +200,7 @@ If the current animation is not satisfactory, consider reversing one of the path
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;/svg>
</code></pre>
<p>As you can see, both these paths have additional subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.</p>
<p>As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
&lt;path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
@ -182,7 +213,7 @@ If the current animation is not satisfactory, consider reversing one of the path
&lt;path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;/svg>
</code></pre>
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: w11 to w24, w13 to w21, w14 to w22 and w12 to w23.</p>
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: <code>#w11</code> to <code>#w24</code>, <code>#w13</code> to <code>#w21</code>, <code>#w14</code> to <code>#w22</code> and <code>#w12</code> to <code>#w23</code>.</p>
<p>Now we can write the tween objects and get to working:</p>
<pre><code class="language-javascript">var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
@ -190,30 +221,38 @@ var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
</code></pre>
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a few minutes of tweaking the options, here's what we should see:</p>
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550" >
<path id="w11" class="bg-red" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" class="bg-orange" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" class="bg-green" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" class="bg-blue" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
<path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
<path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
</svg>
<div class="example-buttons">
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550" >
<path id="w11" class="bg-red" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" class="bg-orange" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" class="bg-green" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" class="bg-blue" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
<path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
<path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
</svg>
<div class="example-buttons">
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
<h4>Complex Example</h4>
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths. In that case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example. So without further talking, let's get into it:</p>
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.</p>
<p>An important aspect of multi path morph is syncronization: since the <code>.to()</code> method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using the <code>.fromTo()</code> method. So, let's get into it:</p>
<pre><code class="language-javascript">// complex multi morph, the paths should be self explanatory
var morph1 = KUTE.fromTo('#start-container', { path: '#start-container' }, { path: '#end-container' });
var morph2 = KUTE.fromTo('#startpath1', { path: '#startpath1' }, { path: '#endpath1' });
var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' }, { path: '#endpath1' });
var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, { path: '#endpath2' });
</code></pre>
<p>As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<path id="rectangle-container" class="bg-blue" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"/>
@ -231,16 +270,17 @@ var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>While there are other tools such as <a href="http://alexk111.github.io/SVG-Morpheus/" target="_blank">SVGMorpheus</a> to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader horizon. Again, the SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.</p>
<p>While there are other tools such as <a href="http://alexk111.github.io/SVG-Morpheus/" target="_blank">SVGMorpheus</a> to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader scope. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.</p>
<h4>Recommendations</h4>
<ul>
<li>The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.</li>
<li>When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.</li>
<li>Polygons with only <code>lineto</code> path commands are best for performance.</li>
<li>Faster animation speed could be a great trick to hide any polygonal "artefacts".</li>
<li>Always use the <code>showMorphInfo:true</code> tween option to check how the values required for the morph change with every new option value, but <strong>never forget to disable it</strong> after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time.</li>
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods because the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the morph will always start later.</li>
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code> based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.</li>
</ul>
<h3>Drawing Stroke</h3>
@ -342,7 +382,11 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
<a id="gradBtn" class="btn btn-yellow" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</p>
<p>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</p>
<h3>Future Plans</h3>
<p>The future versions of the SVG Plugin might also feature improved cross browser transform animations, as currently the core engine only works and was tested with HTML elements of most types except SVG.</p>
<p>Since most of this plugin scripting works with <code>path</code> or <code>glyph</code> elements, I'm also considering a very light <code>convertToPath</code> feature, but there are some <a href="https://github.com/Waest/SVGPathConverter" target="_blank">already out there</a>.</p>
</div>
<!-- FOOTER -->

2
dist/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
kute-jquery.js
View file

@ -25,7 +25,7 @@
} else {
throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
}
})(function($, KUTE) {
})(function($, KUTE) {
'use strict';
var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;

186
kute-svg.js
View file

@ -23,31 +23,31 @@
'use strict';
var K = window.KUTE, S = S || {}, p,
_svg = document.getElementsByTagName('path')[0],
_svg = K.selector('path') || K.selector('svg'),
_ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg',
_nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
_cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
trm = function(s){ if (!String.prototype.trim) { return s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } else { return s.trim(); }};
pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi;
if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return
// SVG MORPH
// get path d attribute or create a path with string value
S.getPath = function(e){
// get path d attribute or create a path from string value
S.gPt = function(e){
var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
if ( el && /path|glyph/.test(el.tagName) ) {
p.e = S.forcePath(el);
p.e = S.fPt(el);
p.o = el.getAttribute('d');
} else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already
var np = S.createPath(trm(e));
var np = S.cP(e.trim());
p.e = np;
p.o = e;
}
return p;
}
S.pathCross = function(w){
S.pCr = function(w){ // pathCross
// path tween options
this._mpr = w.morphPrecision || 25;
this._midx = w.morphIndex;
@ -55,24 +55,45 @@
this._rv1 = w.reverseFirstPath;
this._rv2 = w.reverseSecondPath;
var p1 = S.getOnePath(w._vS.path.o), p2 = S.getOnePath(w._vE.path.o), arr;
var p1 = S.gOp(w._vS.path.o), p2 = S.gOp(w._vE.path.o), arr;
this._isp = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // both shapes are polygons
arr = S._pathCross(p1,p2);
arr = S._pCr(p1,p2,w._el.parentNode);
w._vS.path.d = arr[0];
w._vE.path.d = arr[1];
}
S._pathCross = function(s,e){
s = S.createPath(s); e = S.createPath(e);
var arr = S.getSegments(s,e,this._mpr), s1 = arr[0], e1 = arr[1], arL = e1.length, idx;
S._pCr = function(s,e,svg){ // _pathCross
var s1, e1, arr, idx, arL, sm, lg, smp, lgp, nsm = [], sml, cl = [], len, tl, cs;
this._sp = false;
if (!this._isp) {
s = S.cP(s); e = S.cP(e);
arr = S.gSegs(s,e,this._mpr);
s1 = arr[0]; e1 = arr[1]; arL = e1.length;
} else {
s = S.pTA(s); e = S.pTA(e);
arL = Math.max(s.length,e.length);
if ( arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; }
sml = sm.length;
smp = S.cP('M'+sm.join('L')+'z'); len = smp.getTotalLength() / arL;
for (var i=0; i<arL; i++){
tl = smp.getPointAtLength(len*i);
cs = S.gCP(len,tl,sm);
nsm.push( [ cs[0], cs[1] ] );
}
if (arL === e.length) { e1 = lg; s1 = nsm; } else { s1 = lg; e1 = nsm; }
}
// reverse arrays
if (this._rv1) { s1.reverse(); }
if (this._rv2) { e1.reverse(); }
// determine index for best/minimum distance between points
if (this._smi) { idx = S.getBestIndex(s1,e1); }
if (this._smi) { idx = S.gBi(s1,e1); }
// shift second array to for smallest tween distance
if (this._midx) {
@ -82,7 +103,10 @@
// the console.log helper utility
if (this._smi) {
console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+this._mpr+' morphPrecision value.\n'
// also show the points
S.shP(s1,e1,svg);
var mpi = this._isp ? 'the polygon with the most points.\n' : (this._mpr === 25 ? 'the default' : 'your') +' morphPrecision value of '+this._mpr+'.\n';
console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+mpi
+ (this._midx ? 'You\'ve configured the morphIndex to ' + this._midx + ' while the recommended is ' + idx+ '.\n' : 'You may also consider a morphIndex for the second path. Currently the best index seems to be ' + idx + '.\n')
+ (
!this._rv1 && !this._rv2 ? 'If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.' :
@ -95,93 +119,137 @@
return [s1,e1]
}
S.getSegments = function(s,e,r){
S.gSegs = function(s,e,r){ // getSegments returns an array of points based on a sample size morphPrecision
var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2),
d = r, ar = ml / r, j = 0, sl = ar*r; // sl = sample length
// populate the points arrays based on morphPrecision as sample size
while ( (j += r) < sl ) {
while ( (j += r) < sl ) { // populate the points arrays based on morphPrecision as sample size
s1.push( [s.getPointAtLength(j).x, s.getPointAtLength(j).y]);
e1.push( [e.getPointAtLength(j).x, e.getPointAtLength(j).y]);
}
return [s1,e1];
}
}
S.getBestIndex = function(s,e){
var s1 = S.clone(s), e1 = S.clone(e), d = [], i, r = [], l = s1.length, t, ax, ay;
S.gCP = function(p,t,s){ // getClosestPoint for polygon paths it returns a close point from the original path (length,pointAtLength,smallest); // intervalLength
var x, y, a = [], l = s.length, dx, nx, pr;
for (i=0; i<l; i++){
x = Math.abs(s[i][0] - t.x);
y = Math.abs(s[i][1] - t.y);
a.push( Math.sqrt( x * x + y * y ) );
}
dx = a.indexOf(Math.min.apply(null,a));
pr = !!s[dx-1] ? dx-1 : l-1;
nx = !!s[dx+1] ? dx+1 : 0;
return Math.abs(s[pr][0] - t.x) < p && Math.abs(s[pr][1] - t.y) < p ? s[pr]
: Math.abs(s[nx][0] - t.x) < p && Math.abs(s[nx][1] - t.y) < p ? s[nx]
: Math.abs(s[dx][0] - t.x) < p && Math.abs(s[dx][1] - t.y) < p ? s[dx]
: [t.x,t.y];
}
S.shP = function(s,e,v){// showPoints helper function to visualize the points on the path
if (!this._sp){
var c, a = arguments, cl, p, l;
for (var i=0; i<2; i++){
p = a[i]; l = p.length; cl = i=== 0 ? { f: 'DeepPink', o: 'HotPink' } : { f: 'Lime', o: 'LimeGreen' };
for (var j=0; j<l; j++) {
c = document.createElementNS(_ns,'circle');
c.setAttribute('cx',p[j][0]); c.setAttribute('cy',p[j][1]);
c.setAttribute('r', j===0 ? 20 : 10 ); c.setAttribute('fill', j===0 ? cl.f : cl.o);
if (this._isp) { v.appendChild(c); } else if (!this._isp && j===0 ) { v.appendChild(c);}
}
}
this._sp = true; c = null;
}
}
S.gBi = function(s,e){ // getBestIndex for shape rotation
var s1 = S.clone(s), e1 = S.clone(e), d = [], i, l = e.length, t, ax, ay;
for (i=0; i<l; i++){
t = e1.splice(i,l-i); e1 = t.concat(e1);
ax = Math.abs(s1[i][0] - e1[i][0]);
ay = Math.abs(s1[i][1] - e1[i][1]);
d.push( Math.sqrt( ax * ax + ay * ay ) );
r.push( e1 );
e1 = []; e1 = S.clone(e); t = null;
}
return d.indexOf(Math.min.apply(null,d));
}
S.getOnePath = function(p){
S.gOp = function(p){ // getOnePath, first path only
var a = p.split(/z/i);
if (a.length > 2) {
return trm(a[0]) + 'z';
} else { return trm(p); }
return a[0].trim() + 'z';
} else { return p.trim(); }
}
S.createPath = function (p){
S.cP = function (p){ // createPath
var c = document.createElementNS(_ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
c.setAttribute('d',d); return c;
}
S.forcePath = function(p){
S.fPt = function(p){ // forcePath for glyph elements
if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future
var c = S.createPath(p); p.parentNode.appendChild(c); return c;
var c = S.cP(p); p.parentNode.appendChild(c); return c;
}
return p;
}
S.clone = function(obj) {
S.clone = function(a) {
var copy;
// Handle Array
if (obj instanceof Array) {
if (a instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = S.clone(obj[i]);
for (var i = 0, len = a.length; i < len; i++) {
copy[i] = S.clone(a[i]);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) {
copy[attr] = S.clone(obj[attr]);
return a;
}
S.pTA = function(p) { // simple pathToAbsolute for polygons
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');
np[i] = np[i].replace(/(^|[^,])\s*-/g, '$1,-').replace(/(\s+\,|\s|\,)/g,',').replace(r,'').split(',');
np[i][0] = parseFloat(np[i][0]);
np[i][1] = parseFloat(np[i][1]);
if (i === 0) { x+=np[i][0]; y +=np[i][1]; }
else {
x = np[i-1][0];
y = np[i-1][1];
if (/l/i.test(c)) {
np[i][0] = c === 'l' ? np[i][0] + x : np[i][0];
np[i][1] = c === 'l' ? np[i][1] + y : np[i][1];
} else if (/h/i.test(c)) {
np[i][0] = c === 'h' ? np[i][0] + x : np[i][0];
np[i][1] = y;
} else if (/v/i.test(c)) {
np[i][0] = x;
np[i][1] = c === 'v' ? np[i][0] + y : np[i][0];
}
}
return copy;
}
return obj;
}
return np;
}
// a shortHand pathCross
K.svq = function(w){ if ( w._vE.path ) S.pCr(w); }
// register the render SVG path object
// process path object and also register the render function
K.pp['path'] = function(a,o,l) {
K.pp['path'] = function(a,o,l) { // K.pp['path']('path',value,element);
if (!('path' in K.dom)) {
K.dom['path'] = function(w,p,v){
var curve =[], i, l;
K.dom['path'] = function(w,p,v){
var points =[], i, l;
for(i=0,l=w._vE.path.d.length;i<l;i++) { // for each point
curve[i] = [];
points[i] = [];
for(var j=0;j<2;j++) { // each point coordinate
curve[i].push(w._vS.path.d[i][j]+(w._vE.path.d[i][j]-w._vS.path.d[i][j])*v);
points[i].push(w._vS.path.d[i][j]+(w._vE.path.d[i][j]-w._vS.path.d[i][j])*v);
}
}
w._el.setAttribute("d", v === 1 ? w._vE.path.o : 'M' + curve.join('L') + 'Z' );
w._el.setAttribute("d", v === 1 ? w._vE.path.o : 'M' + points.join('L') + 'Z' );
}
}
return S.getPath(o);
return S.gPt(o);
};
K.prS['path'] = function(el,p,v){
@ -189,14 +257,14 @@
};
// SVG DRAW
S.getDraw = function(e,v){
S.gDr = function(e,v){
var l = e.getTotalLength(), start, end, d, o;
if ( v instanceof Object ) {
return v;
} else if (typeof v === 'string') {
v = v.split(/\,|\s/);
start = /%/.test(v[0]) ? S.percent(trm(v[0]),l) : parseFloat(v[0]);
end = /%/.test(v[1]) ? S.percent(trm(v[1]),l) : parseFloat(v[1]);
start = /%/.test(v[0]) ? S.pc(v[0].trim(),l) : parseFloat(v[0]);
end = /%/.test(v[1]) ? S.pc(v[1].trim(),l) : parseFloat(v[1]);
} else if (typeof v === 'undefined') {
o = parseFloat(K.gCS(e,'strokeDashoffset'));
d = K.gCS(e,'strokeDasharray').split(/\,/);
@ -208,7 +276,7 @@
return { s: start, e: end, l: l }
};
S.percent = function(v,l){
S.pc = function(v,l){
return parseFloat(v) / 100 * l;
};
@ -226,11 +294,11 @@
w._el.style.strokeDasharray = e+o<1 ? '0px, ' + l + 'px' : (e+o) + 'px, ' + l + 'px';
}
}
return S.getDraw(l,o);
return S.gDr(l,o);
}
K.prS['draw'] = function(el,p,v){
return S.getDraw(el)
return S.gDr(el)
}
// SVG CSS Properties
@ -262,7 +330,7 @@
}
}
for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props SVG related
for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props for SVG elements
p = _nm[i];
if (p === 'strokeWidth'){
K.pp[p] = function(p,v){

234
kute.js
View file

@ -27,14 +27,15 @@
return r ? f + (p.charAt(0).toUpperCase() + p.slice(1)) : p;
};
K.selector = function(el,multi){
K.selector = function(el,multi){ // a selector utility
var nl;
if (multi){
nl = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
} else {
nl = typeof el === 'object' ? el : /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
}
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el); else return nl;
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el);
return nl;
};
var _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
@ -89,9 +90,9 @@
};
K.fromTo = function (el, f, to, o) {
var _el = K.selector(el), ft = K.prP(f, to, _el),
_vS = ft[0], _vE = ft[1]; o = o || {};
return new K.Tween(_el, _vS, _vE, o);
var _el = K.selector(el), ft = K.prP(f, to, _el), _vS = ft[0], _vE = ft[1]; o = o || {};
var tw = new K.Tween(_el, _vS, _vE, o); K.svg && K.svq(tw); // on init we process the SVG paths
return tw;
};
// multiple elements tweening
@ -173,111 +174,9 @@
K.add = function (tw) { _tws.push(tw); };
K.remove = function (tw) {
var i = _tws.indexOf(tw);
if (i !== -1) {
_tws.splice(i, 1);
}
if (i !== -1) { _tws.splice(i, 1); }
};
K.s = function () { _caf(_t); _t = null; };
// register functions for the render object K.dom(w, p, w._e(e));
K._queue = function (w) {
for ( var p in w._vE ) {
var cls = _cls.indexOf(p) !== -1,
bm = _bm.indexOf(p) !== -1,
sc = _sc.indexOf(p) !== -1,
op = _op.indexOf(p) !== -1,
tf = p === 'transform';
if ( bm && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
} else if (tf && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) ';
for (tP in w._vE[p]) {
var t1 = w._vS[p][tP], t2 = w._vE[p][tP];
rps = rps || _3d.indexOf(tP) !== -1 && !_isIE;
if ( tP === 'translate' ) {
var tls = '', ts = {}, ax;
for (ax in t2){
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
}
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
} else if ( tP === 'rotate' ) {
var rt = '', rS = {}, rx;
for ( rx in t2 ){
if ( t1[rx] ) {
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
av = a1 + (a2 - a1) * v;
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
}
}
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
} else if (tP==='skew') {
var sk = '', sS = {};
for ( var sx in t2 ){
if ( t1[sx] ) {
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
sv = s1 + (s2 - s1) * v;
sS[sx] = sx + '(' + sv + su + ') ';
}
}
sk = (sS.skewX||'') + (sS.skewY||'');
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
} else if (tP === 'scale') {
var sc1 = t1.value, sc2 = t2.value,
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
_tS = (_tS === '') ? scS : (_tS + ' ' + scS);
}
}
w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
};
} else if ( cls && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
var _c = {};
for (var c in w._vE[p].value) {
if ( c !== 'a' ){
_c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;
} else {
_c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
}
}
if ( w._hex ) {
w._el.style[p] = K.rth( _c.r, _c.g, _c.b );
} else {
w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
}
};
} else if ( sc && (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
w._el = (w._el === undefined || w._el === null) ? _sct : w._el;
w._el.scrollTop = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
} else if ( op && (!(p in K.dom)) ) {
if (_isIE8) {
K.dom[p] = function(w,p,v) {
w._el.style.filter = "alpha(opacity=" + ( w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) * 100 + ")";
};
} else {
K.dom[p] = function(w,p,v) {
w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
}
}
}
};
K.s = function () { _caf(_t); _t = null; };
// process properties for _vE and _vS or one of them
K.prP = function (e, s, l) {
@ -330,6 +229,57 @@
// process properties object | registers the plugins prepareStart functions
K.pp = {}; K.prS = {};
K.pp.tf = function(p,v){ // transform prop / value
if (!('transform' in K.dom)) {
K.dom['transform'] = function(w,p,v) {
var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) ';
for (tP in w._vE[p]) {
var t1 = w._vS[p][tP], t2 = w._vE[p][tP];
rps = rps || _3d.indexOf(tP) !== -1 && !_isIE;
if ( tP === 'translate' ) {
var tls = '', ts = {}, ax;
for (ax in t2){
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
}
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
} else if ( tP === 'rotate' ) {
var rt = '', rS = {}, rx;
for ( rx in t2 ){
if ( t1[rx] ) {
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
av = a1 + (a2 - a1) * v;
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
}
}
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
} else if (tP==='skew') {
var sk = '', sS = {};
for ( var sx in t2 ){
if ( t1[sx] ) {
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
sv = s1 + (s2 - s1) * v;
sS[sx] = sx + '(' + sv + su + ') ';
}
}
sk = (sS.skewX||'') + (sS.skewY||'');
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
} else if (tP === 'scale') {
var sc1 = t1.value, sc2 = t2.value,
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
_tS = (_tS === '') ? scS : (_tS + ' ' + scS);
}
}
w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
};
}
var t = p.replace(/X|Y|Z/, ''), tv;
if (p === 'translate3d') {
tv = v.split(',');
@ -360,9 +310,57 @@
return { value: K.truD(v,p).v };
}
};
K.pp.unl = function(p,v){ return { value: K.truD(v).v }; } // scroll | opacity | unitless
K.pp.box = function(p,v){ return { value: K.truD(v).v, unit: K.truD(v).u }; } // box model | text props | radius props
K.pp.cls = function(p,v){ return { value: K.truC(v) }; } // colors
K.pp.unl = function(p,v){ // scroll | opacity | unitless
if (/scroll/.test(p)){
K.dom[p] = function(w,p,v) {
w._el = (w._el === undefined || w._el === null) ? _sct : w._el;
w._el.scrollTop = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
} else if (p === 'opacity') {
if (!(p in K.dom)) {
if (_isIE8) {
K.dom[p] = function(w,p,v) {
w._el.style.filter = "alpha(opacity=" + ( w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) * 100 + ")";
};
} else {
K.dom[p] = function(w,p,v) {
w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
};
}
}
}
return { value: K.truD(v).v };
}
K.pp.box = function(p,v){
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
}
return { value: K.truD(v).v, unit: K.truD(v).u };
}
// box model | text props | radius props
K.pp.cls = function(p,v){ // colors
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v) {
var _c = {};
for (var c in w._vE[p].value) {
if ( c !== 'a' ){
_c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;
} else {
_c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
}
}
if ( w._hex ) {
w._el.style[p] = K.rth( _c.r, _c.g, _c.b );
} else {
w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
}
};
}
return { value: K.truC(v) };
}
K.truD = function (d,p) { //true dimension returns { v = value, u = unit }
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length,
@ -453,7 +451,7 @@
}
} else {
return _d[p];
}
}
}
};
@ -569,8 +567,6 @@
//also add plugins options
for (var o in _o) { if (!(o in this) && !/perspective|delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(o) ) { this[o] = _o[o]; } }
K._queue(this);
};
var w = K.Tween.prototype;
@ -580,10 +576,7 @@
K.perspective(this._el,this); // apply the perspective and transform origin
if ( this._rpr ) { this.stack(); } // on start we reprocess the valuesStart for TO() method
// SVG Plugin
if (K.svg && this._vE.path) K.svg.pathCross(this); // on start we process the SVG paths
for ( var e in this._vE ) {
this._vSR[e] = this._vS[e];
}
@ -716,7 +709,8 @@
}
}
}
}
}
K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths
};
//prepare valuesStart for .to() method