1 /**  2  * Created by guoyongfeng on 2014/7/7.  3  * @Author      guoyongfeng  4  * @Date        2014-07-07  5  * @Version     1.0.0  6  * @update        2014-07-07  7  * @described    tween动画库函数封装  8  *  9  */ 10 define(‘animate/0.0.1‘, function(){ 11     /** 12      * 13      */ 14     return function(ele, json, duration, effect, fnCallBack){ 15         //对传参effect进行判断，并将获得的方法统一赋值给action方法 16         //对传参的判断可以实现js的重载功能。 17         var action=null; 18         if(typeof effect =="number"){ 19             //1 buffer,2 flex,3 bounce 4 linear 20             switch(effect){ 21                 case 1: 22                     action=moveEffect.Exponential.easeOut; 23                     break; 24                 case 2: 25                     action=moveEffect.Elastic.easeOut; 26                     break; 27                 case 3: 28                     action=moveEffect.Bounce.easeOut; 29                     break; 30                 case 4: 31                     action=moveEffect.Linear; 32                     break; 33                 default: 34                     break; 35             } 36         }else if(typeof effect == ‘string‘){ 37             switch(effect){ 38                 case ‘Exponential‘: 39                     action=moveEffect.Exponential.easeOut; 40                     break; 41                 case ‘Elastic‘: 42                     action=moveEffect.Elastic.easeOut; 43                     break; 44                 case ‘Bounce‘: 45                     action=moveEffect.Bounce.easeOut; 46                     break; 47                 case ‘Linear‘: 48                     action=moveEffect.Linear; 49                     break; 50                 default: 51                     break; 52             } 53  54         }else if(typeof effect == "function"){ 55             //参数effect是个函数，则默认为这是回调函数，并采用默认的运动效果 56             fnCallback=effect; 57         }else if(effect instanceof Array){ 58             //输入格式：[‘Expo‘,‘easeOut‘] 59             if(effect.length===2){ 60                 action=moveEffect[effect[0]][effect[1]]; 61             }else if(effect.length==1){ 62                 action=moveEffect.Linear; 63             } 64         }else{ 65             action=moveEffect.Exponential.easeOut; 66         } 67  68         //获取初试值 69         var oBegin={}; 70         var oChange={}; 71         for(var attr in json){ 72             var begin=0, change=0, count=0; 73             if(attr == ‘opacity‘){ 74                 begin=Math.random((parseFloat(getStyle(ele, attr)))*100); 75                 change=json[attr]-begin; 76                 if(begin == ‘undefined‘){ 77                     ele.style[attr]=‘alpha(opacity:100)‘; 78                     ele.style.opacity=1; 79                 } 80             }else{ 81                 begin=parseInt(getStyle(ele, attr)); 82                 change=json[attr]-begin; 83             } 84             //保存 85             if(change){ 86                 count++; 87                 oBegin[attr]=begin; 88                 oChange[attr]=change; 89             } 90         } 91         //判断所有变量是否到齐 92         if(count == 0){ 93             if(typeof fnCallBack == ‘function‘){ 94                 fnCallBack.call(ele); 95             }else{ 96                 return ; 97             } 98         } 99 100         //封装运动函数101         var times=0;102         var interval=30;103         move();104 105         function move(){106             clearInterval(ele.timer);107             times+=interval;108 109             if(times<=duration){110                 for(var attr in json){111                     //var val=times*oChange[attr]/duration+oBegin[attr];112                     var val=action(times, oBegin[attr], oChange[attr], duration);113                     if(attr == ‘opacity‘){114                         ele.style[attr]=val/100;115                         ele.style.filter="alpha(opacity="+val+")";116                     }else{117                         ele.style[attr]=val+‘px‘;118                     }119                 }120                 ele.timer=window.setInterval(move, interval);121             }else{122                 if(attr == ‘opacity‘){123                     ele.style[attr]=json[attr]/100;124                     ele.style.filter="alpha(opacity="+json[attr]+")";125                 }else{126                     ele.style[attr]=json[attr]+‘px‘;127                 }128                 //回调函数129                 if(typeof fnCallBack == ‘function‘){130                     fnCallBack.call(ele);131                 }132 133                 ele.timer=null;134             }135         }136 137         //获取css样式的兼容性写法138         function getStyle(obj, attr){139             if(obj.currentStyle){140                 return obj.currentStyle[attr];141             }else{142                 return getComputedStyle(obj, null)[attr];143             }144         }145 146     }147 148     //思路：当前时间*变化量/持续时间+初始值149     var moveEffect = {150         //1.线性运动151         Linear: function(t,b,c,d){152             return c*t/d + b;153         },154         //2.二次方的缓动（t^2）；155         Quadratic: {156             easeIn: function(t,b,c,d){157                 return c*(t/=d)*t + b;158             },159             easeOut: function(t,b,c,d){160                 return -c *(t/=d)*(t-2) + b;161             },162             easeInOut: function(t,b,c,d){163                 if ((t/=d/2) < 1) return c/2*t*t + b;164                 return -c/2 * ((--t)*(t-2) - 1) + b;165             }166         },167         //3.三次方的缓动（t^3）168         Cubic: {169             easeIn: function(t,b,c,d){170                 return c*(t/=d)*t*t + b;171             },172             easeOut: function(t,b,c,d){173                 return c*((t=t/d-1)*t*t + 1) + b;174             },175             easeInOut: function(t,b,c,d){176                 if ((t/=d/2) < 1) return c/2*t*t*t + b;177                 return c/2*((t-=2)*t*t + 2) + b;178             }179         },180         //4.四次方的缓动（t^4）；181         Quartic: {182             easeIn: function(t,b,c,d){183                 return c*(t/=d)*t*t*t + b;184             },185             easeOut: function(t,b,c,d){186                 return -c * ((t=t/d-1)*t*t*t - 1) + b;187             },188             easeInOut: function(t,b,c,d){189                 if ((t/=d/2) < 1) return c/2*t*t*t*t + b;190                 return -c/2 * ((t-=2)*t*t*t - 2) + b;191             }192         },193         //5.五次方的缓动（t^5）；194         Quintic: {195             easeIn: function(t,b,c,d){196                 return c*(t/=d)*t*t*t*t + b;197             },198             easeOut: function(t,b,c,d){199                 return c*((t=t/d-1)*t*t*t*t + 1) + b;200             },201             easeInOut: function(t,b,c,d){202                 if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;203                 return c/2*((t-=2)*t*t*t*t + 2) + b;204             }205         },206         //6.正弦曲线的缓动sin(t)207         Sinusoidal: {208             easeIn: function(t,b,c,d){209                 return -c * Math.cos(t/d * (Math.PI/2)) + c + b;210             },211             easeOut: function(t,b,c,d){212                 return c * Math.sin(t/d * (Math.PI/2)) + b;213             },214             easeInOut: function(t,b,c,d){215                 return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;216             }217         },218         //7.指数曲线的缓动（2^t）；219         Exponential: {220             easeIn: function(t,b,c,d){221                 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;222             },223             easeOut: function(t,b,c,d){224                 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;225             },226             easeInOut: function(t,b,c,d){227                 if (t==0) return b;228                 if (t==d) return b+c;229                 if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;230                 return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;231             }232         },233         //8.圆形曲线的缓动（sqrt(1-t^2)）；234         Circular: {235             easeIn: function(t,b,c,d){236                 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;237             },238             easeOut: function(t,b,c,d){239                 return c * Math.sqrt(1 - (t=t/d-1)*t) + b;240             },241             easeInOut: function(t,b,c,d){242                 if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;243                 return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;244             }245         },246         //9.指数衰减的正弦曲线缓动；247         Elastic: {248             easeIn: function(t,b,c,d,a,p){249                 if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;250                 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }251                 else var s = p/(2*Math.PI) * Math.asin (c/a);252                 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;253             },254             easeOut: function(t,b,c,d,a,p){255                 if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;256                 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }257                 else var s = p/(2*Math.PI) * Math.asin (c/a);258                 return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);259             },260             easeInOut: function(t,b,c,d,a,p){261                 if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);262                 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }263                 else var s = p/(2*Math.PI) * Math.asin (c/a);264                 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;265                 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;266             }267         },268         //10.超过范围的三次方缓动（(s+1)*t^3 - s*t^2）；269         Back: {270             easeIn: function(t,b,c,d,s){271                 if (s == undefined) s = 1.70158;272                 return c*(t/=d)*t*((s+1)*t - s) + b;273             },274             easeOut: function(t,b,c,d,s){275                 if (s == undefined) s = 1.70158;276                 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;277             },278             easeInOut: function(t,b,c,d,s){279                 if (s == undefined) s = 1.70158;280                 if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;281                 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;282             }283         },284         //11.指数衰减的反弹缓动。285         Bounce: {286             easeIn: function(t,b,c,d){287                 return c - moveEffect.Bounce.easeOut(d-t, 0, c, d) + b;288             },289             easeOut: function(t,b,c,d){290                 if ((t/=d) < (1/2.75)) {291                     return c*(7.5625*t*t) + b;292                 } else if (t < (2/2.75)) {293                     return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;294                 } else if (t < (2.5/2.75)) {295                     return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;296                 } else {297                     return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;298                 }299             },300             easeInOut: function(t,b,c,d){301                 if (t < d/2) return moveEffect.Bounce.easeIn(t*2, 0, c, d) * .5 + b;302                 else return moveEffect.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;303             }304         }305     };306 });