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 [email protected]