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 rentj1@163.com

　　

 

转载于:https://www.cnblogs.com/rentj1/archive/2012/09/29/2708126.html