设计Tween缓动动画基础

HTML

<div id="moveLinear"></div>
    					

左右空字符清理原型方法

//将$设置为获取元素对象的函数，留待以后使用。
$ = function( id ){ return typeof id == "string"?document.getElementById(id):id }
/* des:tween算法。
	t: 动画已经执行的时间（实际上是已经执行了多少次/帧数）
	b: 起始位置
	c: 终止位置
	d: 从起始位置到终止位置的经过时间（实际上总共执行多少次/帧数）
*/
tween = {
	linear : function( t, b, c, d){
		return t*c/d + b;
	}
}
/* des: 控制元素移动的动画对象
	moveType : 元素移动的方式，默认为linear 。
			参数：
				mvTp = string 移动方式
	startMove : 移动元素的函数 
			参数：
				mvObj = string 被移动的元素的id
				mvTp = string 移动方式
*/
move={
	//元素移动的方式：默认为linear
	moveType : function(mvTp){return  mvTp && typeof(mvTp)== "string" && tween[mvTp] ? mvTp: "linear" },
	//移动元素的函数 
	//mvObj:string 被移动的元素的id
	//mvTp:string 移动类型
	startMove : function( mvObj,mvTp,t,b,c,d ){ 
		//判断传入参数是否正确，如果t存在那么还是t，否则为t设置默认值，其他的以此类推
		t ? t : t=0; b ? b : b = 0; c ? c : c =300; d ? d : d = 50; 
		//判断被移动的元素是否存在相对或者绝对的定位属性，1 的作用仅仅是为了完成语法格式（若没有该属性，则无法移动元素）
		$(mvObj).style.position =="relative" || $(mvObj).style.position =="absolute" 
			? 1 : $(mvObj).style.position = "relative";
		//每隔30毫秒重复执行改变元素位置的函数
		mvTimer = setInterval(function(){
		//判断动画已经执行的时间（次数/帧数）是否小于总时间，是的话继续执行改变位置的函数，否则的话，清理该interval。
		//？和：之间的函数是个匿名函数，在匿名函数的后面加上()直接调用该函数，简便写法。
		//tween[move.moveType(mvTp)]() 先通过对象数组的属性obj["x"]方式访问tween的某个属性对象，然后加上()执行该函数对象。
			t <= d 
				? function(){ $(mvObj).style.left = parseInt(tween[move.moveType(mvTp)](t,b,c,d))+"px"; t++;}() 
				: clearInterval(mvTimer);
		} ,30 ) 
	}
}
move.startMove("moveLinear");