beast/beast.min.js

provides a timer'd loop with hooks producing various animated effects

// Filename: beast.full.js  
// Timestamp: 2013/12/24 (last modified)  
// Author(s): Bumblehead (www.bumblehead.com), Dan Pupius (www.pupius.co.uk)  

var domlt=function(t){var n=t.getBoundingClientRect();return[n.left,n.top]};var incrnum=("object"==typeof module?module:{}).exports=function(n,t){return t=function(){return n++},t.toString=function(){return n++},t}(0);var eventhook=("object"==typeof module?module:{}).exports=function(){var n={fnArr:[],addFn:function(n){"function"==typeof n&&(n.oname="fn"+incrnum,this.fnArr.push(n))},rmFn:function(n){var r=n.oname;"function"==typeof n&&(this.fnArr=this.fnArr.filter(function(n){return n.oname!==r}))},fire:function(n,r,t,o){this.fnArr.map(function(e){e(n,r,t,o)})}};return{proto:n,getNew:function(){var r=Object.create(n);return r.fnArr=[],r}}}();var beast=("object"==typeof module?module:{}).exports=function(t){var e={frames:30,fpms:.03,mspf:.03,timer:null,frameindex:0,ngnArr:[],isKilled:!1,isComplete:!1,st:1,onComplete:function(t){return this.onCompleteHook.addFn(t),this},onKill:function(t){return this.onKillHook.addFn(t),this},onBegin:function(t){return this.onBeginHook.addFn(t),this},updateNgnItems:function(t){this.ngnArr.map(function(e){e.updatefn(t)})},initNgnItems:function(t){t=this.frames,this.ngnArr.map(function(e){e.init(t,e.opts),e.updatefn=e.getupdatefn(t,e.opts)})},killNgnItems:function(t){t=this.frames,this.ngnArr.map(function(e){e.kill(t,e.opts)})},completeNgns:function(t){t=this.frames,this.ngnArr.map(function(e){e.complete(t,e.opts)})},applyFnComplete:function(){(1===this.st||4===this.st)&&this.onCompleteHook.fire()},applyFnKill:function(){this.onKillHook.fire()},applyFnBegin:function(){this.onBeginHook.fire()},updateNgns:function(){var t=this;t.updateNgnItems(t.frameindex),++t.frameindex},updateAnimationState:function(){var t=this;t.isKilled?t.st=3:t.frameindex>=t.frames&&(t.st=4)},animate:function(){var t=this;!function e(){switch(t.updateAnimationState(),t.st){case 1:t.updateNgns(),t.timer=setTimeout(e,t.mspf);break;case 2:t.st=1;break;case 3:t.st=3,t.kill();break;default:t.st=4,t.complete()}}()},complete:function(){var t=this;t.isKilled||t.isComplete||(t.isComplete=!0,t.st=4,t.completeNgns(),t.applyFnComplete())},kill:function(){var t=this;t.isKilled||t.isComplete||(t.isKilled=!0,t.st=3,t.killNgnItems(),t.applyFnKill())},init:function(t){var e=this;"function"==typeof t&&e.onComplete(t),4===e.st&&(e.st=1,e.applyFnBegin(),e.isKilled=!1,e.isComplete=!1,e.frameindex=0,e.initNgnItems(),e.animate())},reinit:function(){var t=this;t.kill(),t.st=4,t.init()}};return t=function(t){var n;return n=Object.create(e),n.timer=null,n.onCompleteHook=eventhook.getNew(),n.onKillHook=eventhook.getNew(),n.onBeginHook=eventhook.getNew(),n.ngnArr=[],n.isKilled=!1,n.isComplete=!1,n.frameindex=0,n.st=4,n.frames=t.frames||30,n.fpms=(t.fps||30)/1e3,n.mspf=1/n.fpms,n},t.proto=e,t}();var elemst={up:function(a,e){var s,c="st-"+e,t=(e||"").match(/(\w*(?:-)|\b)(\w*)/)||[],m=t[2],n=t[1]||"";a&&m&&(s=a.className,s.match(c)||(t=new RegExp("st-("+n+"\\w*)"),a.className=s.match(t)?s.replace(t,c):s+" "+c))},rm:function(a,e){var s,c=new RegExp("[\b ]st-"+e+"(-\\w*)?");a&&(s=a.className,s.match(c)&&(a.className=s.replace(c,"")))},is:function(a,e){return a&&a.className.match("st-"+e)?!0:!1}};var beastplug=("object"==typeof module?module:{}).exports=function(e,t){var n={className:":name-beast-animating",isclean:!0,doframeloop:function(e,t){for(var n=0,a=e-1;e>n;n++)t(n/a,n)},getComputed:function(e,t){return getComputedStyle(e,null).getPropertyValue(t)},isanimated:function(e,t,n){return e[n]!==t[n]},getdata:function(){},getupdatefn:function(){return function(){}},init:function(e,t){elemst.up(t.elem,this.className),t.oparr=this.getdata(e,t)},clean:function(){},kill:function(e,t){elemst.rm(t.elem,this.className),this.isclean&&this.clean(e,t)},complete:function(e,t){t.classNameEnd&&elemst.up(t.elem,t.classNameEnd),elemst.rm(t.elem,this.className),this.isclean&&this.clean(e,t)}};beast.proto[e]=function(a){var s=Object.create(n);return t(s),s.opts=a,s.className=s.className.replace(/:name/,e),"boolean"==typeof a.isclean&&(s.isclean=a.isclean),this.ngnArr.push(s),this}};var curved=("object"==typeof module?module:{}).exports=function(){function n(n){return n*n*n}function r(n){return 3*n*n*(1-n)}function t(n){return 3*n*(1-n)*(1-n)}function u(n){return(1-n)*(1-n)*(1-n)}function e(n,r){var t=Math.min(n,r);return t&&-t}return function(o,c,f){var i=e(o,c),a=c+i,d=o+i,v="end"===f?a:d;return function(e){return Math.round(a*n(e)+v*r(e)+v*t(e)+d*u(e))-i}}}();beastplug("move",function(e){e.getdata=function(t,n){var l=n.elem,a=n.ease,r=domlt(l),i=n.ltbgn||r,o=n.ltend||r,u=[],c=e.isanimated(i,o,0),s=e.isanimated(i,o,1),f=c&&curved(i[0],o[0],a),d=s&&curved(i[1],o[1],a);return e.doframeloop(t,function(e){u.push([f&&f(e),d&&d(e)])}),e.isl=c,e.ist=s,e.ltarr=u,u},e.clean=function(e,t){var n=t.elem.style;n.top="",n.left=""},e.getupdatefn=function(t,n){var l,a=":0px",r=e.ltarr,i=n.elem.style,o=e.isl,u=e.ist;return function(e){l=r[e],o&&(i.left=a.replace(/:0/,l[0])),u&&(i.top=a.replace(/:0/,l[1]))}}});beastplug("color",function(r){r.extractRGBarr=function(r){return r.match(/^#/)?r.replace(/^#(\w\w\w)$/,"$1$1").match(/(\w\w)(\w\w)(\w\w)/).slice(1,4).map(function(r){return parseInt(r,16)}):r.match(/^rgba?/)?r.match(/^rgba?\((\d{1,3}), (\d{1,3}), (\d{1,3}),? ?(\d{1,3})?\)$/).slice(1,4).map(function(r){return parseInt(r,10)}):void 0},r.buildRGBarray=function(e,a,o,c){var t=[],n=a.ease,u=r.extractRGBarr(o),l=r.extractRGBarr(c),d=curved(u[0],l[0],n),g=curved(u[1],l[1],n),p=curved(u[2],l[2],n);return r.doframeloop(e,function(r){t.push([d(r),g(r),p(r)])}),t},r.clean=function(r,e){var a=e.elem.style;a.backgroundColor="",a.color=""},r.getdata=function(e,a){var o=a.elem,c=a.endColor||r.getComputed(o,"color"),t=a.endBackgroundColor||r.getComputed(o,"background-color"),n=a.bgnColor||r.getComputed(o,"color"),u=a.bgnBackgroundColor||r.getComputed(o,"background-color");a.fgarr=r.buildRGBarray(e,a,n,c),a.bgarr=r.buildRGBarray(e,a,u,t)},r.getupdatefn=function(r,e){var a,o,c=e.bgarr,t=e.fgarr,n=e.elem.style,u="rgb(:r, :g, :b)";return function(r){a=c[r],o=t[r],n.backgroundColor=u.replace(/:r/,a[0]).replace(/:g/,a[1]).replace(/:b/,a[2]),n.color=u.replace(/:r/,o[0]).replace(/:g/,o[1]).replace(/:b/,o[2])}}});var domopacity=function(t,e,i){return t=document.documentElement.style,i=function(){},"opacity"in t?(e=function(t,e){t.style.opacity=e},e.rm=function(t){t.style.opacity=""},e.is=function(t){return getComputedStyle(t,null).getPropertyValue("opacity")}):"filter"in t?(e=function(t,e){t.style.filter="alpha(opacity=:o)".replace(/:o/,100*e)},e.rm=function(t){t.style.filter=""},e.is=function(t){var e,i,n=/\Wopacity\s*=\s*([\d]+)/i,o=t.currentStyle;return"object"==typeof o?(e=o.filter,n.test(e)?(i=n.exec(e),i[1]/100):1):void 0}):e=e.rm=e.is=i,e}();beastplug("fade",function(e){e.getdata=function(o,n){var t=[],a=100*+(domopacity.is(n.elem,"opacity")||1),c=curved(a,n.endop,n.ease);return e.doframeloop(o,function(e){t.push(c(e)/100)}),t},e.clean=function(e,o){domopacity.rm(o.elem)},e.getupdatefn=function(e,o){var n=o.oparr||[],t=o.elem;return function(e){domopacity(t,n[e])}}});var domwh=function(i,n,t){return t=document,i=function(i){var n,t=[i.offsetWidth,i.offsetHeight];return t[0]||(n=i.style,"none"===n.display?(n.display="block",t=[i.offsetWidth,i.offsetHeight],n.display="none"):""===n.display&&(n.display="block",t=[i.offsetWidth,i.offsetHeight],n.display="")),t},i.window=function(){return window&&window.innerHeight?[window.innerWidth,window.innerHeight]:(n=t.documentElement)?(n=n.clientWidth?n:t.documentBody,[n.clientWidth,n.clientHeight]):null},i}();beastplug("shape",function(e){e.getdata=function(t,n){var a=n.elem,i=n.ease,r=domwh(a),h=n.whbgn||r,u=n.whend||r,s=[],c=e.isanimated(h,u,0),d=e.isanimated(h,u,1),l=c&&curved(h[0],u[0],i),o=d&&curved(h[1],u[1],i);return e.doframeloop(t,function(e){s.push([l&&l(e),o&&o(e)])}),e.isw=c,e.ish=d,e.wharr=s,s},e.clean=function(e,t){var n=t.elem.style;n.width="",n.height=""},e.getupdatefn=function(t,n){var a,i=":0px",r=e.wharr,h=n.elem.style,u=e.isw,s=e.ish;return function(e){a=r[e],u&&(h.width=i.replace(/:0/,a[0])),s&&(h.height=i.replace(/:0/,a[1]))}}});