diff --git a/build/tween.min.js b/build/tween.min.js index 2f2a9645..16c55f08 100644 --- a/build/tween.min.js +++ b/build/tween.min.js @@ -1,2 +1,15 @@ // tween.js v.0.15.0 https://github.com/sole/tween.js -void 0===Date.now&&(Date.now=function(){return(new Date).valueOf()});var TWEEN=TWEEN||function(){var n=[];return{REVISION:"14",getAll:function(){return n},removeAll:function(){n=[]},add:function(t){n.push(t)},remove:function(t){var r=n.indexOf(t);-1!==r&&n.splice(r,1)},update:function(t){if(0===n.length)return!1;var r=0;for(t=void 0!==t?t:"undefined"!=typeof window&&void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now();rn;n++)E[n].stop()},this.delay=function(n){return s=n,this},this.repeat=function(n){return e=n,this},this.yoyo=function(n){return a=n,this},this.easing=function(n){return l=n,this},this.interpolation=function(n){return p=n,this},this.chain=function(){return E=arguments,this},this.onStart=function(n){return d=n,this},this.onUpdate=function(n){return I=n,this},this.onComplete=function(n){return w=n,this},this.onStop=function(n){return M=n,this},this.update=function(n){var f;if(h>n)return!0;v===!1&&(null!==d&&d.call(t),v=!0);var M=(n-h)/o;M=M>1?1:M;var O=l(M);for(f in i){var m=r[f]||0,N=i[f];N instanceof Array?t[f]=p(N,O):("string"==typeof N&&(N=m+parseFloat(N,10)),"number"==typeof N&&(t[f]=m+(N-m)*O))}if(null!==I&&I.call(t,O),1==M){if(e>0){isFinite(e)&&e--;for(f in u){if("string"==typeof i[f]&&(u[f]=u[f]+parseFloat(i[f],10)),a){var T=u[f];u[f]=i[f],i[f]=T}r[f]=u[f]}return a&&(c=!c),h=n+s,!0}null!==w&&w.call(t);for(var g=0,W=E.length;W>g;g++)E[g].start(n);return!1}return!0}},TWEEN.Easing={Linear:{None:function(n){return n}},Quadratic:{In:function(n){return n*n},Out:function(n){return n*(2-n)},InOut:function(n){return(n*=2)<1?.5*n*n:-.5*(--n*(n-2)-1)}},Cubic:{In:function(n){return n*n*n},Out:function(n){return--n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n:.5*((n-=2)*n*n+2)}},Quartic:{In:function(n){return n*n*n*n},Out:function(n){return 1- --n*n*n*n},InOut:function(n){return(n*=2)<1?.5*n*n*n*n:-.5*((n-=2)*n*n*n-2)}},Quintic:{In:function(n){return n*n*n*n*n},Out:function(n){return--n*n*n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n*n*n:.5*((n-=2)*n*n*n*n+2)}},Sinusoidal:{In:function(n){return 1-Math.cos(n*Math.PI/2)},Out:function(n){return Math.sin(n*Math.PI/2)},InOut:function(n){return.5*(1-Math.cos(Math.PI*n))}},Exponential:{In:function(n){return 0===n?0:Math.pow(1024,n-1)},Out:function(n){return 1===n?1:1-Math.pow(2,-10*n)},InOut:function(n){return 0===n?0:1===n?1:(n*=2)<1?.5*Math.pow(1024,n-1):.5*(-Math.pow(2,-10*(n-1))+2)}},Circular:{In:function(n){return 1-Math.sqrt(1-n*n)},Out:function(n){return Math.sqrt(1- --n*n)},InOut:function(n){return(n*=2)<1?-.5*(Math.sqrt(1-n*n)-1):.5*(Math.sqrt(1-(n-=2)*n)+1)}},Elastic:{In:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),-(r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)))},Out:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),r*Math.pow(2,-10*n)*Math.sin(2*(n-t)*Math.PI/i)+1)},InOut:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),(n*=2)<1?-.5*r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i):r*Math.pow(2,-10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)*.5+1)}},Back:{In:function(n){var t=1.70158;return n*n*((t+1)*n-t)},Out:function(n){var t=1.70158;return--n*n*((t+1)*n+t)+1},InOut:function(n){var t=2.5949095;return(n*=2)<1?.5*n*n*((t+1)*n-t):.5*((n-=2)*n*((t+1)*n+t)+2)}},Bounce:{In:function(n){return 1-TWEEN.Easing.Bounce.Out(1-n)},Out:function(n){return 1/2.75>n?7.5625*n*n:2/2.75>n?7.5625*(n-=1.5/2.75)*n+.75:2.5/2.75>n?7.5625*(n-=2.25/2.75)*n+.9375:7.5625*(n-=2.625/2.75)*n+.984375},InOut:function(n){return.5>n?.5*TWEEN.Easing.Bounce.In(2*n):.5*TWEEN.Easing.Bounce.Out(2*n-1)+.5}}},TWEEN.Interpolation={Linear:function(n,t){var r=n.length-1,i=r*t,u=Math.floor(i),o=TWEEN.Interpolation.Utils.Linear;return 0>t?o(n[0],n[1],i):t>1?o(n[r],n[r-1],r-i):o(n[u],n[u+1>r?r:u+1],i-u)},Bezier:function(n,t){var r,i=0,u=n.length-1,o=Math.pow,e=TWEEN.Interpolation.Utils.Bernstein;for(r=0;u>=r;r++)i+=o(1-t,u-r)*o(t,r)*n[r]*e(u,r);return i},CatmullRom:function(n,t){var r=n.length-1,i=r*t,u=Math.floor(i),o=TWEEN.Interpolation.Utils.CatmullRom;return n[0]===n[r]?(0>t&&(u=Math.floor(i=r*(1+t))),o(n[(u-1+r)%r],n[u],n[(u+1)%r],n[(u+2)%r],i-u)):0>t?n[0]-(o(n[0],n[0],n[1],n[1],-i)-n[0]):t>1?n[r]-(o(n[r],n[r],n[r-1],n[r-1],i-r)-n[r]):o(n[u?u-1:0],n[u],n[u+1>r?r:u+1],n[u+2>r?r:u+2],i-u)},Utils:{Linear:function(n,t,r){return(t-n)*r+n},Bernstein:function(n,t){var r=TWEEN.Interpolation.Utils.Factorial;return r(n)/r(t)/r(n-t)},Factorial:function(){var n=[1];return function(t){var r,i=1;if(n[t])return n[t];for(r=t;r>1;r--)i*=r;return n[t]=i}}(),CatmullRom:function(n,t,r,i,u){var o=.5*(r-n),e=.5*(i-t),a=u*u,f=u*a;return(2*t-2*r+o+e)*f+(-3*t+3*r-2*o-e)*a+o*u+t}}},"undefined"!=typeof module&&module.exports&&(module.exports=TWEEN); \ No newline at end of file +void 0===Date.now&&(Date.now=function(){return(new Date).valueOf()}); +var TWEEN=TWEEN||function(){var a=[];return{REVISION:"15",getAll:function(){return a},removeAll:function(){a=[]},add:function(c){a.push(c)},remove:function(c){c=a.indexOf(c);-1!==c&&a.splice(c,1)},update:function(c){if(0===a.length)return!1;var b=0;for(c=void 0!==c?c:"undefined"!==typeof window&&void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now();b(a*=2)?.5*a*a:-.5*(--a*(a-2)-1)}},Cubic:{In:function(a){return a*a*a},Out:function(a){return--a*a*a+1},InOut:function(a){return 1>(a*=2)?.5*a*a*a:.5*((a-=2)*a*a+2)}},Quartic:{In:function(a){return a*a*a*a},Out:function(a){return 1- --a*a*a*a},InOut:function(a){return 1>(a*=2)?.5*a*a*a*a:-.5*((a-=2)*a*a*a-2)}},Quintic:{In:function(a){return a*a*a*a*a},Out:function(a){return--a* +a*a*a*a+1},InOut:function(a){return 1>(a*=2)?.5*a*a*a*a*a:.5*((a-=2)*a*a*a*a+2)}},Sinusoidal:{In:function(a){return 1-Math.cos(a*Math.PI/2)},Out:function(a){return Math.sin(a*Math.PI/2)},InOut:function(a){return.5*(1-Math.cos(Math.PI*a))}},Exponential:{In:function(a){return 0===a?0:Math.pow(1024,a-1)},Out:function(a){return 1===a?1:1-Math.pow(2,-10*a)},InOut:function(a){return 0===a?0:1===a?1:1>(a*=2)?.5*Math.pow(1024,a-1):.5*(-Math.pow(2,-10*(a-1))+2)}},Circular:{In:function(a){return 1-Math.sqrt(1- +a*a)},Out:function(a){return Math.sqrt(1- --a*a)},InOut:function(a){return 1>(a*=2)?-.5*(Math.sqrt(1-a*a)-1):.5*(Math.sqrt(1-(a-=2)*a)+1)}},Elastic:{In:function(a){var c,b=.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=.1):c=.4*Math.asin(1/b)/(2*Math.PI);return-(b*Math.pow(2,10*(a-=1))*Math.sin(2*(a-c)*Math.PI/.4))},Out:function(a){var c,b=.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=.1):c=.4*Math.asin(1/b)/(2*Math.PI);return b*Math.pow(2,-10*a)*Math.sin(2*(a-c)*Math.PI/.4)+1},InOut:function(a){var c, +b=.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=.1):c=.4*Math.asin(1/b)/(2*Math.PI);return 1>(a*=2)?-.5*b*Math.pow(2,10*(a-=1))*Math.sin(2*(a-c)*Math.PI/.4):b*Math.pow(2,-10*(a-=1))*Math.sin(2*(a-c)*Math.PI/.4)*.5+1}},Back:{In:function(a){return a*a*(2.70158*a-1.70158)},Out:function(a){return--a*a*(2.70158*a+1.70158)+1},InOut:function(a){return 1>(a*=2)?.5*a*a*(3.5949095*a-2.5949095):.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)}},Bounce:{In:function(a){return 1-TWEEN.Easing.Bounce.Out(1-a)},Out:function(a){return a< +1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},InOut:function(a){return.5>a?.5*TWEEN.Easing.Bounce.In(2*a):.5*TWEEN.Easing.Bounce.Out(2*a-1)+.5}},SteppedEase:{config:function(a){return function(c){return Math.floor(c*a)/a}}}}; +TWEEN.Interpolation={Linear:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),g=TWEEN.Interpolation.Utils.Linear;return 0>c?g(a[0],a[1],d):1b?b:e+1],d-e)},Bezier:function(a,c){var b=0,d=a.length-1,e=Math.pow,g=TWEEN.Interpolation.Utils.Bernstein,h;for(h=0;h<=d;h++)b+=e(1-c,d-h)*e(c,h)*a[h]*g(d,h);return b},CatmullRom:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),g=TWEEN.Interpolation.Utils.CatmullRom;return a[0]===a[b]?(0>c&&(e=Math.floor(d=b*(1+c))),g(a[(e- +1+b)%b],a[e],a[(e+1)%b],a[(e+2)%b],d-e)):0>c?a[0]-(g(a[0],a[0],a[1],a[1],-d)-a[0]):1 + + + Tween.js / timeScale + + + + + + +
+

tween.js

+

13 _ timeScale

+

Demonstrating the timeScale() feature.

+

+
+
+
+ 1x +
+
+ + + + + + + + diff --git a/examples/css/PIE.htc b/examples/css/PIE.htc new file mode 100644 index 00000000..ca3b5470 --- /dev/null +++ b/examples/css/PIE.htc @@ -0,0 +1,96 @@ + + + + + + + + + diff --git a/examples/js/CSSMatrix.js b/examples/js/CSSMatrix.js new file mode 100644 index 00000000..ee61811c --- /dev/null +++ b/examples/js/CSSMatrix.js @@ -0,0 +1,375 @@ +"use strict"; + +// a CSSMatrix shim +// http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface +// http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface + +/** + * CSSMatrix Shim + * @constructor + */ +var CSSMatrix = function(){ + var a = [].slice.call(arguments), + m = this; + if (a.length) for (var i = a.length; i--;){ + if (Math.abs(a[i]) < CSSMatrix.SMALL_NUMBER) a[i] = 0; + } + m.setIdentity(); + if (a.length == 16){ + m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m13 = a[2]; m.m14 = a[3]; + m.m21 = m.c = a[4]; m.m22 = m.d = a[5]; m.m23 = a[6]; m.m24 = a[7]; + m.m31 = a[8]; m.m32 = a[9]; m.m33 = a[10]; m.m34 = a[11]; + m.m41 = m.e = a[12]; m.m42 = m.f = a[13]; m.m43 = a[14]; m.m44 = a[15]; + } else if (a.length == 6) { + this.affine = true; + m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m14 = m.e = a[4]; + m.m21 = m.c = a[2]; m.m22 = m.d = a[3]; m.m24 = m.f = a[5]; + } else if (a.length === 1 && typeof a[0] == 'string') { + m.setMatrixValue(a[0]); + } else if (a.length > 0) { + throw new TypeError('Invalid Matrix Value'); + } +}; + +// decimal values in WebKitCSSMatrix.prototype.toString are truncated to 6 digits +CSSMatrix.SMALL_NUMBER = 1e-6; + +// Transformations + +// http://en.wikipedia.org/wiki/Rotation_matrix +CSSMatrix.Rotate = function(rx, ry, rz){ + rx *= Math.PI / 180; + ry *= Math.PI / 180; + rz *= Math.PI / 180; + // minus sin() because of right-handed system + var cosx = Math.cos(rx), sinx = - Math.sin(rx); + var cosy = Math.cos(ry), siny = - Math.sin(ry); + var cosz = Math.cos(rz), sinz = - Math.sin(rz); + var m = new CSSMatrix(); + + m.m11 = m.a = cosy * cosz; + m.m12 = m.b = - cosy * sinz; + m.m13 = siny; + + m.m21 = m.c = sinx * siny * cosz + cosx * sinz; + m.m22 = m.d = cosx * cosz - sinx * siny * sinz; + m.m23 = - sinx * cosy; + + m.m31 = sinx * sinz - cosx * siny * cosz; + m.m32 = sinx * cosz + cosx * siny * sinz; + m.m33 = cosx * cosy; + + return m; +}; + +CSSMatrix.RotateAxisAngle = function(x, y, z, angle){ + angle *= Math.PI / 360; + + var sinA = Math.sin(angle), cosA = Math.cos(angle), sinA2 = sinA * sinA; + var length = Math.sqrt(x * x + y * y + z * z); + + if (length === 0){ + // bad vector length, use something reasonable + x = 0; + y = 0; + z = 1; + } else { + x /= length; + y /= length; + z /= length; + } + + var x2 = x * x, y2 = y * y, z2 = z * z; + + var m = new CSSMatrix(); + m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2; + m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA); + m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA); + m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA); + m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2; + m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA); + m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA); + m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA); + m.m33 = 1 - 2 * (x2 + y2) * sinA2; + m.m14 = m.m24 = m.m34 = 0; + m.m41 = m.e = m.m42 = m.f = m.m43 = 0; + m.m44 = 1; + + return m; +}; + +CSSMatrix.ScaleX = function(x){ + var m = new CSSMatrix(); + m.m11 = m.a = x; + return m; +}; + +CSSMatrix.ScaleY = function(y){ + var m = new CSSMatrix(); + m.m22 = m.d = y; + return m; +}; + +CSSMatrix.ScaleZ = function(z){ + var m = new CSSMatrix(); + m.m33 = z; + return m; +}; + +CSSMatrix.Scale = function(x, y, z){ + var m = new CSSMatrix(); + m.m11 = m.a = x; + m.m22 = m.d = y; + m.m33 = z; + return m; +}; + +CSSMatrix.SkewX = function(angle){ + angle *= Math.PI / 180; + var m = new CSSMatrix(); + m.m21 = m.c = Math.tan(angle); + return m; +}; + +CSSMatrix.SkewY = function(angle){ + angle *= Math.PI / 180; + var m = new CSSMatrix(); + m.m12 = m.b = Math.tan(angle); + return m; +}; + +CSSMatrix.Translate = function(x, y, z){ + var m = new CSSMatrix(); + m.m41 = m.e = x; + m.m42 = m.f = y; + m.m43 = z; + return m; +}; + +CSSMatrix.multiply = function(m1, m2){ + + var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41, + m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42, + m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43, + m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44, + + m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41, + m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42, + m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43, + m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44, + + m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41, + m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42, + m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43, + m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44, + + m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41, + m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42, + m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43, + m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44; + + return new CSSMatrix( + m11, m12, m13, m14, + m21, m22, m23, m24, + m31, m32, m33, m34, + m41, m42, m43, m44 + ); +}; + +// w3c defined methods + +/** + * The setMatrixValue method replaces the existing matrix with one computed + * from parsing the passed string as though it had been assigned to the + * transform property in a CSS style rule. + * @param {String} string The string to parse. + */ +CSSMatrix.prototype.setMatrixValue = function(string){ + string = String(string).trim(); + var m = this; + m.setIdentity(); + if (string == 'none') return m; + var type = string.slice(0, string.indexOf('(')), parts, i; + if (type == 'matrix3d'){ + parts = string.slice(9, -1).split(','); + for (i = parts.length; i--;) parts[i] = parseFloat(parts[i]); + m.m11 = m.a = parts[0]; m.m12 = m.b = parts[1]; m.m13 = parts[2]; m.m14 = parts[3]; + m.m21 = m.c = parts[4]; m.m22 = m.d = parts[5]; m.m23 = parts[6]; m.m24 = parts[7]; + m.m31 = parts[8]; m.m32 = parts[9]; m.m33 = parts[10]; m.m34 = parts[11]; + m.m41 = m.e = parts[12]; m.m42 = m.f = parts[13]; m.m43 = parts[14]; m.m44 = parts[15]; + } else if (type == 'matrix'){ + m.affine = true; + parts = string.slice(7, -1).split(','); + for (i = parts.length; i--;) parts[i] = parseFloat(parts[i]); + m.m11 = m.a = parts[0]; m.m12 = m.b = parts[2]; m.m41 = m.e = parts[4]; + m.m21 = m.c = parts[1]; m.m22 = m.d = parts[3]; m.m42 = m.f = parts[5]; + } else { + throw new TypeError('Invalid Matrix Value'); + } + return m; +}; + +/** + * The multiply method returns a new CSSMatrix which is the result of this + * matrix multiplied by the passed matrix, with the passed matrix to the right. + * This matrix is not modified. + * + * @param {CSSMatrix} m2 + * @return {CSSMatrix} The result matrix. + */ +CSSMatrix.prototype.multiply = function(m2){ + return CSSMatrix.multiply(this, m2); +}; + +/** + * The inverse method returns a new matrix which is the inverse of this matrix. + * This matrix is not modified. + * + * method not implemented yet + */ +CSSMatrix.prototype.inverse = function(){ + throw new Error('the inverse() method is not implemented (yet).'); +}; + +/** + * The translate method returns a new matrix which is this matrix post + * multiplied by a translation matrix containing the passed values. If the z + * component is undefined, a 0 value is used in its place. This matrix is not + * modified. + * + * @param {number} x X component of the translation value. + * @param {number} y Y component of the translation value. + * @param {number=} z Z component of the translation value. + * @return {CSSMatrix} The result matrix + */ +CSSMatrix.prototype.translate = function(x, y, z){ + if (z == null) z = 0; + return CSSMatrix.multiply(this, CSSMatrix.Translate(x, y, z)); +}; + +/** + * The scale method returns a new matrix which is this matrix post multiplied by + * a scale matrix containing the passed values. If the z component is undefined, + * a 1 value is used in its place. If the y component is undefined, the x + * component value is used in its place. This matrix is not modified. + * + * @param {number} x The X component of the scale value. + * @param {number=} y The Y component of the scale value. + * @param {number=} z The Z component of the scale value. + * @return {CSSMatrix} The result matrix + */ +CSSMatrix.prototype.scale = function(x, y, z){ + if (y == null) y = x; + if (z == null) z = 1; + return CSSMatrix.multiply(this, CSSMatrix.Scale(x, y, z)); +}; + +/** + * The rotate method returns a new matrix which is this matrix post multiplied + * by each of 3 rotation matrices about the major axes, first X, then Y, then Z. + * If the y and z components are undefined, the x value is used to rotate the + * object about the z axis, as though the vector (0,0,x) were passed. All + * rotation values are in degrees. This matrix is not modified. + * + * @param {number} rx The X component of the rotation value, or the Z component if the rotY and rotZ parameters are undefined. + * @param {number=} ry The (optional) Y component of the rotation value. + * @param {number=} rz The (optional) Z component of the rotation value. + * @return {CSSMatrix} The result matrix + */ +CSSMatrix.prototype.rotate = function(rx, ry, rz){ + if (ry == null) ry = rx; + if (rz == null) rz = rx; + return CSSMatrix.multiply(this, CSSMatrix.Rotate(rx, ry, rz)); +}; + +/** + * The rotateAxisAngle method returns a new matrix which is this matrix post + * multiplied by a rotation matrix with the given axis and angle. The right-hand + * rule is used to determine the direction of rotation. All rotation values are + * in degrees. This matrix is not modified. + * + * @param {number} x The X component of the axis vector. + * @param {number=} y The Y component of the axis vector. + * @param {number=} z The Z component of the axis vector. + * @param {number} angle The angle of rotation about the axis vector, in degrees. + * @return {CSSMatrix} The result matrix + */ +CSSMatrix.prototype.rotateAxisAngle = function(x, y, z, angle){ + if (y == null) y = x; + if (z == null) z = x; + return CSSMatrix.multiply(this, CSSMatrix.RotateAxisAngle(x, y, z, angle)); +}; + +// Defined in WebKitCSSMatrix, but not in the w3c draft + +/** + * Specifies a skew transformation along the x-axis by the given angle. + * + * @param {number} angle The angle amount in degrees to skew. + * @return {CSSMatrix} The result matrix + */ +CSSMatrix.prototype.skewX = function(angle){ + return CSSMatrix.multiply(this, CSSMatrix.SkewX(angle)); +}; + +/** + * Specifies a skew transformation along the x-axis by the given angle. + * + * @param {number} angle The angle amount in degrees to skew. + * @return {CSSMatrix} The result matrix + */ +CSSMatrix.prototype.skewY = function(angle){ + return CSSMatrix.multiply(this, CSSMatrix.SkewY(angle)); +}; + +/** + * Returns a string representation of the matrix. + * @return {string} + */ +CSSMatrix.prototype.toString = function(){ + var m = this; + + if (this.affine){ + return 'matrix(' + [ + m.a, m.b, + m.c, m.d, + m.e, m.f + ].join(', ') + ')'; + } + // note: the elements here are transposed + return 'matrix3d(' + [ + m.m11, m.m12, m.m13, m.m14, + m.m21, m.m22, m.m23, m.m24, + m.m31, m.m32, m.m33, m.m34, + m.m41, m.m42, m.m43, m.m44 + ].join(', ') + ')'; +}; + + +// Additional methods + +/** + * Set the current matrix to the identity form + * + * @return {CSSMatrix} this matrix + */ +CSSMatrix.prototype.setIdentity = function(){ + var m = this; + m.m11 = m.a = 1; m.m12 = m.b = 0; m.m13 = 0; m.m14 = 0; + m.m21 = m.c = 0; m.m22 = m.d = 1; m.m23 = 0; m.m24 = 0; + m.m31 = 0; m.m32 = 0; m.m33 = 1; m.m34 = 0; + m.m41 = m.e = 0; m.m42 = m.f = 0; m.m43 = 0; m.m44 = 1; + return this; +}; + +CSSMatrix.prototype.toFullString = function(){ + var m = this; + return [ + [m.m11, m.m12, m.m13, m.m14].join(', '), + [m.m21, m.m22, m.m23, m.m24].join(', '), + [m.m31, m.m32, m.m33, m.m34].join(', '), + [m.m41, m.m42, m.m43, m.m44].join(', ') + ].join('\n'); +}; + +window.CSSMatrix = CSSMatrix; diff --git a/examples/js/pre.js b/examples/js/pre.js new file mode 100644 index 00000000..fdc0429d --- /dev/null +++ b/examples/js/pre.js @@ -0,0 +1,15 @@ +/*! + * Modernizr.prefixed() like Javascript DOM prefixer + * @author @dalisoft, (https://github.com/dalisoft) + * @license MIT-License, (http://bit.ly/mit-license) + * @copyright (c) 2014, @dalisoft. All right reserved + */ + +function pre(s) { + var r, + p = navigator.userAgent.match(/WebKit|Firefox|Opera|M(S|s)/g).toString().toLowerCase(); + r = p == 'firefox' ? 'Moz' : p == 'opera' ? 'O' : p; + if (s) + r = p + (s.charAt(0).toUpperCase() + s.substr(1)); + return r; +} diff --git a/src/Tween.js b/src/Tween.js index 0b3c091f..896a1afc 100644 --- a/src/Tween.js +++ b/src/Tween.js @@ -1,14 +1,15 @@ /** - * Tween.js - Licensed under the MIT license - * https://github.com/sole/tween.js - * ---------------------------------------------- + * Tween.js - High-performance tweening engine + + * Special factored for @sole tween.js repo by @dalisoft + * Licensed under ulta-permissive MIT-Licensed + * + * This code editing restricted, if not contributed to @sole tween.js repo! * - * See https://github.com/sole/tween.js/graphs/contributors for the full list of contributors. - * Thank you all, you're awesome! */ // Date.now shim for (ahem) Internet Explo(d|r)er -if ( Date.now === undefined ) { +if (Date.now === undefined) { Date.now = function () { @@ -18,105 +19,124 @@ if ( Date.now === undefined ) { } -var TWEEN = TWEEN || ( function () { +// [a, b, c].indexOf(b) - Array.indexOf shim for (ahem) Internet Explo(d|r)er +Array.prototype.indexOf = Array.prototype.indexOf || function (arr) { + var value = -1; + for (var i = 0; i < this.length; i++) { + if (this[i] === arr) { + value = i; + } + } + return value; +}; - var _tweens = []; +var TWEEN = TWEEN || (function () { - return { + var _tweens = []; - REVISION: '14', + return { - getAll: function () { + REVISION : '15dev', - return _tweens; + getAll : function () { - }, + return _tweens; - removeAll: function () { + }, - _tweens = []; + removeAll : function () { - }, + _tweens = []; - add: function ( tween ) { + }, - _tweens.push( tween ); + add : function (tween) { - }, + _tweens.push(tween); - remove: function ( tween ) { + }, - var i = _tweens.indexOf( tween ); + remove : function (tween) { - if ( i !== -1 ) { + var i = _tweens.indexOf(tween); - _tweens.splice( i, 1 ); + if (i !== -1) { - } + _tweens.splice(i, 1); - }, - - update: function ( time ) { + } - if ( _tweens.length === 0 ) return false; + }, - var i = 0; + update : function (time) { - time = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() ); + if (_tweens.length === 0) { + return false; + } - while ( i < _tweens.length ) { + var i = 0; - if ( _tweens[ i ].update( time ) ) { + time = time !== undefined ? time : (typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now()); + for (var i = 0; i < _tweens.length; i++) { - i++; + if (_tweens[i].update(time)) { - } else { + i++; - _tweens.splice( i, 1 ); + } else { - } + _tweens.splice(i, 1); - } + } - return true; + } - } - }; + return true; -} )(); - -TWEEN.Tween = function ( object ) { - - var _object = object; - var _valuesStart = {}; - var _valuesEnd = {}; - var _valuesStartRepeat = {}; - var _duration = 1000; - var _repeat = 0; - var _yoyo = false; - var _isPlaying = false; - var _reversed = false; - var _delayTime = 0; - var _startTime = null; - var _easingFunction = TWEEN.Easing.Linear.None; - var _interpolationFunction = TWEEN.Interpolation.Linear; - var _chainedTweens = []; - var _onStartCallback = null; - var _onStartCallbackFired = false; - var _onUpdateCallback = null; - var _onCompleteCallback = null; - var _onStopCallback = null; + } + }; + + })(); + +TWEEN.Tween = function (object) { + + var _object = object, + _valuesStart = {}, + _valuesEnd = {}, + _valuesStartRepeat = {}, + _duration = 1000, + _repeat = 0, + _yoyo = false, + _isPlaying = false, + _reversed = false, + _reverse = false, + _delayTime = 0, + _startTime = null, + _easingFunction = TWEEN.Easing.Linear.None, + _interpolationFunction = TWEEN.Interpolation.Linear, + _chainedTweens = [], + _onStartCallback = null, + _onStartCallbackFired = false, + _onUpdateCallback = null, + _onCompleteCallback = null, + _onStopCallback = null, + _paused = false, + _pauseStart = null, + _timeScale = 1, + _now = null, + _seek = 0, + _stagger = 100; // Set all starting values present on the target object - for ( var field in object ) { + for (var field in object) { - _valuesStart[ field ] = parseFloat(object[field], 10); + _valuesStart[field] = parseFloat(object[field], 10); } - this.to = function ( properties, duration ) { + this.to = function (properties, duration) { - if ( duration !== undefined ) { + if (duration !== undefined) { _duration = duration; @@ -128,59 +148,227 @@ TWEEN.Tween = function ( object ) { }; - this.start = function ( time ) { + this.timeScale = function (scale) { + + _timeScale = scale; + + // we now developing + + return this; + + }; + + this.pause = function () { + if (_paused) + return; + + _paused = true; + _pauseStart = Date.now(); + + TWEEN.remove(this); + + return this; + }; + + this.play = function () { + if (!_paused) + return; + + _paused = false; + + _now = Date.now(); + + _startTime += _now - _pauseStart; + + TWEEN.add(this); + + return this; + }; + + this.seek = function (time) { + + _seek = time; + // we now developing + + return this; + }; + + this.start = function (time) { - TWEEN.add( this ); + TWEEN.add(this); _isPlaying = true; _onStartCallbackFired = false; - _startTime = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() ); + + if ( time === undefined) { + if ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ) { + time = window.performance.now(); + } else { + time = Date.now(); + } + } + + _startTime = time; _startTime += _delayTime; - for ( var property in _valuesEnd ) { - + for (var property in _valuesEnd) { // check if an Array was provided as property value - if ( _valuesEnd[ property ] instanceof Array ) { + if (_valuesEnd[property] instanceof Array && !(_valuesStart[property] instanceof Array)) { - if ( _valuesEnd[ property ].length === 0 ) { + if (_valuesEnd[property].length === 0) { continue; } // create a local copy of the Array with the start value at the front - _valuesEnd[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] ); + _valuesEnd[property] = [_object[property]].concat(_valuesEnd[property]); } - _valuesStart[ property ] = _object[ property ]; - - if( ( _valuesStart[ property ] instanceof Array ) === false ) { - _valuesStart[ property ] *= 1.0; // Ensures we're using numbers, not strings + if (!(_valuesStart[property] instanceof Array)) { + _valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings + } else if (_valuesStart[property] instanceof Array) { + var _arrNum = _valuesStart[property]; + for (var i = 0; i < _arrNum.length; i++) { + _arrNum[i] *= 1.0; // Ensures we're using numbers, not strings + } } - _valuesStartRepeat[ property ] = _valuesStart[ property ] || 0; + _valuesStart[property] = _object[property]; + + _valuesStartRepeat[property] = _valuesStart[property] || 0; } return this; }; + + this.animate = function (_el, onUpdate) { + return this.onUpdate(function () { + onUpdate = onUpdate || function () {}; + onUpdate.call(this); + var d2r = Math.PI / 180, xyUnit = this.xyUnit || 'px'; + + if (this.scale) { + this.scaleX = this.scale; + this.scaleY = this.scale; + } + if (_el.currentStyle) { + this.scaleX = this.scaleX || 1; + this.scaleY = this.scaleY || 1; + } + if ( typeof CSSMatrix === 'undefined' ) { + throw new TypeError("WARNING: Tween.js required CSSMatrix to calculate matrix for IE support"); + } + var m = new CSSMatrix().rotate(0, 0, -this.rotate).scale(this.scaleX, this.scaleY, 1).skewX(this.skewX || 0).skewY(this.skewY || 0); + //console.log(m.m11, m.m12, m.m21, m.m22); + var arr, ieF = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m.m11 + ', M12=' + m.m12 + ', M21=' + m.m21 + ', M22=' + m.m22 + ', sizingMethod=\'auto expand\')'; + ieF = this.rotate && this.opacity ? ieF + ', alpha(opacity=' + (this.opacity * 100) + ')' : ieF; + for (var k in this) { + if (k.toString().match(/backgroundColor|color/g) && this[k] instanceof Array) { + arr = this[k]; + for (var i = 0; i < arr.length; i++) { + arr[i] = parseFloat(arr[i].toString().substr(0, (arr.length === 3) ? 3 : 4)); + } + _el.style[k] = (arr.length === 3) ? 'rgb(' + arr.join(",") + ')' : 'rgba(' + arr.join(",") + ')'; + } + if (k.toString().match(/padding|margin|borderRadius|clip/g) && this[k] instanceof Array) { + arr = this[k]; + if (k === 'borderRadius') { + k = pre('borderRadius') in _el.style ? pre('borderRadius') : '-pie-border-radius'; + /*! for older browsers, required prefix, [webkit, moz, ms, o] like */ + } + _el.style[k] = (k === 'clip') ? 'rect(' + arr.join("px ") + 'px)' : arr.join("px ") + 'px'; + } + if (_el.currentStyle) { + if (this.x) { + _el.style.marginLeft = (this.marginLeft ? this.marginLeft + this.x : this.x) + xyUnit; + } + if (this.y) { + _el.style.marginTop = (this.marginTop ? this.marginTop + this.y : this.y) + xyUnit; + } + if (this.rotate) { + _el.style.filter = ieF; + } + } + if (/scroll/g.test(k.toString())) { + _el[k] = this[k]; + } + var fil = ''; + if (this.brightness) { + fil += ' brightness(' + this.brightness + '%)'; + } + if (this.contrast) { + fil += ' contrast(' + this.contrast + '%)'; + } + if (this.saturate) { + fil += ' saturate(' + this.saturate + '%)'; + } + _el.style[pre('filter')] = fil; + + var ha = pre('perspective') in _el.style, xy = ''; + + if (this.x || this.y || this.z) { + xy = ha ? ' translate3d(' + (this.x || 0) + '' + xyUnit + ', ' + (this.y || 0) + '' + xyUnit + ', ' + (this.z || 0) + 'px)' : ' translate(' + (this.x || 0) + '' + xyUnit + ', ' + (this.y || 0) + '' + xyUnit + ')'; + } + if (this.rotate) { + xy += ha ? ' rotateZ(' + this.rotate + 'deg)' : ' rotate(' + this.rotate + 'deg)'; + } + if (this.scale && !this.scaleX && !this.scaleY) { + xy += ' scale(' + this.scale + ')'; + } + if (this.scaleX && !this.scale) { + xy += ' scaleX(' + this.scaleX + ')'; + } + if (this.scaleY && !this.scale) { + xy += ' scaleY(' + this.scaleY + ')'; + } + if (this.rotateX) { + xy += ' rotateX(' + this.rotateX + 'deg)'; + } + if (this.rotateY) { + xy += ' rotateY(' + this.rotateY + 'deg)'; + } + if (this.skewX) { + xy += ' skewX(' + this.skewX + 'deg)'; + } + if (this.skewY) { + xy += ' skewX(' + this.skewY + 'deg)'; + } + _el.style[pre('transform')] = xy; + if (k !== 'clip') { + _el.style[k] = this[k]; + } + } + }); + + } + + this.restart = function () { + + + // we now developing this feature + + return this; + + }; this.stop = function () { - if ( !_isPlaying ) { + if (!_isPlaying) { return this; } - TWEEN.remove( this ); + TWEEN.remove(this); _isPlaying = false; - if ( _onStopCallback !== null ) { + if (_onStopCallback !== null) { - _onStopCallback.call( _object ); + _onStopCallback.call(_object); } @@ -191,44 +379,57 @@ TWEEN.Tween = function ( object ) { this.stopChainedTweens = function () { - for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) { + for (var i = 0; i < _chainedTweens.length; i++) { - _chainedTweens[ i ].stop(); + _chainedTweens[i].stop(); } }; - this.delay = function ( amount ) { + this.delay = function (amount) { _delayTime = amount; return this; }; + + this.stagger = function (amount) { + + _stagger = amount; + return this; + + } - this.repeat = function ( times ) { + this.repeat = function (times) { _repeat = times; return this; }; - this.yoyo = function( yoyo ) { + this.yoyo = function (yoyo) { _yoyo = yoyo; return this; }; + this.reverse = function (reverse) { - this.easing = function ( easing ) { + _reverse = reverse; + return this; + + }; + + this.easing = function (easing) { _easingFunction = easing; return this; }; - this.interpolation = function ( interpolation ) { + this.interpolation = function (interpolation) { _interpolationFunction = interpolation; return this; @@ -242,49 +443,49 @@ TWEEN.Tween = function ( object ) { }; - this.onStart = function ( callback ) { + this.onStart = function (callback) { _onStartCallback = callback; return this; }; - this.onUpdate = function ( callback ) { + this.onUpdate = function (callback) { _onUpdateCallback = callback; return this; }; - this.onComplete = function ( callback ) { + this.onComplete = function (callback) { _onCompleteCallback = callback; return this; }; - this.onStop = function ( callback ) { + this.onStop = function (callback) { _onStopCallback = callback; return this; }; - this.update = function ( time ) { + this.update = function (time) { var property; - if ( time < _startTime ) { + if (time < _startTime) { return true; } - if ( _onStartCallbackFired === false ) { + if (!_onStartCallbackFired) { - if ( _onStartCallback !== null ) { + if (_onStartCallback !== null) { - _onStartCallback.call( _object ); + _onStartCallback.call(_object); } @@ -292,64 +493,64 @@ TWEEN.Tween = function ( object ) { } - var elapsed = ( time - _startTime ) / _duration; + var elapsed = (time - _startTime) / (_duration / _timeScale); elapsed = elapsed > 1 ? 1 : elapsed; - var value = _easingFunction( elapsed ); + var value = _easingFunction(elapsed); - for ( property in _valuesEnd ) { + for (property in _valuesEnd) { - var start = _valuesStart[ property ] || 0; - var end = _valuesEnd[ property ]; + var start = (_reverse ? _valuesEnd[property] : _valuesStart[property]) || 0; + var end = _reverse ? _valuesStart[property] : _valuesEnd[property]; + var _interpolationEnd = _valuesEnd[property]; - if ( end instanceof Array ) { - - _object[ property ] = _interpolationFunction( end, value ); + if (!(start instanceof Array) && end instanceof Array) { + _interpolationEnd = _reverse ? _interpolationEnd.reverse() : _interpolationEnd; + _object[property] = _interpolationFunction(_interpolationEnd, value); } else { // Parses relative end values with start as base (e.g.: +10, -3) - if ( typeof(end) === "string" ) { + if (typeof(end) === "string") { end = start + parseFloat(end, 10); } // protect against non numeric properties. - if ( typeof(end) === "number" ) { - _object[ property ] = start + ( end - start ) * value; + if (typeof(end) === "number") { + _object[property] = start + (end - start) * value; } } } - if ( _onUpdateCallback !== null ) { - - _onUpdateCallback.call( _object, value ); + if (_onUpdateCallback !== null) { + _onUpdateCallback.call(_object, value); } - if ( elapsed == 1 ) { + if (elapsed === 1) { - if ( _repeat > 0 ) { + if (_repeat > 0) { - if( isFinite( _repeat ) ) { + if (isFinite(_repeat)) { _repeat--; } // reassign starting values, restart by making startTime = now - for( property in _valuesStartRepeat ) { + for (property in _valuesStartRepeat) { - if ( typeof( _valuesEnd[ property ] ) === "string" ) { - _valuesStartRepeat[ property ] = _valuesStartRepeat[ property ] + parseFloat(_valuesEnd[ property ], 10); + if (typeof(_valuesEnd[property]) === "string") { + _valuesStartRepeat[property] = _valuesStartRepeat[property] + parseFloat(_valuesEnd[property], 10); } if (_yoyo) { - var tmp = _valuesStartRepeat[ property ]; - _valuesStartRepeat[ property ] = _valuesEnd[ property ]; - _valuesEnd[ property ] = tmp; + var tmp = _valuesStartRepeat[property]; + _valuesStartRepeat[property] = _valuesEnd[property]; + _valuesEnd[property] = tmp; } - _valuesStart[ property ] = _valuesStartRepeat[ property ]; + _valuesStart[property] = _valuesStartRepeat[property]; } @@ -363,15 +564,15 @@ TWEEN.Tween = function ( object ) { } else { - if ( _onCompleteCallback !== null ) { + if (_onCompleteCallback !== null) { - _onCompleteCallback.call( _object ); + _onCompleteCallback.call(_object); } - for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) { + for (var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++) { - _chainedTweens[ i ].start( time ); + _chainedTweens[i].start(time); } @@ -387,12 +588,11 @@ TWEEN.Tween = function ( object ) { }; - TWEEN.Easing = { - Linear: { + Linear : { - None: function ( k ) { + None : function (k) { return k; @@ -400,360 +600,425 @@ TWEEN.Easing = { }, - Quadratic: { + Quadratic : { - In: function ( k ) { + In : function (k) { return k * k; }, - Out: function ( k ) { + Out : function (k) { - return k * ( 2 - k ); + return k * (2 - k); }, - InOut: function ( k ) { + InOut : function (k) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k; - return - 0.5 * ( --k * ( k - 2 ) - 1 ); + if ((k *= 2) < 1) + return 0.5 * k * k; + return - 0.5 * (--k * (k - 2) - 1); } }, - Cubic: { + Cubic : { - In: function ( k ) { + In : function (k) { return k * k * k; }, - Out: function ( k ) { + Out : function (k) { return --k * k * k + 1; }, - InOut: function ( k ) { + InOut : function (k) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k; - return 0.5 * ( ( k -= 2 ) * k * k + 2 ); + if ((k *= 2) < 1) + return 0.5 * k * k * k; + return 0.5 * ((k -= 2) * k * k + 2); } }, - Quartic: { + Quartic : { - In: function ( k ) { + In : function (k) { return k * k * k * k; }, - Out: function ( k ) { + Out : function (k) { - return 1 - ( --k * k * k * k ); + return 1 - (--k * k * k * k); }, - InOut: function ( k ) { + InOut : function (k) { - if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k; - return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 ); + if ((k *= 2) < 1) + return 0.5 * k * k * k * k; + return - 0.5 * ((k -= 2) * k * k * k - 2); } }, - Quintic: { + Quintic : { - In: function ( k ) { + In : function (k) { return k * k * k * k * k; }, - Out: function ( k ) { + Out : function (k) { return --k * k * k * k * k + 1; }, - InOut: function ( k ) { + InOut : function (k) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k; - return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 ); + if ((k *= 2) < 1) + return 0.5 * k * k * k * k * k; + return 0.5 * ((k -= 2) * k * k * k * k + 2); } }, - Sinusoidal: { + Sinusoidal : { - In: function ( k ) { + In : function (k) { - return 1 - Math.cos( k * Math.PI / 2 ); + return 1 - Math.cos(k * Math.PI / 2); }, - Out: function ( k ) { + Out : function (k) { - return Math.sin( k * Math.PI / 2 ); + return Math.sin(k * Math.PI / 2); }, - InOut: function ( k ) { + InOut : function (k) { - return 0.5 * ( 1 - Math.cos( Math.PI * k ) ); + return 0.5 * (1 - Math.cos(Math.PI * k)); } }, - Exponential: { + Exponential : { - In: function ( k ) { + In : function (k) { - return k === 0 ? 0 : Math.pow( 1024, k - 1 ); + return k === 0 ? 0 : Math.pow(1024, k - 1); }, - Out: function ( k ) { + Out : function (k) { - return k === 1 ? 1 : 1 - Math.pow( 2, - 10 * k ); + return k === 1 ? 1 : 1 - Math.pow(2, - 10 * k); }, - InOut: function ( k ) { + InOut : function (k) { - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 1024, k - 1 ); - return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 ); + if (k === 0) + return 0; + if (k === 1) + return 1; + if ((k *= 2) < 1) + return 0.5 * Math.pow(1024, k - 1); + return 0.5 * ( - Math.pow(2, - 10 * (k - 1)) + 2); } }, - Circular: { + Circular : { - In: function ( k ) { + In : function (k) { - return 1 - Math.sqrt( 1 - k * k ); + return 1 - Math.sqrt(1 - k * k); }, - Out: function ( k ) { + Out : function (k) { - return Math.sqrt( 1 - ( --k * k ) ); + return Math.sqrt(1 - (--k * k)); }, - InOut: function ( k ) { + InOut : function (k) { - if ( ( k *= 2 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1); - return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1); + if ((k *= 2) < 1) + return - 0.5 * (Math.sqrt(1 - k * k) - 1); + return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1); } }, - Elastic: { + Elastic : { - In: function ( k ) { + In : function (k) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); + var s, + a = 0.1, + p = 0.4; + if (k === 0) + return 0; + if (k === 1) + return 1; + if (!a || a < 1) { + a = 1; + s = p / 4; + } else + s = p * Math.asin(1 / a) / (2 * Math.PI); + return - (a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p)); }, - Out: function ( k ) { - - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 ); + Out : function (k) { + + var s, + a = 0.1, + p = 0.4; + if (k === 0) + return 0; + if (k === 1) + return 1; + if (!a || a < 1) { + a = 1; + s = p / 4; + } else + s = p * Math.asin(1 / a) / (2 * Math.PI); + return (a * Math.pow(2, - 10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1); }, - InOut: function ( k ) { - - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); - return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1; + InOut : function (k) { + + var s, + a = 0.1, + p = 0.4; + if (k === 0) + return 0; + if (k === 1) + return 1; + if (!a || a < 1) { + a = 1; + s = p / 4; + } else + s = p * Math.asin(1 / a) / (2 * Math.PI); + if ((k *= 2) < 1) + return - 0.5 * (a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p)); + return a * Math.pow(2, -10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1; } }, - Back: { + Back : { - In: function ( k ) { + In : function (k) { var s = 1.70158; - return k * k * ( ( s + 1 ) * k - s ); + return k * k * ((s + 1) * k - s); }, - Out: function ( k ) { + Out : function (k) { var s = 1.70158; - return --k * k * ( ( s + 1 ) * k + s ) + 1; + return --k * k * ((s + 1) * k + s) + 1; }, - InOut: function ( k ) { + InOut : function (k) { var s = 1.70158 * 1.525; - if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) ); - return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 ); + if ((k *= 2) < 1) + return 0.5 * (k * k * ((s + 1) * k - s)); + return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2); } }, - Bounce: { + Bounce : { - In: function ( k ) { + In : function (k) { - return 1 - TWEEN.Easing.Bounce.Out( 1 - k ); + return 1 - TWEEN.Easing.Bounce.Out(1 - k); }, - Out: function ( k ) { + Out : function (k) { - if ( k < ( 1 / 2.75 ) ) { + if (k < (1 / 2.75)) { return 7.5625 * k * k; - } else if ( k < ( 2 / 2.75 ) ) { + } else if (k < (2 / 2.75)) { - return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; + return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75; - } else if ( k < ( 2.5 / 2.75 ) ) { + } else if (k < (2.5 / 2.75)) { - return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; + return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375; } else { - return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; + return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375; } }, - InOut: function ( k ) { + InOut : function (k) { - if ( k < 0.5 ) return TWEEN.Easing.Bounce.In( k * 2 ) * 0.5; - return TWEEN.Easing.Bounce.Out( k * 2 - 1 ) * 0.5 + 0.5; + if (k < 0.5) + return TWEEN.Easing.Bounce.In(k * 2) * 0.5; + return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5; } + }, + + SteppedEase : { + config : function (steps) { + return function (k) { + return Math.floor(k * steps) / steps; + } + } } }; TWEEN.Interpolation = { - Linear: function ( v, k ) { + Linear : function (v, k) { - var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.Linear; + var m = v.length - 1, + f = m * k, + i = Math.floor(f), + fn = TWEEN.Interpolation.Utils.Linear; - if ( k < 0 ) return fn( v[ 0 ], v[ 1 ], f ); - if ( k > 1 ) return fn( v[ m ], v[ m - 1 ], m - f ); + if (k < 0) + return fn(v[0], v[1], f); + if (k > 1) + return fn(v[m], v[m - 1], m - f); - return fn( v[ i ], v[ i + 1 > m ? m : i + 1 ], f - i ); + return fn(v[i], v[i + 1 > m ? m : i + 1], f - i); }, - Bezier: function ( v, k ) { + Bezier : function (v, k) { - var b = 0, n = v.length - 1, pw = Math.pow, bn = TWEEN.Interpolation.Utils.Bernstein, i; + var b = 0, + n = v.length - 1, + pw = Math.pow, + bn = TWEEN.Interpolation.Utils.Bernstein, + i; - for ( i = 0; i <= n; i++ ) { - b += pw( 1 - k, n - i ) * pw( k, i ) * v[ i ] * bn( n, i ); + for (i = 0; i <= n; i++) { + b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i); } return b; }, - CatmullRom: function ( v, k ) { + CatmullRom : function (v, k) { - var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.CatmullRom; + var m = v.length - 1, + f = m * k, + i = Math.floor(f), + fn = TWEEN.Interpolation.Utils.CatmullRom; - if ( v[ 0 ] === v[ m ] ) { + if (v[0] === v[m]) { - if ( k < 0 ) i = Math.floor( f = m * ( 1 + k ) ); + if (k < 0) + i = Math.floor(f = m * (1 + k)); - return fn( v[ ( i - 1 + m ) % m ], v[ i ], v[ ( i + 1 ) % m ], v[ ( i + 2 ) % m ], f - i ); + return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i); } else { - if ( k < 0 ) return v[ 0 ] - ( fn( v[ 0 ], v[ 0 ], v[ 1 ], v[ 1 ], -f ) - v[ 0 ] ); - if ( k > 1 ) return v[ m ] - ( fn( v[ m ], v[ m ], v[ m - 1 ], v[ m - 1 ], f - m ) - v[ m ] ); + if (k < 0) + return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]); + if (k > 1) + return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]); - return fn( v[ i ? i - 1 : 0 ], v[ i ], v[ m < i + 1 ? m : i + 1 ], v[ m < i + 2 ? m : i + 2 ], f - i ); + return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i); } }, - Utils: { + Utils : { - Linear: function ( p0, p1, t ) { + Linear : function (p0, p1, t) { - return ( p1 - p0 ) * t + p0; + return (p1 - p0) * t + p0; }, - Bernstein: function ( n , i ) { + Bernstein : function (n, i) { var fc = TWEEN.Interpolation.Utils.Factorial; - return fc( n ) / fc( i ) / fc( n - i ); + return fc(n) / fc(i) / fc(n - i); }, - Factorial: ( function () { + Factorial : (function () { - var a = [ 1 ]; + var a = [1]; - return function ( n ) { + return function (n) { - var s = 1, i; - if ( a[ n ] ) return a[ n ]; - for ( i = n; i > 1; i-- ) s *= i; - return a[ n ] = s; + var s = 1, + i; + if (a[n]) + return a[n]; + for (i = n; i > 1; i--) + s *= i; + return a[n] = s; }; - } )(), + })(), - CatmullRom: function ( p0, p1, p2, p3, t ) { + CatmullRom : function (p0, p1, p2, p3, t) { - var v0 = ( p2 - p0 ) * 0.5, v1 = ( p3 - p1 ) * 0.5, t2 = t * t, t3 = t * t2; - return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1; + var v0 = (p2 - p0) * 0.5, + v1 = (p3 - p1) * 0.5, + t2 = t * t, + t3 = t * t2; + return (2 * p1 - 2 * p2 + v0 + v1) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1; } } -}; - -if(typeof module !== 'undefined' && module.exports) { +} + +if (typeof(module) !== 'undefined' && module.exports) { module.exports = TWEEN; +} else if (typeof(define) === 'function' && define.amd) { + define(TWEEN) +} else { + window.TWEEN = TWEEN; }