animate动画方法封装：原生JS实现
浏览数：21 /
时间：2015年06月09日
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 });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
