motionCube-mini.js

;(function(){function require(n){var module=require.modules[n];if(!module){throw new Error("module "+n+" is not  exist!")}if(!module["exports"]){module.exports={};module.define.call(module,module,module.exports);delete module.define}return module.exports}require.modules={};require.register=function(n,fn){this.modules[n]={};this.modules[n].define=fn};require.register("transformTest",function(module,exports){var styles=['webkitTransform','MozTransform','msTransform','OTransform','transform'];var target=getComputedStyle(document.createElement("div"));var style;for(var i=0;i<styles.length;i++){if(styles[i]in target){style=styles[i];break}}module.exports=style==undefined?false:style});require.register("threeDTest",function(module,exports){var transformTest=require("transformTest");var result;if(transformTest){var target=document.createElement("div");document.body.appendChild(target);target.style[transformTest]="translate3d(1px,1px,1px)";var threeDTest=getComputedStyle(target)[transformTest];if(threeDTest!="none"){result=true}else{result=false}}else{result=false}module.exports=result});require.register("transitionTest",function(module,exports){var styles=['webkitTransition','MozTransition','msTransition','OTransition','transition'];var target=getComputedStyle(document.createElement("div"));var style;for(var i=0;i<styles.length;i++){if(styles[i]in target){style=styles[i];break}}module.exports=style==undefined?false:style});require.register("testResult",function(module,exports){var first=require("transformTest"),second=require("threeDTest"),third=require("transitionTest");module.exports=first&&second&&third});require.register("endEvent",function(module,exports){var transitionTest=require("transitionTest");var events={webkitTransition:"webkitTransitionEnd",MozTransition:"MozTransitionEnd",msTransition:"transitionend",OTransition:"OTransitionEnd",transition:"transitionend"};module.exports=events[transitionTest]});require.register("matrixLibrary",function(module,exports){module.exports={translateAll:function(x,y,z){return[1,0,0,0,0,1,0,0,0,0,1,0,x,y?y:0,z?z:0,1]},translateX:function(x){return[1,0,0,0,0,1,0,0,0,0,1,0,x,0,0,1]},translateY:function(y){return[1,0,0,0,0,1,0,0,0,0,1,0,0,y,0,1]},translateZ:function(z){return[1,0,0,0,0,1,0,0,0,0,1,0,0,0,z,1]},scale:function(x,y,z){return[x,0,0,0,0,y?y:1,0,0,0,0,z?z:1,0,0,0,0,1]},scaleX:function(x){return[x,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]},scaleY:function(y){return[1,0,0,0,0,y,0,0,0,0,1,0,0,0,0,1]},scaleZ:function(z){return[1,0,0,0,0,1,0,0,0,0,z,0,0,0,0,1]},rotate:function(x,y,z,deg){var sin=Math.sin(Math.PI/(180/deg)),cos=Math.cos(Math.PI/(180/deg)),norm=Math.sqrt(x*x+y*y+z*z);var nx=x/norm,ny=x/norm,nz=z/norm;return[nx*nx*(1-cos)+cos,nx*ny*(1-cos)+nz*sin,nx*nz*(1-cos)-ny*sin,0,nx*ny*(1-cos)-nz*sin,ny*ny*(1-cos)+cos,ny*nz*(1-cos)+nx*sin,0,nx*nz*(1-cos)+ny*sin,ny*nz*(1-cos)-nx*sin,nz*nz*(1-cos)+cos,0,0,0,0,1]},rotateX:function(deg){var sin=Math.sin(Math.PI/(180/deg)),cos=Math.cos(Math.PI/(180/deg));return[1,0,0,0,0,cos,sin,0,0,-sin,cos,0,0,0,0,1]},rotateY:function(deg){var sin=Math.sin(Math.PI/(180/deg)),cos=Math.cos(Math.PI/(180/deg));return[cos,0,-sin,0,0,1,0,0,sin,0,cos,0,0,0,0,1]},rotateZ:function(deg){var sin=Math.sin(Math.PI/(180/deg)),cos=Math.cos(Math.PI/(180/deg));return[cos,sin,0,0,-sin,cos,0,0,0,0,1,0,0,0,0,1]},skew:function(x,y){return[1,y?Math.tan(Math.PI/(180/y)):Math.tan(Math.PI/(180/x)),0,0,Math.tan(Math.PI/(180/x)),1,0,0,0,0,1,0,0,0,0,1]},skewX:function(x){return[1,0,0,0,Math.tan(Math.PI/(180/x)),1,0,0,0,0,1,0,0,0,0,1]},skewY:function(y){return[1,Math.tan(Math.PI/(180/y)),0,0,0,1,0,0,0,0,1,0,0,0,0,1]}}});require.register("matrixCombine",function(module,exports){module.exports=function(a1,a2){return[a1[0]*a2[0]+a1[4]*a2[1]+a1[8]*a2[2]+a1[12]*a2[3],a1[1]*a2[0]+a1[5]*a2[1]+a1[9]*a2[2]+a1[13]*a2[3],a1[2]*a2[0]+a1[6]*a2[1]+a1[10]*a2[2]+a1[14]*a2[3],a1[3]*a2[0]+a1[7]*a2[1]+a1[11]*a2[2]+a1[15]*a2[3],a1[0]*a2[4]+a1[4]*a2[5]+a1[8]*a2[6]+a1[12]*a2[7],a1[1]*a2[4]+a1[5]*a2[5]+a1[9]*a2[6]+a1[13]*a2[7],a1[2]*a2[4]+a1[6]*a2[5]+a1[10]*a2[6]+a1[14]*a2[7],a1[3]*a2[4]+a1[7]*a2[5]+a1[11]*a2[6]+a1[15]*a2[7],a1[0]*a2[8]+a1[4]*a2[9]+a1[8]*a2[10]+a1[12]*a2[11],a1[1]*a2[8]+a1[5]*a2[9]+a1[9]*a2[10]+a1[13]*a2[11],a1[2]*a2[8]+a1[6]*a2[9]+a1[10]*a2[10]+a1[14]*a2[11],a1[3]*a2[8]+a1[7]*a2[9]+a1[11]*a2[10]+a1[15]*a2[11],a1[0]*a2[12]+a1[4]*a2[13]+a1[8]*a2[14]+a1[12]*a2[15],a1[1]*a2[12]+a1[5]*a2[13]+a1[9]*a2[14]+a1[13]*a2[15],a1[2]*a2[12]+a1[6]*a2[13]+a1[10]*a2[14]+a1[14]*a2[15],a1[3]*a2[12]+a1[7]*a2[13]+a1[11]*a2[14]+a1[15]*a2[15]]}});require.register("stringToMatrix",function(module,exports){module.exports=function(t){if(t=="none"){return[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}else{var i=t.indexOf("3d")<0?7:9;var m=t.substring(i,t.length-1);m=m.split(",");for(var i=0;i<m.length;i++){m[i]=parseFloat(m[i])}if(m.length==6){return[m[0],m[1],0,0,m[2],m[3],0,0,0,0,1,0,m[4],m[5],0,1]}else{return[m[0],m[1],m[2],m[3],m[4],m[5],m[6],m[7],m[8],m[9],m[10],m[11],m[12],m[13],m[14],m[15]]}}}});require.register("matrixToString",function(module,exports){module.exports=function(m){return"matrix3d("+m.join(",")+")"}});require.register("cubicBezier",function(module,exports){module.exports=function(f){if(typeof f=="string"){return f}return"cubic-bezier("+f.join(",")+")"}});require.register("styleSet",function(module,exports){module.exports=function(o){for(var k in o){if(this.style[k]!=o[k]){this.style[k]=o[k]}}}});require.register("extendProperty",function(module,exports){module.exports=function(target,giver){for(var k in giver){if(!target[k]){target[k]=giver[k]}}}});require.register("eventBank",function(module,exports){module.exports={addAction:function(event,func){var eventBank=this._bank||(this._bank={}),bankCase=eventBank[event]||(eventBank[event]=[]);bankCase.push(func)},trigger:function(event){var args=Array.prototype.slice.call(arguments,1);var eventBank=this._bank,bankCase;if(!eventBank||!(bankCase=eventBank[event]))return;for(var i=0;i<bankCase.length;i++){return bankCase[i].apply(this,args)}}}});require.register("eventTools",function(module,exports){var add=window.addEventListener?"addEventListener":"attachEvent",sub=window.removeEventListener?"removeEventListener":"detachEvent",header=add=="attachEvent"?"on":"";exports.add=function(el,eName,fn,catcher){el[add](header+eName,fn,catcher||false)};exports.sub=function(el,eName,fn,catcher){el[sub](header+eName,fn,catcher||false)}});require.register("motion",function(module,exports){var tf=require("transformTest"),ts=require("transitionTest"),tr=require("testResult"),endE=require("endEvent"),ml=require("matrixLibrary"),mc=require("matrixCombine"),mts=require("matrixToString"),stm=require("stringToMatrix"),ep=require("extendProperty"),eb=require("eventBank"),ss=require("styleSet"),cb=require("cubicBezier"),et=require("eventTools");if(!tr){alert("您的浏览器版本过低，动画效果可能无法正常展现！")}function Motion(target){this.el=target;this._init();return this}Motion.prototype={translateAll:function(x,y,z){return this.trigger("matrixSet","translateAll",x,y,z)},translateX:function(x){return this.trigger("matrixSet","translateX",x)},translateY:function(y){return this.trigger("matrixSet","translateY",y)},translateZ:function(z){return this.trigger("matrixSet","translateZ",z)},scale:function(x,y,z){return this.trigger("matrixSet","scale",x,y,z)},scaleX:function(x){return this.trigger("matrixSet","scaleX",x)},scaleY:function(y){return this.trigger("matrixSet","scaleY",y)},scaleZ:function(z){return this.trigger("matrixSet","scaleZ",z)},rotate:function(x,y,z,deg){return this.trigger("matrixSet","rotate",x,y,z,deg)},rotateX:function(x){return this.trigger("matrixSet","rotateX",x)},rotateY:function(y){return this.trigger("matrixSet","rotateY",y)},rotateZ:function(z){return this.trigger("matrixSet","rotateZ",z)},skew:function(x,y){return this.trigger("matrixSet","skew",x,y)},skewX:function(x){return this.trigger("matrixSet","skewX",x)},skewY:function(y){return this.trigger("matrixSet","skewY",y)},_init:function(){this.trigger("initElement")},newFrame:function(t,f){return this.trigger("newFrame",t,f)},newAttribute:function(n,v){return this.trigger("newAttribute",n,v)},prepare:function(){return this.trigger("prepare")},move:function(i,d,f){return this.trigger("move",i,d,f)},loop:function(i,f){return this.trigger("loop",i,f)},stop:function(f){this.trigger("stop",f)},reset:function(i){return this.trigger("reset",i)}};ep(Motion.prototype,eb);Motion.prototype.addAction("initElement",function(){this.direction="forward";this.status="stop";this.endCount=0;this.motionCount=0;this.keyFrames=[{}];this.moveFrame=this.keyFrames[0];this.moveFrame[tf]=getComputedStyle(this.el)[tf]});Motion.prototype.addAction("newFrame",function(t,f){if(this.status=="moving"){return false}else{this.status="setting"}var k=this.keyFrames,i=k.length;k[i]={};k[i+1]={};k[i][ts+"Property"]="all";k[i][ts+"Duration"]=t?t+"ms":this.el.style[ts+"Duration"]||"1000ms";k[i][ts+"TimingFunction"]=f?cb(f):this.el.style[ts+"TimingFunction"]||"linear";Object.defineProperty(k[i],"eventCount",{numerable:false,writable:true,value:0});if(k[i-1]){for(var key in k[i-1]){k[i+1][key]=k[i-1][key]}}return this});Motion.prototype.addAction("matrixSet",function(){if(this.status=="setting"){var k=this.keyFrames,i=k.length-1,n=Array.prototype.shift.call(arguments,0);var om=stm(k[i][tf]);var nm=ml[n].apply(null,arguments);k[i][tf]=mts(mc(om,nm));return this}return false});Motion.prototype.addAction("newAttribute",function(n,v){if(this.status=="setting"){var k=this.keyFrames;k[k.length-1][n]=v;for(var i=k.length-3;i>=0;i-=2){if(!k[i][n]){k[i][n]=""}}return this}return false});Motion.prototype.addAction("loop",function(i,f){if(i==0){this.motionCount=NaN}else{this.motionCount=i?i*(((this.keyFrames.length-1)/2+1)*2-2):0.5*(((this.keyFrames.length-1)/2+1)*2-2)}this.trigger("motionMove",f)});Motion.prototype.addAction("move",function(i,d,f){this.motionCount=i;if(d&&d!=null){this.direction=d}this.trigger("motionMove",f)});Motion.prototype.addAction("prepare",function(){if(this.status=="setting"){this.status="prepare";var k=this.keyFrames;for(var i=1;i<this.keyFrames.length;i+=2){for(var key in k[i-1]){if(k[i-1][key]!=k[i+1][key]){k[i].eventCount++}}}return this}return false});Motion.prototype.addAction("directionTest",function(){var k=this.keyFrames,o=this.moveFrame,i=k.indexOf(o);if(i==0){this.direction="forward"}else if(i==k.length-1){this.direction="backward"}});Motion.prototype.addAction("frameTest",function(){var i=this.keyFrames.indexOf(this.moveFrame);if(this.direction=="forward"){this.transFrame=this.keyFrames[i+1];this.moveFrame=this.keyFrames[i+2]}else{this.transFrame=this.keyFrames[i-1];this.moveFrame=this.keyFrames[i-2]}if(!this.moveFrame||!this.transFrame){this.motionCount=0;return}});Motion.prototype.addAction("frameRun",function(){ss.call(this.el,this.transFrame);ss.call(this.el,this.moveFrame)});Motion.prototype.addAction("stop",function(f){et.sub(this.el,endE,this.endEvent,false);this.endEvent=null;this.el.style[ts+"Duration"]="0ms";this.status="prepare";ss.call(this.el,this.moveFrame);this.motionCount=0;if(f){f()}return this});Motion.prototype.addAction("reset",function(n){et.sub(this.el,endE,this.endEvent,false);this.endEvent=null;this.el.style[ts+"Duration"]="0ms";this.status="stop";this.direction="forward";this.motionCount=0;this.keyFrames=[this.keyFrames[n*2-2]||this.moveFrame];this.moveFrame=this.keyFrames[0];this.transFrame={};for(var k in this.moveFrame){if(this.moveFrame[k]==""){delete this.moveFrame[k]}else if(this.el.style[k]!=this.moveFrame[k]){this.el.style[k]=this.moveFrame[k]}}return this});Motion.prototype.addAction("motionMove",function(f){if(this.status=="prepare"){this.status="moving";this.endEvent=this.trigger("motionEnd",f).bind(this);et.add(this.el,endE,this.endEvent,false);this.trigger("directionTest");this.trigger("frameTest");this.trigger("frameRun")}});Motion.prototype.addAction("motionEnd",function(f){return function(){this.endCount++;if(this.transFrame.eventCount==this.endCount){this.endCount=0;this.motionCount--;if(this.motionCount==0){return this.trigger("stop",f)}else{this.trigger("directionTest");this.trigger("frameTest");this.trigger("frameRun")}}}});module.exports=Motion});window.Motion=require("motion")})();