javascript动画对象支持加速、减速、缓入、缓出的实现代码

调用接口：

/** 
* @param elem {HTMLElement} 执行动画的HTML元素 
* @param params {JSON} 动画执行过过程中需要修改的HTML属性 
* @param duration {Number} 可选，动画执行时间，单位毫秒 
* @param easing {String} 可选，动画执行的方式，缓入easeIn、缓出easeOut 
* @param callback {Function} 可选，动画执行完成时的回调函数 
* @return 
*/ 
effect.animate(elem, params, duration, easing, callback);

使用它用不了20行代码就可以做一个产品图片减速淡出、加速淡入的切换效果点击这里查看演示效果

//辅助对象，读/写DOM元素属性 
var attribute = { 
get: function(elem, attr){ 
var val; 
if(elem.currentStyle){ 
if(attr === "opacity") { 
val = elem.filters.alpha[attr]; 
}else { 
val = elem.currentStyle[attr]; 
} 
} 
else{ 
val = getComputedStyle(elem)[attr]; 
if(attr === "opacity") { 
val = 100 * val; 
} 
} 
return val; 
}, 
set: function(elem, attr, val){ 
if(attr=='opacity'){ 
elem.style.filter = 'alpha(opacity='+ (val) +')'; 
elem.style.opacity = (val)/100; 
} 
else{ 
elem.style[attr] = val + 'px'; 
} 
} 
}; 
/* 
* 描述: tween动画算法。 
* @param Number t: 动画已经执行的时间（实际上时执行多少次/帧数） 
* @param Number b: 起始位置 
* @param Number c: 终止位置 
* @param Number d: 从起始位置到终止位置的经过时间（实际上时执行多少次/帧数） 
*/ 
var tween = { 
//缓入 
easeIn: function (t, b, c, d){ 
return c * (t/=d) * t + b; 
}, 
//缓出 
easeOut: function (t,b,c,d){ 
return -c * (t/=d) * (t-2) + b; 
} 
}; 
//动画对象 
var effect = { 
animate: function(elem, params, duration, easing, callback){ 
var dt = new Date().getTime(), 
b = 0, 
c = 0, 
d = duration || 500, 
fps = 1000/60; 
var changes = []; 
for(var attr in params){ 
b = parseFloat(attribute.get(elem, attr)); 
c = params[attr] - b; 
changes.push({ 
attr: attr, 
b: b, 
c: c 
}); 
} 
easing = easing || "easeOut"; 
callback = callback || new Function; 
setTimeout(function(){ 
var t = new Date().getTime() - dt; 
var b, c, attr; 
for(var i=0; i<changes.length; i++){ 
b = changes[i].b; 
c = changes[i].c; 
attr = changes[i].attr; 
attribute.set(elem, attr, tween[easing](t, b, c, d)); 
if(d <= t){ 
attribute.set(elem, attr, params[attr]); 
callback(); 
return; 
} 
} 
setTimeout(arguments.callee, fps); 
}, fps); 
} 
}; 
//by [e-mail]