原生Js封装的动画类
算法用的是Tween类，需要研究的参考这篇文章:
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
网页里常用的动画 放大缩小 位置移动 透明度改变
效果预览：http://jsfiddle.net/dtdxrk/WnACG/embedded/result/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>原生Js封装的动画类</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0} 8 input {padding: 5px 10px;} 9 10 #content{margin:10px;width:100px;height:100px;border: 5px solid #666;text-align: center; opacity: 1; filter: alpha(opacity=100);} 11 #content h1{background-color: #666;color: #fff;text-align: center;margin:10px;} 12 13 </style> 14 </head> 15 16 <body> 17 <input type="button" value="渐隐" onclick="Animation.alpha(_CalF.$('#content'),0);" /> 18 <input type="button" value="渐显" onclick="Animation.alpha(_CalF.$('#content'),100);" /> 19 <input type="button" value="位置移动" onclick="Animation.move(_CalF.$('#content'),{x:1000,y:500},Tween.Cubic.easeIn);" /> 20 <input type="button" value="位置移动2" onclick="Animation.move(_CalF.$('#content'),{x:100,y:100},Tween.Cubic.easeOuth);" /> 21 <input type="button" value="变大" onclick="Animation.size(_CalF.$('#content'),{w:500,h:500},Tween.Cubic.easeIn);" /> 22 <input type="button" value="缩小" onclick="Animation.size(_CalF.$('#content'),{w:100,h:100},Tween.Cubic.easeOuth);" /> 23 <input type="button" value="综合动画" onclick="Animation.alpha(_CalF.$('#content'),0);Animation.move(_CalF.$('#content'),{x:1000,y:500},Tween.Cubic.easeIn);Animation.size(_CalF.$('#content'),{w:500,h:500},Tween.Cubic.easeOuth);" /> 24 <input type="button" value="综合动画2" onclick="Animation.alpha(_CalF.$('#content'),100);Animation.move(_CalF.$('#content'),{x:200,y:200},Tween.Cubic.easeIn);Animation.size(_CalF.$('#content'),{w:200,h:200},Tween.Cubic.easeOuth);" /> 25 <div id="content"> 26 <h1>动画类</h1> 27 </div> 28 29 30 <script type="text/javascript"> 31 var _CalF = { 32 $ : function(object){//选择器 33 if(object === undefined ) return; 34 var getArr = function(name,tagName,attr){ 35 var tagName = tagName || '*', 36 eles = document.getElementsByTagName(tagName), 37 clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6 38 attr = attr || clas, 39 Arr = []; 40 for(var i=0;i<eles.length;i++){ 41 if(eles[i].getAttribute(attr)==name){ 42 Arr.push(eles[i]); 43 } 44 } 45 return Arr; 46 }; 47 48 if(object.indexOf('#') === 0){ //#id 49 return document.getElementById(object.substring(1)); 50 }else if(object.indexOf('.') === 0){ //.class 51 return getArr(object.substring(1)); 52 }else if(object.match(/=/g)){ //attr=name 53 return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g))); 54 }else if(object.match(/./g)){ //tagName.className 55 return getArr(object.split('.')[1],object.split('.')[0]); 56 } 57 }, 58 getPosition : function(obj) { //获取元素在页面里的位置和宽高 59 var top = 0, 60 left = 0, 61 width = obj.offsetWidth, 62 height = obj.offsetHeight; 63 64 while(obj.offsetParent){ 65 top += obj.offsetTop; 66 left += obj.offsetLeft; 67 obj = obj.offsetParent; 68 } 69 70 return {"top":top,"left":left,"width":width,"height":height}; 71 } 72 }; 73 74 75 /* 76 t:currentCount 当前执行第t次 77 b:initPos 初始值 78 c:targetPos - initPos 发生偏移的距离值 79 d:count 一共执行d次 80 效果：http://www.robertpenner.com/easing/easing_demo.html 81 */ 82 83 var Tween = { 84 Linear: function(initPos, targetPos, currentCount, count) { 85 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 86 return c * t / d + b; 87 }, 88 Quad: { 89 easeIn: function(initPos, targetPos, currentCount, count) { 90 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 91 return c * (t /= d) * t + b; 92 }, 93 easeOut: function(initPos, targetPos, currentCount, count) { 94 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 95 return -c * (t /= d) * (t - 2) + b; 96 }, 97 easeInOut: function(initPos, targetPos, currentCount, count) { 98 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 99 if ((t /= d / 2) < 1) return c / 2 * t * t + b; 100 return -c / 2 * ((--t) * (t - 2) - 1) + b; 101 } 102 }, 103 Cubic: { 104 easeIn: function(initPos, targetPos, currentCount, count) { 105 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 106 return c * (t /= d) * t * t + b; 107 }, 108 easeOut: function(initPos, targetPos, currentCount, count) { 109 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 110 return c * ((t = t / d - 1) * t * t + 1) + b; 111 }, 112 easeInOut: function(initPos, targetPos, currentCount, count) { 113 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 114 if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; 115 return c / 2 * ((t -= 2) * t * t + 2) + b; 116 } 117 }, 118 Quart: { 119 easeIn: function(initPos, targetPos, currentCount, count) { 120 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 121 return c * (t /= d) * t * t * t + b; 122 }, 123 easeOut: function(initPos, targetPos, currentCount, count) { 124 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 125 return -c * ((t = t / d - 1) * t * t * t - 1) + b; 126 }, 127 easeInOut: function(initPos, targetPos, currentCount, count) { 128 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 129 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; 130 return -c / 2 * ((t -= 2) * t * t * t - 2) + b; 131 } 132 }, 133 Quint: { 134 easeIn: function(initPos, targetPos, currentCount, count) { 135 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 136 return c * (t /= d) * t * t * t * t + b; 137 }, 138 easeOut: function(initPos, targetPos, currentCount, count) { 139 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 140 return c * ((t = t / d - 1) * t * t * t * t + 1) + b; 141 }, 142 easeInOut: function(initPos, targetPos, currentCount, count) { 143 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 144 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; 145 return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; 146 } 147 }, 148 Sine: { 149 easeIn: function(initPos, targetPos, currentCount, count) { 150 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 151 return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; 152 }, 153 easeOut: function(initPos, targetPos, currentCount, count) { 154 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 155 return c * Math.sin(t / d * (Math.PI / 2)) + b; 156 }, 157 easeInOut: function(initPos, targetPos, currentCount, count) { 158 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 159 return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; 160 } 161 }, 162 Expo: { 163 easeIn: function(initPos, targetPos, currentCount, count) { 164 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 165 return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; 166 }, 167 easeOut: function(initPos, targetPos, currentCount, count) { 168 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 169 return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; 170 }, 171 easeInOut: function(initPos, targetPos, currentCount, count) { 172 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 173 if (t == 0) return b; 174 if (t == d) return b + c; 175 if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; 176 return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; 177 } 178 }, 179 Circ: { 180 easeIn: function(initPos, targetPos, currentCount, count) { 181 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 182 return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; 183 }, 184 easeOut: function(initPos, targetPos, currentCount, count) { 185 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 186 return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; 187 }, 188 easeInOut: function(initPos, targetPos, currentCount, count) { 189 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 190 if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; 191 return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; 192 } 193 }, 194 Elastic: { 195 easeIn: function(initPos, targetPos, currentCount, count, a, p) { 196 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 197 if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; 198 if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } 199 else var s = p / (2 * Math.PI) * Math.asin(c / a); 200 return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 201 }, 202 easeOut: function(initPos, targetPos, currentCount, count, a, p) { 203 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 204 if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; 205 if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } 206 else var s = p / (2 * Math.PI) * Math.asin(c / a); 207 return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); 208 }, 209 easeInOut: function(initPos, targetPos, currentCount, count, a, p) { 210 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 211 if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5); 212 if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } 213 else var s = p / (2 * Math.PI) * Math.asin(c / a); 214 if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 215 return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b; 216 } 217 }, 218 Back: { 219 easeIn: function(initPos, targetPos, currentCount, count, s) { 220 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 221 if (s == undefined) s = 1.70158; 222 return c * (t /= d) * t * ((s + 1) * t - s) + b; 223 }, 224 easeOut: function(initPos, targetPos, currentCount, count, s) { 225 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 226 if (s == undefined) s = 1.70158; 227 return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; 228 }, 229 easeInOut: function(initPos, targetPos, currentCount, count, s) { 230 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 231 if (s == undefined) s = 1.70158; 232 if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; 233 return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; 234 } 235 }, 236 Bounce: { 237 easeIn: function(initPos, targetPos, currentCount, count) { 238 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 239 return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b; 240 }, 241 easeOut: function(initPos, targetPos, currentCount, count) { 242 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 243 if ((t /= d) < (1 / 2.75)) { 244 return c * (7.5625 * t * t) + b; 245 } else if (t < (2 / 2.75)) { 246 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; 247 } else if (t < (2.5 / 2.75)) { 248 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; 249 } else { 250 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; 251 } 252 }, 253 easeInOut: function(initPos, targetPos, currentCount, count) { 254 var b = initPos, c = targetPos - initPos, t = currentCount, d = count; 255 if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; 256 else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; 257 } 258 } 259 } 260 261 262 263 264 var Animation = { 265 timer : 10, 266 alphaPlay : "", 267 alpha : function(obj,value,Func){ //透明度 268 var that = this, 269 num = 0, 270 F, 271 init = document.all ? obj.filters.alpha.opacity : window.getComputedStyle(obj, null).opacity * 100; //获取元素的透明度 272 clearInterval(that.alphaPlay); 273 if(value<0){ 274 value=0; 275 }else if(value>100){ 276 value=100 277 }else{ 278 value=value; 279 } 280 281 Func = Func || Tween.Linear; 282 283 that.alphaPlay = setInterval(function(){ 284 if(num>100){ 285 clearInterval(that.alphaPlay); 286 }else{ 287 num++; 288 F = Func(init,value,num,100); 289 if (document.all) { 290 obj.filters.alpha.opacity = F; 291 obj.style.zoom =1; 292 }else { 293 obj.style.opacity = F / 100; 294 } 295 } 296 },that.timer); 297 }, 298 movePlay : "", 299 move :function(obj,pos,Func){ //移动 300 var that = this, 301 elPos = _CalF.getPosition(obj), 302 initPos = {x:elPos.left, y:elPos.top}, 303 num = 0, 304 _tempX,_tempY; 305 306 clearInterval(that.movePlay); 307 Func = Func || Tween.Linear; 308 obj.style.position = "absolute"; 309 310 that.movePlay = setInterval(function(){ 311 if(num>100){ 312 clearInterval(that.movePlay); 313 }else{ 314 num++; 315 _tempX = Func(initPos.x, pos.x, num, 100); 316 _tempY = Func(initPos.y, pos.y, num, 100); 317 obj.style.left = _tempX +"px"; 318 obj.style.top = _tempY +"px"; 319 } 320 },that.timer); 321 }, 322 sizePlay : "", 323 size : function(obj,pos,Func){ //改变大小 324 var that = this, 325 initPos = {w:obj.offsetWidth, h:obj.offsetHeight}, 326 num = 0, 327 _tempW,_tempH; 328 clearInterval(that.sizePlay); 329 Func = Func || Tween.Linear; 330 331 that.sizePlay = setInterval(function(){ 332 if(num>100){ 333 clearInterval(that.sizePlay); 334 }else{ 335 num++; 336 _tempW = Func(initPos.w, pos.w, num, 100); 337 _tempH = Func(initPos.h, pos.h, num, 100); 338 obj.style.width = _tempW +"px"; 339 obj.style.height = _tempH +"px"; 340 } 341 },that.timer); 342 } 343 } 344 345 346 347 348 </script> 349 </body> 350 </html>
