diff --git a/README.md b/README.md index a0d0a80..c260765 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,15 @@ All Features: - + + + Keyframes + + x + - + - + + Presets (Effects) @@ -174,7 +183,7 @@ All Features: File Size (gzip) 6.1 kb 4.4 kb - 1.6 kb + 1.8 kb @@ -202,8 +211,8 @@ __"Animate" (2000 Bouncing Balls)__ 1 FAT - 0.6.0 - 1.6 kb + 0.6.1 + 1.8 kb 0.85 Mb 0.15 Mb 101075 @@ -401,7 +410,7 @@ __"Transforms" (2000 Bouncing Balls)__ 1 FAT - 0.6.0 + 0.6.1 90091 46.1 @@ -501,7 +510,7 @@ __"Colors" (2000 Flashing Balls)__ 1 FAT - 0.6.0 + 0.6.1 111951 56.5 @@ -713,9 +722,9 @@ Controller methods: ease - String + String | Function "linear" - Choose built-in easing. + Choose a pre-defined easing method or pass a custom easing function. @@ -739,32 +748,39 @@ Controller methods: Step function to be called on each tick (progress: the current state of progress between 0 and 1, value: the current value including the unit, just important when using custom properties). + + loop + Number + 0 + Loop count of sequences or keyframes. Set to -1 for inifinite loops. + + init Boolean false - Forces getting computed styles. + Forces getting computed styles during next animation loop. Just important when styles changes within the animation callback right before starting a new animation on the same style property (animation loop). force Boolean false - Forces style changes (like css "!important"). + Forces style changes (equal to css keyword "!important"). strict Boolean false - Do not override and keep different animations on same object's properties. + Do not override and keep different animations acts on same object's style properties. engine String "js" - Choose one of 3 render engines: "js", "css", "native". + Choose one of 3 render engines: "js", "css", "native". @@ -1088,39 +1104,114 @@ Fat.animate({}, { custom: 1 },{ ease: cubicInOut, step: function(progress, curre ``` -## Sequences (Keyframes) +## Sequences ```js Fat.animate("#mydiv", [ - { left: "100%" }, // 1st animation - { top: "100%" }, // 2nd animation - { left: 0 }, // 3rd animation - { top: 0 } // 4th animation + { left: "100%" }, // 1st animation, 2000ms + { top: "100%" }, // 2nd animation, 2000ms + { left: 0 }, // 3rd animation, 2000ms + { top: 0 } // 4th animation, 2000ms ],{ - callback: function(){ alert("Finished, call next loop") }, + callback: function(){ alert("Next Loop") }, + delay: 2000, loop: -1 // infinite }); ``` -You can also use custom options per style property: +Use custom options per style property: ```js -Fat.animate("#mydiv", [ - { - left: { // 1st animation - from: 0, - to: 100, - unit: "%", - duration: 2000 +Fat.animate("#mydiv", [{ + left: { // 1st animation + from: 0, + to: 100, + unit: "%", + duration: 2000 + } +},{ + top: { // 2nd animation + to: "100%", + duration: 2000, + ease: "easeInOut", + delay: 0 + } +}, +... +``` + + +## Keyframes + +```js +Fat.animate("#mydiv", { + "25%": { left: "100%" }, // 0 -> 25%, 500ms + "50%": { top: "100%" }, // 25 -> 50%, 500ms + "75%": { left: 0 }, // 50 -> 75%, 500ms + "100%": { top: 0 } // 75 -> 100%, 500ms +},{ + callback: function(){ alert("Next Loop") }, + delay: 2000, + loop: -1 // infinite +}); +``` + +Use custom options per style property: + +```js +Fat.animate("#mydiv", { + + "0%": { + left: { + to: "100%", + ease: "easeIn" } - },{ - top: { // 2nd animation + }, + "100%": { + top: { + to: "0%", + ease: "easeOut" + } + } +}, +... +``` + +You can also combine Sequences and Keyframes as well as custom options per style property: + +```js +Fat.animate("#mydiv", [{ + + "0%": { + left: 0, + top: 0 + }, + "100%": { + left: "100%", + top: "100%" + } +},{ + "0%": { + left: { + to: 0, + ease: "easeIn" + }, + top: { + to: 0, + ease: "easeIn" + } + }, + "100%": { + left: { to: "100%", - duration: 2000, - ease: "easeInOut", - delay: 0 + ease: "easeOut" + }, + top: { + to: "100%", + ease: "easeOut" } - }, + } +}], ... ``` @@ -1375,6 +1466,11 @@ Light Build: npm run build-light ``` +Compact Build: +```bash +npm run build-compact +``` + Custom Build: ```bash npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=true diff --git a/fat.compact.js b/fat.compact.js index 2432c19..1114237 100644 --- a/fat.compact.js +++ b/fat.compact.js @@ -1,26 +1,26 @@ /* - FAT v0.6.0 + FAT v0.6.1 Copyright 2019 Nextapps GmbH Author: Thomas Wilkerling Released under the Apache 2.0 Licence https://github.com/nextapps-de/fat */ -'use strict';(function(E,G,u){var q;(q=u.define)&&q.amd?q([],function(){return G}):(q=u.modules)?q[E.toLowerCase()]=G:"object"===typeof exports?module.exports=G:u[E]=G})("Fat",function(){function E(a,b,c,d,e,f,g,h,t,l,n,A,p,r,H,w,k,v){this.b=a;this.u=a.w;this.style=b;this.G=b.replace(/([A-Z])/g,"-$1").toLowerCase();this.a=d;this.c=e;this.l=d;this.i=f;this.h=g;this.duration=h;this.g=t;this.ease=Q(t);this.start=0;this.o=l;this.m=n;this.F=c;this.f=A;this.D=k?"%"===f||-1!==b.indexOf("A"):"px"!==f;k&& -(this.j=k,this.v=v);H&&(this.transform=H)}function G(a,b,c){var d=c||-1,e;if("#"===a[0])if(a=a.toLowerCase(),4===a.length){c=x[(e=a[1])+e];var f=x[(e=a[2])+e];var g=x[(e=a[3])+e]}else c=x[a[1]+a[2]],f=x[a[3]+a[4]],g=x[a[5]+a[6]];else e=L(a,"(",")").split(","),c=parseInt(e[0],10),f=parseInt(e[1],10),g=parseInt(e[2],10),3g?g*(1+f):g+f-g*f,e=2*g-a,f=u(e,a,c+1/3),g=u(e,a,c),a=u(e,a,c-1/3)),c=255*f+.5>>0,f=255*g+.5>>0,g=255*a+.5>>0);a= -{};a[b+"R"]=c;a[b+"G"]=f;a[b+"B"]=g;-1!==d&&(a[b+"A"]=d);return a}function u(a,b,c){0>c?c+=1:1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}function q(){this.id=++Z;this.stack=[];this.C=aa.bind(this);this.exec=0}function Q(a){if(M(a))if(a){var b;if(!(b=R[a])){if(b=N[a]||(N[a]=O.apply(O,ba[a]))){for(var c=new (Int16Array||Array)(z),d=0;d>0;b=c}else b=[];b=R[a]=b}a=b}else a=[];else a=null;return a}function aa(a){var b=this.stack.length;if(b){this.exec=requestAnimationFrame(this.C); -for(var c=!1,d=0;dv){m=b[k];"object"===typeof m&&(m=m.to);var B=G(m,k);n.push(m= -k+"R");b[m]=B[m];n.push(m=k+"G");b[m]=B[m];n.push(m=k+"B");b[m]=B[m];var q=!F(B=B[m=k+"A"]);q?(n.push(m),b[m]=B,k=m):k+="B";c+=q?4:3;v*=-1}p||1!==v?r||2!==v?H||3!==v||(H=k):r=k:p=k}}for(w=0;wD)continue;1===D?(v=p,q="color"):2===D?(m=r,q="backgroundColor"):3===D&&(B=H,q="borderColor")}D= -0;for(var K=a.length;Dg?g*(1+f):g+f-g*f,e=2*g-a,f=r(e,a,c+1/3),g=r(e,a,c),a=r(e,a,c-1/3)),c=255*f+.5>>0,f=255*g+.5>>0,g=255*a+.5>>0);a= +{};a[b+"R"]=c;a[b+"G"]=f;a[b+"B"]=g;-1!==d&&(a[b+"A"]=d);return a}function r(a,b,c){0>c?c+=1:1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}function n(){this.id=++Z;this.stack=[];this.C=aa.bind(this);this.exec=0}function P(a){if(L(a))if(a){var b;if(!(b=Q[a])){if(b=M[a]||(M[a]=O.apply(O,ba[a]))){for(var c=new (Int16Array||Array)(v),d=0;d>0;b=c}else b=[];b=Q[a]=b}a=b}else a=[];else a=null;return a}function aa(a){var b=this.stack.length;if(b){this.exec=requestAnimationFrame(this.C); +for(var c=!1,d=0;dt){p=b[k];"object"===typeof p&&(p=p.to);var z=G(p,k);h.push(p= +k+"R");b[p]=z[p];h.push(p=k+"G");b[p]=z[p];h.push(p=k+"B");b[p]=z[p];var E=!D(z=z[p=k+"A"]);E?(h.push(p),b[p]=z,k=p):k+="B";f+=E?4:3;t*=-1}n||1!==t?r||2!==t?y||3!==t||(y=k):r=k:n=k}}for(u=0;uB)continue;1===B?(t=n,E="color"):2===B?(p=r,E="backgroundColor"):3===B&&(z=y,E="borderColor")}B= +0;for(var J=a.length;Bb;++b){var e=this.l(c,this.a,this.b);if(0===e)break;c-=(this.h(c,this.a,this.b)-a)/e}return c};a.prototype.o=function(a){return 0===a||1===a||this.a===this.i&&this.b===this.j?a:this.h(this.m(a),this.i,this.j)};return function(b,c,d,e){b=new a(b,c,d,e);return b.o.bind(b)}}();r=E.prototype;r.animate=function(a){var b=this.a===this.c||!1,c=this.b; -a=Math.max(a-(this.start||(this.start=a)),0);var d=a>=this.duration;if(!b)if(d)var e=this.c;else this.ease?e=this.ease.length?(this.c-this.a)*this.ease[z/this.duration*a+.5>>0]/1E4:(this.c-this.a)*a/this.duration:e=1===this.g.length?this.g(a/this.duration):this.g(a,this.a,this.c,this.duration),e=this.a+e,e=this.D?(e*z+.5>>0)/z:e+.5>>0;var f=this.style;b||this.l===e||(this.l=e,this.transform?c.s[f]=e+this.i:this.j?c["_"+this.v][f]=e:(e+=this.i,"custom"!==f&&this.L(f,e)));f===this.transform?e=this.H(): -f===this.j&&(e=this.M(this.v));this.m&&this.m.call(c,d?1:a/this.duration,e);d&&(this.start=-1,this.o&&this.o.call(c))};r.K=function(a){if(-1===this.start)this.b[this.F]=null;else{var b=a-S;if(this.f){if(0<(this.f-=b))return!0;this.f=0}this.animate(a);return!0}};r.L=function(a,b){"scrollTop"===a||"scrollLeft"===a?this.b[a]=b:this.u.setProperty(this.G,b,this.h?"important":void 0)};var Y=function(a){function b(c,b){a[c]=-b;a[c+"R"]=b;a[c+"G"]=b;a[c+"B"]=b;a[c+"A"]=b}b("color",1);b("backgroundColor", -2);b("borderColor",3);return a}({}),X=function(a){function b(b,d){a[b]=d;a[b+"X"]=d;a[b+"Y"]=d;a[b+"Z"]=d;a[b+"3d"]=d}b("translate",1);b("scale",2);b("rotate",3);b("skew",4);return a}({}),ca={scaleX:0,skewY:1,skewX:2,scaleY:3,translateX:4,translateY:5};var x={};var J=Array(255);for(var p=0;256>p;p++){var K=p.toString(16);K.length%2&&(K="0"+K);x[K]=p;J[p]=K}r.H=function(){for(var a=this.b.s,b=this.u,c=this.b.B,d="",e=0,f=c.length;e>0,f=2.55*f+.5>>0,g=2.55*g+.5>>0,a&&(a/=100));c.setProperty(d,1=== -a||F(a)?"#"+J[e]+J[f]+J[g]:"rgba("+e+","+f+","+g+","+a+")",this.h?"important":void 0);return b};p=q.prototype;p.J=function(a,b,c,d,e,f,g,h,t,l,n,q,p,r,u){var w=""+(p?da:r?ea:P)(a,b,d,u);"auto"===w&&(w="0");d=y(w);if(M(e)){var k=e;e="="===e[1]?T(d,k=e.substring(2),e[0]):y(e);f||(f=k.substring((""+e).length));"%"===f&&("scrollTop"===b?(e*=(a.scrollHeight-a.clientHeight)/100,f=""):"scrollLeft"===b&&(e*=(a.scrollWidth-a.clientWidth)/100,f=""))}f||(f=w.substring((""+d).length)||"");b=new E(a,b,c,d,e,f, -g,h,t,l,n,q,!1,!1,p,void 0,r,u);this.stack[this.stack.length]=b;a[c]=b};p.animate=W;p.destroy=function(){this.exec&&(this.exec=0,this.stack=[]);return this};p.create=function(){return new q};p.ease=N;p.transform=W;r.I=function(a,b,c,d,e,f,g,h,p,l,n,q){F(a)?a=this.l:a=y(a);M(b)&&(b="="===b[1]?T(a,b.substring(2),b[0]):y(b));this.a=a;this.c=b;this.duration=e;this.start=0;this.h=d;this.g!==f&&(this.ease=Q(f),this.g=f);this.o=g;this.m=h;this.f=p;c&&(this.i=c);l&&(this.transform=l);n&&(this.j=n,this.v= -q)};return new q}(),this); +this.f(c,d))*a+this.g(c))*a};a.prototype.l=function(a,c,d){return 3*this.c(c,d)*a*a+2*this.f(c,d)*a+this.g(c)};a.prototype.m=function(a){for(var b=a,d=0;4>d;++d){var e=this.l(b,this.a,this.b);if(0===e)break;b-=(this.h(b,this.a,this.b)-a)/e}return b};a.prototype.o=function(a){return 0===a||1===a||this.a===this.i&&this.b===this.j?a:this.h(this.m(a),this.i,this.j)};return function(b,c,d,e){b=new a(b,c,d,e);return b.o.bind(b)}}();l=x.prototype;l.animate=function(a){var b=this.a===this.c||!1,c=this.b; +a=Math.max(a-(this.start||(this.start=a)),0);var d=a>=this.duration;if(!b)if(d)var e=this.c;else this.ease?e=this.ease.length?(this.c-this.a)*this.ease[v/this.duration*a+.5>>0]/1E4:(this.c-this.a)*a/this.duration:e=1===this.g.length?this.g(a/this.duration):this.g(a,this.a,this.c,this.duration),e=this.a+e,e=this.D?(e*v+.5>>0)/v:e+.5>>0;var f=this.style;b||this.j===e||(this.j=e,this.transform?c.s[f]=e+this.v:this.i?c["_"+this.u][f]=e:(e+=this.v,"custom"!==f&&this.L(f,e)));f===this.transform?e=this.H(): +f===this.i&&(e=this.M(this.u));this.l&&this.l.call(c,d?1:a/this.duration,e);d&&(this.start=-1,this.m&&this.m.call(c))};l.K=function(a){if(-1===this.start)this.b[this.F]=null;else{var b=a-R;if(this.f){if(0<(this.f-=b))return!0;this.f=0}this.animate(a);return!0}};l.L=function(a,b){"scrollTop"===a||"scrollLeft"===a?this.b[a]=b:this.o.setProperty(this.G,b,this.h?"important":void 0)};var X=function(a){function b(b,d){a[b]=-d;a[b+"R"]=d;a[b+"G"]=d;a[b+"B"]=d;a[b+"A"]=d}b("color",1);b("backgroundColor", +2);b("borderColor",3);return a}({}),W=function(a){function b(b,d){a[b]=d;a[b+"X"]=d;a[b+"Y"]=d;a[b+"Z"]=d;a[b+"3d"]=d}b("translate",1);b("scale",2);b("rotate",3);b("skew",4);return a}({}),ca={scaleX:0,skewY:1,skewX:2,scaleY:3,translateX:4,translateY:5};var q={};var J=Array(255);for(var m=0;256>m;m++){var F=m.toString(16);F.length%2&&(F="0"+F);q[F]=m;J[m]=F}l.H=function(){for(var a=this.b.s,b=this.o,c=this.b.B,d="",e=0,f=c.length;e>0,f=2.55*f+.5>>0,g=2.55*g+.5>>0,a&&(a/=100));c.setProperty(d,1=== +a||D(a)?"#"+J[e]+J[f]+J[g]:"rgba("+e+","+f+","+g+","+a+")",this.h?"important":void 0);return b};m=n.prototype;m.J=function(a,b,c,d,e,f,g,h,l,m,n,q,r,v,y){var u=""+(r?da:v?ea:I)(a,b,d,y);"auto"===u&&(u="0");d=w(u);if(L(e)){var k=e;e="="===e[1]?S(d,k=e.substring(2),e[0]):w(e);f||(f=k.substring((""+e).length));"%"===f&&("scrollTop"===b?(e*=(a.scrollHeight-a.clientHeight)/100,f=""):"scrollLeft"===b&&(e*=(a.scrollWidth-a.clientWidth)/100,f=""))}f||(f=u.substring((""+d).length)||"");b=new x(a,b,c,d,e,f, +g,h,l,m,n,q,!1,!1,r,void 0,v,y);this.stack[this.stack.length]=b;a[c]=b};m.animate=V;m.destroy=function(){this.exec&&(this.exec=0,this.stack=[]);return this};m.create=function(){return new n};m.ease=M;m.transform=V;l.I=function(a,b,c,d,e,f,g,h,l,m,n){D(a)?a=this.j:a=w(a);L(b)&&(b="="===b[1]?S(a,b.substring(2),b[0]):w(b));this.a=a;this.c=b;this.duration=d;this.start=0;this.h=c;this.g!==e&&(this.ease=P(e),this.g=e);this.m=f;this.l=g;this.f=h;l&&(this.transform=l);m&&(this.i=m,this.u=n)};return new n}(), +this); diff --git a/fat.js b/fat.js index 219a9dc..7c52430 100644 --- a/fat.js +++ b/fat.js @@ -1,5 +1,5 @@ ;/**! - * @preserve FAT v0.6.0 + * @preserve FAT v0.6.1 * Copyright 2019 Nextapps GmbH * Author: Thomas Wilkerling * Released under the Apache 2.0 Licence @@ -1508,10 +1508,13 @@ this.step = step; this.delay = delay; - if(unit){ + // TODO: + /* + if(!is_undefined(unit)){ this.unit = unit; } + */ if(SUPPORT_TRANSFORM){ @@ -2191,8 +2194,8 @@ /** * @param {Array<(Node|null)>|Node|NodeList|string|null} obj - * @param {Object|Array>} styles - * @param {Object} config + * @param {Object|Array|string|Array} styles + * @param {Object|Function} config */ function animate(obj, styles, config){ @@ -2269,6 +2272,11 @@ return this.native(obj, styles, config); } + + if(DEBUG){ + + console.error("Engine not found: " + config_engine); + } } } else{ @@ -2278,12 +2286,6 @@ obj = get_nodes(obj); - const config_callback = config["callback"] || (SUPPORT_SEQUENCE && sequences && function(){/* TODO: mark last style */}); - const config_step = config["step"] || 0; - const config_force = config["force"] || 0; - const config_strict = SUPPORT_CONCURRENCY && (config["strict"] || 0); - const config_init = /*this.resync ||*/ config["init"]; - const config_loop = SUPPORT_SEQUENCE && config["loop"]; let config_delay = config["delay"] || 0; let config_duration = config["duration"] || 400; let config_ease = (SUPPORT_EASING ? parse_bezier(config["ease"]) : config["ease"]) || ""; @@ -2291,6 +2293,58 @@ let style_keys = Object.keys(styles); let style_length = style_keys.length; + if(SUPPORT_SEQUENCE && style_length){ + + let key = style_keys[0]; + + if(key[key.length - 1] === "%"){ + + sequences = new Array(style_length); + + for(let i = 0; i < style_length; i++){ + + key = style_keys[i]; + + const position = parseInt(key, 10); + const position_last = i > 0 ? parseInt(style_keys[i - 1], 10) : 0; + const interval = position - position_last; + const style = styles[key]; + + const inner_style_keys = Object.keys(style); + const inner_style_length = inner_style_keys.length; + + for(let a = 0; a < inner_style_length; a++){ + + const inner_key = inner_style_keys[a]; + let inner_style = style[inner_key]; + + if(is_undefined(inner_style["to"])) { + + style[inner_key] = inner_style = { + + "to": inner_style + }; + } + + inner_style["duration"] = (config_duration / 100 * interval + 1) >> 0; + } + + sequences[i] = style; + } + + styles = sequences[0]; + style_keys = Object.keys(styles); + style_length = style_keys.length; + } + } + + const config_callback = config["callback"] || (SUPPORT_SEQUENCE && sequences && function(){/* TODO: mark last style */}); + const config_step = config["step"] || 0; + const config_force = config["force"] || 0; + const config_strict = SUPPORT_CONCURRENCY && (config["strict"] || 0); + const config_init = /*this.resync ||*/ config["init"]; + const config_loop = SUPPORT_SEQUENCE && config["loop"]; + let last_transform; let last_filter; let last_color; diff --git a/fat.light.js b/fat.light.js index 6b6c5dd..04a4b49 100644 --- a/fat.light.js +++ b/fat.light.js @@ -1,13 +1,13 @@ /* - FAT v0.6.0 + FAT v0.6.1 Copyright 2019 Nextapps GmbH Author: Thomas Wilkerling Released under the Apache 2.0 Licence https://github.com/nextapps-de/fat */ -'use strict';(function(p,f,q){var k;(k=q.define)&&k.amd?k([],function(){return f}):(k=q.modules)?k[p.toLowerCase()]=f:"object"===typeof exports?module.exports=f:q[p]=f})("Fat",function(){function p(a,e,b,d,c,g,f,m,l,w,x,r){this.o=a;this.C=a.j;this.style=e;this.G=e.replace(/([A-Z])/g,"-$1").toLowerCase();this.a=d;this.b=c;this.g=d;this.s=g;this.m=f;this.duration=m;this.f=l;this.ease=k(l)?[]:null;this.start=0;this.i=w;this.h=x;this.F=b;this.c=r;this.D="px"!==g}function f(){this.id=++B;this.stack=[]; -this.u=q.bind(this);this.exec=0}function q(a){var e=this.stack.length;if(e){this.exec=requestAnimationFrame(this.u);for(var b=!1,d=0;d=this.duration;if(!e)if(d)var c=this.b;else this.ease? -c=this.ease.length?(this.b-this.a)*this.ease[z/this.duration*a+.5>>0]/1E4:(this.b-this.a)*a/this.duration:c=1===this.f.length?this.f(a/this.duration):this.f(a,this.a,this.b,this.duration),c=this.a+c,c=this.D?(c*z+.5>>0)/z:c+.5>>0;var g=this.style;e||this.g===c||(this.g=c,c+=this.s,"custom"!==g&&this.A(c));this.h&&this.h.call(b,d?1:a/this.duration,c);d&&(this.start=-1,this.i&&this.i.call(b))};v.B=function(a){if(-1===this.start)this.o[this.F]=null;else{var e=a-y;if(this.c){if(0<(this.c-=e))return!0; -this.c=0}this.animate(a);return!0}};v.A=function(a){this.C.setProperty(this.G,a,this.m?"important":void 0)};var u=f.prototype;u.w=function(a,e,b,d,c,g,f,m,l,w,x,r){if("custom"===e)d=d||0;else{var n=a.j||(a.j=a.style);d=(d="undefined"===typeof d?n[e]:d)?d:(a.l||(a.l=getComputedStyle(a)))[e]}n=""+d;"auto"===n&&(n="0");d=t(n);if(k(c)){var h=c;c=t(c);g||(g=h.substring((""+c).length))}g||(g=n.substring((""+d).length)||"");e=new p(a,e,b,d,c,g,f,m,l,w,x,r,!1,!1);this.stack[this.stack.length]=e;a[b]=e};u.animate= -function(a,e,b){if(a&&e){b?"function"===typeof b&&(b={callback:b}):b={};k(a)?a=document.querySelectorAll(a):a.length||(a=[a]);var d=b.callback||!1,c=b.step||0,g=b.force||0,f=b.init,m=b.delay||0,l=b.duration||400;b=b.ease||"";for(var w=Object.keys(e),x=w.length,r=0;r=this.duration;if(!e)if(c)var b=this.b;else this.ease? +b=this.ease.length?(this.b-this.a)*this.ease[z/this.duration*a+.5>>0]/1E4:(this.b-this.a)*a/this.duration:b=1===this.f.length?this.f(a/this.duration):this.f(a,this.a,this.b,this.duration),b=this.a+b,b=this.C?(b*z+.5>>0)/z:b+.5>>0;var g=this.style;e||this.g===b||(this.g=b,b+=this.G,"custom"!==g&&this.w(b));this.h&&this.h.call(d,c?1:a/this.duration,b);c&&(this.start=-1,this.i&&this.i.call(d))};u.B=function(a){if(-1===this.start)this.o[this.D]=null;else{var e=a-y;if(this.c){if(0<(this.c-=e))return!0; +this.c=0}this.animate(a);return!0}};u.w=function(a){this.A.setProperty(this.F,a,this.m?"important":void 0)};var r=f.prototype;r.v=function(a,e,d,c,b,g,f,v,t,w,x,n){if("custom"===e)c=c||0;else{var m=a.j||(a.j=a.style);c=(c="undefined"===typeof c?m[e]:c)?c:(a.l||(a.l=getComputedStyle(a)))[e]}m=""+c;"auto"===m&&(m="0");c=p(m);if(l(b)){var h=b;b=p(b);g||(g=h.substring((""+b).length))}g||(g=m.substring((""+c).length)||"");e=new k(a,e,d,c,b,g,f,v,t,w,x,n,!1,!1);this.stack[this.stack.length]=e;a[d]=e};r.animate= +function(a,e,d){if(a&&e){d?"function"===typeof d&&(d={callback:d}):d={};l(a)?a=document.querySelectorAll(a):a.length||(a=[a]);var c=d.delay||0,b=d.duration||400,g=d.ease||"",f=Object.keys(e),v=f.length,t=d.callback||!1,w=d.step||0,x=d.force||0;d=d.init;for(var n=0;nf?f*(1+g):f+g-f*g,e=2*f-a,g=C(e,a,c+1/3),f=C(e,a,c),a=C(e,a,c-1/3)),c=255*g+.5>>0,g=255*f+.5>>0,f=255*a+.5>>0);a={}; -a[b+"R"]=c;a[b+"G"]=g;a[b+"B"]=f;-1!==d&&(a[b+"A"]=d);return a}function C(a,b,c){0>c?c+=1:1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}function q(a){this.id=++pa;this.stack=[];this.M=qa.bind(this);this.exec=0;this.F=!a||!1!==a.autostart;this.direction=!0;this.ratio=1}function X(a){O(a)?a=document.querySelectorAll(a):a.length||(a=[a]);return a}function fa(a){if(O(a))if(a){var b;if(!(b=ha[a])){if(b=S[a]||(S[a]=Y.apply(Y,ra[a]))){for(var c=new (Int16Array||Array)(K),d=0;d>0;b=c}else b=[];b=ha[a]=b}a=b}else a=[];else a=null;return a}function qa(a){var b=this.stack.length;if(b){this.exec=requestAnimationFrame(this.M);ba&&(T?T===this.id&&(Z={}):(Z={},T=this.id));for(var c=!1,d=0;d(""+b).length)return c[a]=b,d&&(d[d.length]=a),c;a=b.split(" ");b={};for(var e=0,g=0;gz){p=b[n];"object"===typeof p&&(p=p.to);var H=R(p,n),t=p=void 0;r.push(p=n+"R");b[p]=H[p];r.push(p=n+"G");b[p]=H[p];r.push(p=n+"B");b[p]=H[p];(H=!F(t=H[p=n+"A"]))?(r.push(p),b[p]=t,n=p):n+="B";l+=H?4:3;z*=-1}D||1!==z?J||2!==z?q||3!==z||(q=n):J=n:D=n}}for(Q=0;QL)continue;1===L?(p=D,w="color"):2===L?(t=J,w="backgroundColor"):3===L&&(H=q,w="borderColor")}L=0;for(var P=a.length;Ld;++d){var e=this.u(b,this.a,this.b);if(0===e)break;b-=(this.i(b,this.a,this.b)-a)/e}return b};a.prototype.w=function(a){return 0===a||1===a||this.a===this.j&&this.b===this.l?a:this.i(this.v(a),this.j,this.l)};return function(b,c,d,e){b=new a(b,c,d,e);return b.w.bind(b)}}(),da={fadeIn:{opacity:1},fadeOut:{opacity:0},fadeToggle:{opacity:"!=1"},slideUp:{translateY:0},slideDown:{translateY:"100%"}, -slideToggle:{translateY:"!=100%"},slideInLeft:{translateX:0},slideOutLeft:{translateX:"-100%"},slideToggleLeft:{translateX:"!=-100%"},slideInRight:{translateX:0},slideOutRight:{translateX:"100%"},slideToggleRight:{translateX:"!=100%"},slideInTop:{translateY:0},slideOutTop:{translateY:"-100%"},slideToggleTop:{translateY:"!=-100%"},slideInBottom:{translateY:0},slideOutBottom:{translateY:"100%"},slideToggleBottom:{translateY:"!=100%"},zoomIn:{scaleX:1,scaleY:1},zoomOut:{scaleX:0,scaleY:0},zoomToggle:{scaleX:"!=1", -scaleY:"!=1"},rollIn:{rotateZ:"0deg"},rollOut:{rotateZ:"720deg"},rollToggle:{rotateZ:"!=720deg"},blurIn:{blur:"0em"},blurOut:{blur:"5em"},blurToggle:{blur:"!=5em"}};l=M.prototype;l.animate=function(a,b,c){var d=this.N,e=this.a===this.c||d&&Z[d],g=this.b;a=Math.max((a-(this.start||(this.start=a)))*b,0);b=a>=this.duration;if(!e)if(d&&(Z[d]=1),b)var f=c?this.c:this.a;else this.ease?f=this.ease.length?(this.c-this.a)*this.ease[K/this.duration*a+.5>>0]/1E4:(this.c-this.a)*a/this.duration:f=1===this.j.length? -this.j(a/this.duration):this.j(a,this.a,this.c,this.duration),c?f=this.a+f:f=this.c-f,f=this.R?(f*K+.5>>0)/K:f+.5>>0;c=this.style;e||this.h===f||(this.h=f,this.transform?g.B[c]=f+this.g:this.filter?g.A[c]=f+this.g:this.w?g["_"+this.H][c]=f:(f+=this.g,"custom"!==c&&this.Y(c,f)));c===this.transform?f=this.U():c===this.filter?f=this.P():c===this.w&&(f=this.O(this.H));this.u&&this.u.call(g,b?1:a/this.duration,f);if(b&&(this.start=-1,this.l)){if(e=g.D){f=++g.C;this.G&&f>=e.length&&(this.G--,g.C=f=0);if(f< -e.length)return;g.D=null}this.l.call(g)}};l.X=function(a,b){if(-1===this.start){if(this.l){b=this.b;var c=b.D;if(c&&(a.animate(b,c[b.C],{duration:this.duration,ease:this.j,callback:this.l,step:this.u,force:this.i,loop:this.G}),0===this.start))return!0}this.N||(this.b[this.S]=null)}else{c=b-ia;if(this.s){if(0<(this.s-=c))return!0;this.s=0}if(!a.F)return this.start+=c,!0;this.animate(b,a.ratio,a.direction);return!0}};l.Y=function(a,b){"scrollTop"===a||"scrollLeft"===a?this.b[a]=b:w(this.v,this.T,b, -this.i)};l.seek=function(a,b){b=this.duration/b;this.start+=(this.h-this.a)/(this.c-this.a)*b-a*b};l.update=function(a){if(this.h===a)return!1;O(a)?a=t(a):F(a)&&(a=this.a);-1!==this.start&&(this.a=a);this.h=a;this.g&&(a+=this.g);return a};var oa=function(a){function b(b,d){a[b]=-d;a[b+"R"]=d;a[b+"G"]=d;a[b+"B"]=d;a[b+"A"]=d}b("color",1);b("backgroundColor",2);b("borderColor",3);return a}({}),na=function(a){function b(b,d){a[b]=d;a[b+"X"]=d;a[b+"Y"]=d;a[b+"Z"]=d;a[b+"3d"]=d}b("translate",1);b("scale", -2);b("rotate",3);b("skew",4);return a}({}),sa={scaleX:0,skewY:1,skewX:2,scaleY:3,translateX:4,translateY:5},U={blur:1,brightness:2,contrast:2,grayscale:1,"hue-rotate":1,invert:1,saturate:2,sepia:1};var E={};var aa=Array(255);for(var k=0;256>k;k++){var W=k.toString(16);W.length%2&&(W="0"+W);E[W]=k;aa[k]=W}l.U=function(){for(var a=this.b.B,b=this.v,c=this.b.K,d="",e=0,g=c.length;e>0,g=2.55*g+.5>>0,f=2.55*f+.5>>0,a&&(a/=100));w(c,d,1===a||F(a)?"#"+aa[e]+aa[g]+aa[f]:"rgba("+e+","+g+","+f+","+a+")",this.i);return b};k=q.prototype;k.W=function(a,b,c,d,e,g,f,h,k,x,m,l,r,q,u,y,D,J){var v=""+(u?ta:y?ua:D?va:P)(a,b,d,J);"auto"===v&&(v="0");d=t(v);if(O(e)){var w=e;e="="===e[1]?ja(d,w=e.substring(2),e[0]):t(e);g||(g=w.substring((""+e).length));"%"===g&&("scrollTop"===b?(e*=(a.scrollHeight-a.clientHeight)/100,g=""):"scrollLeft"===b&&(e*=(a.scrollWidth-a.clientWidth)/ -100,g=""))}g||(g=v.substring((""+d).length)||"");b=new M(a,b,c,d,e,g,f,h,k,x,m,l,r,q,u,y,D,J);this.stack[this.stack.length]=b;q||(a[c]=b)};k.animate=ca;k.destroy=function(){this.exec&&(this.exec=0,this.stack=[],ba&&T===this.id&&(T=0));return this};k.create=function(){return new q};k.ease=S;k.preset=da;k.transform=ca;k.filter=ca;k.update=function(a,b,c,d){a=X(a);if(O(b))for(var e=0,g=a.length;ef?f*(1+g):f+g-f*g,e=2*f-a,g=t(e,a,c+1/3),f=t(e,a,c),a=t(e,a,c-1/3)),c=255*g+.5>>0,g=255*f+.5>>0,f=255*a+.5>>0);a={}; +a[b+"R"]=c;a[b+"G"]=g;a[b+"B"]=f;-1!==d&&(a[b+"A"]=d);return a}function t(a,b,c){0>c?c+=1:1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}function w(a){this.id=++na;this.stack=[];this.M=oa.bind(this);this.exec=0;this.F=!a||!1!==a.autostart;this.direction=!0;this.ratio=1}function V(a){M(a)?a=document.querySelectorAll(a):a.length||(a=[a]);return a}function da(a){if(M(a))if(a){var b;if(!(b=ea[a])){if(b=N[a]||(N[a]=W.apply(W,pa[a]))){for(var c=new (Int16Array||Array)(I),d=0;d>0;b=c}else b=[];b=ea[a]=b}a=b}else a=[];else a=null;return a}function oa(a){var b=this.stack.length;if(b){this.exec=requestAnimationFrame(this.M);Z&&(O?O===this.id&&(X={}):(X={},O=this.id));for(var c=!1,d=0;d(""+b).length)return c[a]=b,d&&(d[d.length]=a),c;a=b.split(" ");b={};for(var e=0,g=0;g>0}d[n]=k}b=d[0];h=Object.keys(b);q=h.length}}n=c.callback||d&&function(){};l=c.step||0;k=c.force||0;p=c.strict||0;H=c.init;c=c.loop;var R,w,z;for(v=q;0u){r=b[m];"object"===typeof r&&(r=r.to);var F=P(r,m),t=r=void 0;h.push(r=m+"R");b[r]=F[r];h.push(r=m+"G");b[r]=F[r];h.push(r=m+"B");b[r]=F[r];(F=!A(t=F[r= +m+"A"]))?(h.push(r),b[r]=t,m=r):m+="B";q+=F?4:3;u*=-1}R||1!==u?w||2!==u?z||3!==u||(z=m):w=m:R=m}for(v=0;vK)continue;1===K?(r=R,y="color"):2===K?(t=w,y="backgroundColor"):3===K&&(F=z,y="borderColor")}K=0;for(var Q= +a.length;Kd;++d){var e=this.u(b,this.a,this.b);if(0===e)break;b-=(this.i(b,this.a,this.b)-a)/e}return b};a.prototype.w=function(a){return 0=== +a||1===a||this.a===this.j&&this.b===this.l?a:this.i(this.v(a),this.j,this.l)};return function(b,c,d,e){b=new a(b,c,d,e);return b.w.bind(b)}}(),ba={fadeIn:{opacity:1},fadeOut:{opacity:0},fadeToggle:{opacity:"!=1"},slideUp:{translateY:0},slideDown:{translateY:"100%"},slideToggle:{translateY:"!=100%"},slideInLeft:{translateX:0},slideOutLeft:{translateX:"-100%"},slideToggleLeft:{translateX:"!=-100%"},slideInRight:{translateX:0},slideOutRight:{translateX:"100%"},slideToggleRight:{translateX:"!=100%"}, +slideInTop:{translateY:0},slideOutTop:{translateY:"-100%"},slideToggleTop:{translateY:"!=-100%"},slideInBottom:{translateY:0},slideOutBottom:{translateY:"100%"},slideToggleBottom:{translateY:"!=100%"},zoomIn:{scaleX:1,scaleY:1},zoomOut:{scaleX:0,scaleY:0},zoomToggle:{scaleX:"!=1",scaleY:"!=1"},rollIn:{rotateZ:"0deg"},rollOut:{rotateZ:"720deg"},rollToggle:{rotateZ:"!=720deg"},blurIn:{blur:"0em"},blurOut:{blur:"5em"},blurToggle:{blur:"!=5em"}};p=L.prototype;p.animate=function(a,b,c){var d=this.N,e= +this.a===this.c||d&&X[d],g=this.b;a=Math.max((a-(this.start||(this.start=a)))*b,0);b=a>=this.duration;if(!e)if(d&&(X[d]=1),b)var f=c?this.c:this.a;else this.ease?f=this.ease.length?(this.c-this.a)*this.ease[I/this.duration*a+.5>>0]/1E4:(this.c-this.a)*a/this.duration:f=1===this.i.length?this.i(a/this.duration):this.i(a,this.a,this.c,this.duration),c?f=this.a+f:f=this.c-f,f=this.R?(f*I+.5>>0)/I:f+.5>>0;c=this.style;e||this.g===f||(this.g=f,this.transform?g.B[c]=f+this.j:this.filter?g.A[c]=f+this.j: +this.w?g["_"+this.H][c]=f:(f+=this.j,"custom"!==c&&this.Y(c,f)));c===this.transform?f=this.U():c===this.filter?f=this.P():c===this.w&&(f=this.O(this.H));this.u&&this.u.call(g,b?1:a/this.duration,f);if(b&&(this.start=-1,this.l)){if(e=g.D){f=++g.C;this.G&&f>=e.length&&(this.G--,g.C=f=0);if(fl;l++){var U=l.toString(16);U.length%2&&(U="0"+U);y[U]=l;Y[l]=U}p.U=function(){for(var a=this.b.B,b=this.v,c=this.b.K,d="",e=0,g=c.length;e>0,g=2.55*g+.5>>0,f=2.55*f+.5>>0,a&&(a/=100));x(c,d,1===a||A(a)?"#"+Y[e]+Y[g]+Y[f]:"rgba("+e+","+g+","+f+","+a+")",this.h);return b};l=w.prototype;l.W=function(a,b,c,d,e,g,f,h,q,n,k,l,p,H,v,m,u,x){var t= +""+(v?ra:m?sa:u?ta:B)(a,b,d,x);"auto"===t&&(t="0");d=z(t);if(M(e)){var w=e;e="="===e[1]?ha(d,w=e.substring(2),e[0]):z(e);g||(g=w.substring((""+e).length));"%"===g&&("scrollTop"===b?(e*=(a.scrollHeight-a.clientHeight)/100,g=""):"scrollLeft"===b&&(e*=(a.scrollWidth-a.clientWidth)/100,g=""))}g||(g=t.substring((""+d).length)||"");b=new L(a,b,c,d,e,g,f,h,q,n,k,l,p,H,v,m,u,x);this.stack[this.stack.length]=b;H||(a[c]=b)};l.animate=aa;l.destroy=function(){this.exec&&(this.exec=0,this.stack=[],Z&&O===this.id&& +(O=0));return this};l.create=function(){return new w};l.ease=N;l.preset=ba;l.transform=aa;l.filter=aa;l.update=function(a,b,c,d){a=V(a);if(M(b))for(var e=0,g=a.length;e - Test: Color + Test: Keyframe + + +
1

+
2

+
3

+
4

+
5

+
6
+ + + + \ No newline at end of file