tween.js和css3变形的使用

Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.

t => time(初始记步次数)   b => begin(初始位置)   c => change(变化量)   d => duration(持续次数)

Tween详解:http://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/

接上文【最好看一下】：http://blog.csdn.net/xiaomogg/article/details/65028805

m.Tween.js源码:

var Tween = {
	linear: function (t, b, c, d){
		return c*t/d + b;
	},
	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;
	},
	easeBoth: function(t, b, c, d){
		if ((t/=d/2) < 1) {
			return c/2*t*t + b;
		}
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInStrong: function(t, b, c, d){
		return c*(t/=d)*t*t*t + b;
	},
	easeOutStrong: function(t, b, c, d){
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeBothStrong: function(t, b, c, d){
		if ((t/=d/2) < 1) {
			return c/2*t*t*t*t + b;
		}
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	elasticIn: function(t, b, c, d, a, p){
		if (t === 0) { 
			return b; 
		}
		if ( (t /= d) == 1 ) {
			return b+c; 
		}
		if (!p) {
			p=d*0.3; 
		}
		if (!a || a < Math.abs(c)) {
			a = c; 
			var s = p/4;
		} else {
			var s = p/(2*Math.PI) * Math.asin (c/a);
		}
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	elasticOut: function(t, b, c, d, a, p){
		if (t === 0) {
			return b;
		}
		if ( (t /= d) == 1 ) {
			return b+c;
		}
		if (!p) {
			p=d*0.3;
		}
		if (!a || a < Math.abs(c)) {
			a = c;
			var s = p / 4;
		} else {
			var s = p/(2*Math.PI) * Math.asin (c/a);
		}
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},    
	elasticBoth: function(t, b, c, d, a, p){
		if (t === 0) {
			return b;
		}
		if ( (t /= d/2) == 2 ) {
			return b+c;
		}
		if (!p) {
			p = d*(0.3*1.5);
		}
		if ( !a || a < Math.abs(c) ) {
			a = c; 
			var s = p/4;
		}
		else {
			var s = p/(2*Math.PI) * Math.asin (c/a);
		}
		if (t < 1) {
			return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
					Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		}
		return a*Math.pow(2,-10*(t-=1)) * 
				Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
	},
	backIn: function(t, b, c, d, s){
		if (typeof s == 'undefined') {
		   s = 1.70158;
		}
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	backOut: function(t, b, c, d, s){
		if (typeof s == 'undefined') {
			s = 2.70158;  //回缩的距离
		}
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}, 
	backBoth: function(t, b, c, d, s){
		if (typeof s == 'undefined') {
			s = 1.70158; 
		}
		if ((t /= d/2 ) < 1) {
			return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		}
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	bounceIn: function(t, b, c, d){
		return c - Tween['bounceOut'](d-t, 0, c, d) + b;
	},       
	bounceOut: function(t, b, c, d){
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
		}
		return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
	},      
	bounceBoth: function(t, b, c, d){
		if (t < d/2) {
			return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
		}
		return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
	}
};
function cssTransform(el, attr, val) {
	if(!el.transform){
		el.transform = {}
	}
	if(typeof val == "undefined"){
		if(typeof el.transform[attr] == "undefined"){
			switch(attr) {
				case "scale":
				case "scaleX":
				case "scaleY":
					el.transform[attr] = 100;
					break;
				default:
					el.transform[attr] = 0;	
			}
		}
		return el.transform[attr];
	} else {
		var transformVal = "";
		el.transform[attr] = Number(val);
		for(var s in el.transform){
			switch(s){
				case "rotate":
				case "rotateX":
				case "rotateY":
				case "rotateZ":
				case "skewX":
				case "skewY":
					transformVal += " "+s+"("+el.transform[s]+"deg)";
					break;
				case "translateX":
				case "translateY":
				case "translateZ":
					transformVal += " "+s+"("+el.transform[s]+"px)";
					break;
				case "scale":
				case "scaleX":
				case "scaleY":
					transformVal += " "+s+"("+el.transform[s]/100+")";
					break;
			}
		}
		el.style.WebkitTransform = el.style.transform = transformVal;
	}
}
function css(element, attr , val){
	if(attr == "rotate" || attr == "rotateX" 
	|| attr == "rotateY" ||attr == "rotateZ" 
	|| attr == "scale" || attr == "scaleX"
	|| attr == "scaleY" || attr == "skewX"
	|| attr == "skewY" || attr == "translateX"
	|| attr == "translateY" || attr == "translateZ" ){
		return cssTransform(element, attr, val);
	}
	if(arguments.length == 2){ //只要两个参数的时候是获取属性
		var val = getComputedStyle(element)[attr];
		if(attr=='opacity'){
			val = Math.round(val*100);  //透明的*100 减少小数误差
		}
		return parseFloat(val);
	} 
	if(attr == "opacity") {
		element.style.opacity= val/100;
	} else {
		element.style[attr]= val + "px";	
	}
}
function MTween(init){  //对tween进行再次封装
	var t = 0;//当前计时
	var b = {}; //当前值
	var c = {};//目标值和当前值得差
	var d = init.time / 20;  //终止时间
	for(var s in init.target){ 
		b[s] = css(init.el, s); 
		c[s] = init.target[s] - b[s];
	}
	clearInterval(init.el.timer); 
	init.el.timer = setInterval(
		function(){
			t++;
			if(t>d){
				clearInterval(init.el.timer);
				init.callBack&&init.callBack.call(init.el);
			} else {
				init.callIn&&init.callIn.call(init.el);
				for(var s in b){
					var val = (Tween[init.type](t,b[s],c[s],d)).toFixed(2);
					css(init.el, s, val);
				}
			}
		},
		20
	);
}

最终源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	#div {
		width: 100px;
		height: 100px;
		background: red;
	}
</style>
<script type="text/javascript" src="m.Tween.js"></script>
<script type="text/javascript">
window.onload = function(){
	var div = document.querySelector('#div');
	document.onclick = function(){
		MTween({
			el: div,
			target: {
				width: 400,
				height: 300,
				opacity: 50
			},
			time: 1000,
			type: "backOut",
			callBack: function(){
				console.log("动画执行完了");
			},
			callIn: function(){
				console.log("动画执行中");
			}
		});
	};
	/*
		必写参数：
			el 元素 
			target {} 目标点
			time: 动画持续时间 (ms)	
			type: 动画类型 "string"
		可选参数:
			callBack: fn 回调函数(动画执行完之后，执行的函数)
			callIn: fn 	并发函数 (动画执行完中,执行的函数)
	*/
};
</script>
</head>
<body>
<div id="div"></div>	
</body>
</html>