原生javascript運動函式的封裝的幾種方式

//封裝勻速運動

//引數：
// 1、dom物件
// 2、樣式屬性（top，left，width，height，opacity等等）
// 3、起始位置，結束位置
// 4、速度：時間間隔，步長
// 5、方向：
//返回值

function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) {
	
	let currValue = startValue;

	let myTimer = setInterval(function(){
		//1、改變資料
		currValue = currValue+direction*step;

		//2、判斷邊界
		// if(currValue>=endValue){//??
		// 	currValue = endValue;//??
		// 	window.clearInterval(myTimer);
		// }

		if(Math.abs(currValue-endValue)<step){
			currValue = endValue;
			window.clearInterval(myTimer);
		}
		//3、改變外觀
		if(attr=="opacity"){
			domObj.style[attr] = currValue;
		}else{
			domObj.style[attr] = currValue+"px";
		}

	},timeSpace);
}


//封裝勻速運動

//引數：
// 1、dom物件
// 2、樣式屬性（top，left，width，height，opacity等等）
// 3、結束位置
// 4、時長：
//返回值

function moveObj02(domObj,attr,endValue,timeLong) {
	let startValue = parseFloat(getStyle(domObj,attr));//??
	let direction= endValue-startValue>0?1:-1;//??	
	let timeSpace = 10;
	let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子數;//
	
	let currValue = startValue;
	let myTimer = setInterval(function(){
		//1、改變資料
		currValue = currValue+direction*step;

		//2、判斷邊界
		if(Math.abs(currValue-endValue)<step){
			currValue = endValue;
			window.clearInterval(myTimer);
		}
		//3、改變外觀
		if(attr=="opacity"){
			domObj.style[attr] = currValue;
		}else{
			domObj.style[attr] = currValue+"px";
		}

	},timeSpace);
}

//封裝拋物線運動(右開口為例)
//引數：
// dom物件
// 起點
// 終點
// 總時長
// 

//返回值：無

function parabola(domObj,startPoint,endPoint,timeLong,func){
	//一、初始化
	
	let offsetX = endPoint.x-startPoint.x;
	let offsetY = endPoint.y-startPoint.y;
	let p = (offsetY*offsetY)/(2*offsetX);
	let left1 = 0;
	domObj.style.left = startPoint.x+"px";
	domObj.style.top = startPoint.y+"px";
	let timeSpace = 10;
	let step = Math.abs(endPoint.x-startPoint.x)/(timeLong/timeSpace) // endValue-startValue/步子數;//
	
	//二、啟動定時器
	let myTimer = setInterval(function(){
		//1、改變資料
		left1=left1+step;
		let top1=Math.sqrt(2*p*left1);

		//2、判斷邊界
		if(left1>=offsetX){
			left1 = offsetX;
			top1=Math.sqrt(2*p*left1);
			window.clearInterval(myTimer);
			if(func){
				func();
			}
		}

		//3、改變外觀			
		domObj.style.left = left1+startPoint.x+"px";
		domObj.style.top = top1+startPoint.y+"px";
		
	},timeSpace);
}

//淡入：
//引數：
// dom物件
// 時長；
//返回值：無

function fadeIn(domObj,timeLong){
	domObj.style.opacity = 0;
	moveObj02(domObj,"opacity",1,timeLong);
}


//淡出：
//引數：
// dom物件
// 時長；
//返回值：無

function fadeOut(domObj,timeLong){
	domObj.style.opacity = 1;
	moveObj02(domObj,"opacity",0,timeLong);
}


//淡入和淡出：
//引數：
// domObjIn：淡入的dom物件
// domObjOut：淡出的dom物件
// 時長；
//返回值：無

function fadeInOut(domObjIn,domObjOut,timeLong,func){
	domObjIn.style.opacity = 0;
	domObjOut.style.opacity = 1;

	let startValue = 0;
	let endValue = 1;
	let direction= 1;
	let timeSpace = 10;
	let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子數;//
	
	let currValue = startValue;
	let myTimer = setInterval(function(){
		//1、改變資料
		currValue = currValue+direction*step;

		//2、判斷邊界
		if(Math.abs(currValue-endValue)<step){
			currValue = endValue;
			window.clearInterval(myTimer);
			func&&func();
		}
		//3、改變外觀
		domObjIn.style.opacity = currValue;
		domObjOut.style.opacity = 1-currValue;
	},timeSpace);
}



//多屬性的運動
//引數：
// 1、dom物件
// 2、每個樣式屬性的結束值
// 4、時長：
//返回值

//呼叫示例：
/*
animate($("box"),{
	"width":600,
	"height":400,
	"left":50
},2000)
*/

function animate(domObj,endObj,timeLong) {
	// let startValue = parseFloat(getStyle(domObj,attr));//??
	let startObj = {}
	for(let key in endObj){
		startObj[key] = parseFloat(getStyle(domObj,key));
	}

	// let direction= endValue-startValue>0?1:-1;//??	
	let directionObj = {};
	for(let key in endObj){
		directionObj[key] = endObj[key]>startObj[key]?1:-1;
	}

	let timeSpace = 10;
	// let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子數;//
	let stepObj = {};	
	for(let key in endObj){
		stepObj[key] = Math.abs(endObj[key]-startObj[key] )/(timeLong/timeSpace);
	}

	//let currValue = startValue;
	let currObj = {};
	for(let key in endObj){
		currObj[key] = startObj[key];
	}

	let myTimer = setInterval(function(){
		//1、改變資料
		//currValue = currValue+direction*step;
		for(let key in endObj){
			currObj[key] = currObj[key]+directionObj[key]*stepObj[key];
		}
		//2、判斷邊界
		let firstKey = Object.keys(endObj)[0];
		if(Math.abs(currObj[firstKey]-endObj[firstKey])<stepObj[firstKey]){
			for(let key in endObj){
				currObj[key] = endObj[key];
			}
			window.clearInterval(myTimer);
		}
		//3、改變外觀
		for(let key in endObj){
			if(key=="opacity"){
				domObj.style[key] = currObj[key];
			}else{
				domObj.style[key] = currObj[key]+"px";
			}
		}
	},timeSpace);
}