JS之运动框架

一、匀速运动框架

1.设置元素为绝对定位，left、top才有效

<style>
	#div1{width:100px;height:200px;background:#CCC;position:absolute;left:-100px;}
	#div1 span{width:20px;height:60px;left:100px;top:70px;background:yellow;line-height:20px;text-align:center;position:absolute;}
</style>

2. 匀速运动框架startMove

var timer=null;
function startMove(iSpeed,iTarget){
		var oDiv=document.getElementById('div1');
		
		clearInterval(timer);
		timer=setInterval(function(){
			if(oDiv.offsetLeft==iTarget){
				clearInterval(timer);
			}
			else{
				oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
			}
		},30)
}

3. 调用

window.οnlοad=function(){
	var oDiv=document.getElementById('div1');
	oDiv.οnmοuseοver=function(){
		startMove(10,0);
	}
	oDiv.οnmοuseοut=function(){
		startMove(-10,-100);
	}
}

二、缓冲运动

1. 速度=(目标值-当前值)/缩放系数；BUG:速度取整，不然会闪（向上取证:Math.ceil(iSpeed)----向下取整:Math.floor(iSpeed)）

2. 缓冲框架（注意：有除法的地方，就得考虑小数）

<script>
	var timer=null;
	function startMove(iTarget){
		var oDiv=document.getElementById('div1');
		clearInterval(timer);
		timer=setInterval(function(){
			var iSpeed=(iTarget-oDiv.offsetLeft)/8;
			iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);			
			if(oDiv.offsetLeft==iTarget){
				clearInterval(timer);
			}
			else{
				oDiv.style.left = oDiv.offsetLeft + iSpeed + "px";
			}			
		}, 30);
	}
</script>

三、多物体运动

1. 定时器作为对象的属性，每一个div一个定时器

function startMove(obj,iTarget){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var iSpeed=(iTarget-obj.alpha)/8;
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);	
		if(obj.alpha==iTarget){
			clearInterval(obj.timer);
		}
		else{
			obj.alpha+=iSpeed;
			obj.style.filter='alpha(opacity:'+obj.alpha+')';
			obj.style.opacity=obj.alpha/100;
		}			
	}, 30);
}	

window.οnlοad=function(){
	var aDiv=document.getElementsByTagName('div');
		for(var i=0;i<aDiv.length;i++){
		aDiv[i].alpha=30;
			aDiv[i].οnmοuseοver=function(){
				startMove(this,100);
			}
			aDiv[i].οnmοuseοut=function(){
				startMove(this,30);
			}
		}
}

四、任意值变化

1. offsetWidth包括width、padding、border的值，，可以封装函数

function getStyle(element, attr) {
    //IE写法
    if (element.currentStyle) {
        return element.currentStyle[attr];
    //标准
    } else {
        return getComputedStyle(element, false)[attr];
    }
}

2. getStyle获取的是字符串：10px,需要parseInt()

function startMove(element, attr, iTarget) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        //因为速度要动态改变，所以必须放在定时器中
        var iCurrent = 0;
        if (attr === "opacity") { //为透明度时执行。
            iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);
        } else { //默认情况
            iCurrent = parseInt(getStyle(element, attr)); //实际样式大小
        }
        var iSpeed = (iTarget - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整
        if (iCurrent === iTarget) {//结束运动
            clearInterval(element.timer);
        } else {
            if (attr === "opacity") { //为透明度时，执行
                element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE
                element.style.opacity = (iCurrent + iSpeed) / 100; //标准
            } else { //默认
                element.style[attr] = iCurrent + iSpeed + "px";
            }
        }
    }, 30);
}

五、链式运动

if (iCurrent === iTarget) {//结束运动
    clearInterval(element.timer);
    if (func) {//有回调函数，才执行
        func();
    }
}

六、完美框架

function startMove(element, json, func) {
     var flag = true; //假设所有运动到达终点.
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        for (var attr in json) {
            //1.取当前的属性值。
            var iCurrent = 0;
            if (attr === "opacity") { //为透明度时执行。
                iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);
            } else { //默认情况
                iCurrent = parseInt(getStyle(element, attr)); //实际样式大小
            }
            //2.算运动速度,动画缓冲效果
            var iSpeed = (json[attr] - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整
            //3.未到达目标值时，执行代码 
            if (iCurrent != json[attr]) {
                flag = false; //终止条件  
            } 
			if (attr === "opacity") { //为透明度时，执行
                    element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE
                    element.style.opacity = (iCurrent + iSpeed) / 100; //标准
            } else { //默认
                    element.style[attr] = iCurrent + iSpeed + "px";
                }
		}
            //4. 运动终止，是否回调
            if (flag) {
                clearInterval(element.timer);
                if (func) {
                    func();
                }
            }
    }, 30);

window.οnlοad=function(){
	var oBtn=document.getElementById('btn1');
	var oDiv=document.getElementById('div1');
	oBtn.οnclick=function(){
		startMove(oDiv,{width:102,height:200,opacity:100});
	}
}

--------------------------------------------------------------

startMove(element)	运动
startMove(element,iTarget)	匀速–>缓冲–>多物体
startMove(element,attr,iTargrt)	任意值
startMove(element,attr,iTargrt,func)	链式运动
startMove(element,json,func)	多值(同时)–>完美运动框架

七、拓展

1. 弹性运动

速度+=（目标值-oDiv.offsetLeft）/5;

  速度*=0.7;

2. 碰撞运动

function startMove(){
	setInterval(function(){
		var oDiv=document.getElementById('div1');
		var l=oDiv.offsetLeft+iSpeedX;
		var t=oDiv.offsetTop+iSpeedY;
		if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
			iSpeedY*=-1;
			t=document.documentElement.clientHeight-oDiv.offsetHeight
		}else if(t<=0){
			iSpeedY*=-1;
			t=0;
		}
		if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
			iSpeedX*=-1;
			l=document.documentElement.clientWidth-oDiv.offsetWidth
		}else if(l<=0){
			iSpeedX*=-1;
			l=0;
		}
		oDiv.style.left=oDiv.offsetLeft+iSpeedX+'px';
		oDiv.style.top=oDiv.offsetTop+iSpeedY+'px';
		
	},30);
}

3. 碰撞重力拖拽

<script>
window.οnlοad=function(){
	var oDiv=document.getElementById('div1');
	var lastX=0;
	var lastY=0;
	oDiv.οnmοusedοwn=function(ev){
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		document.οnmοusemοve=function(ev){
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			var t=oEvent.clientY-disY;
			oDiv.style.left=l+'px';
			oDiv.style.top=t+'px';
			iSpeedX=l-lastX;
			iSpeedY=t-lastY;
			lastX=l;
			lastY=t;
		};
		document.οnmοuseup=function(){
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
			startMove();
		};
		clearInterval(timer);
	};
};
var timer=null;
var iSpeedX=6;
var iSpeedY=8;
function startMove(){
	clearInterval(timer);
	timer=setInterval(function(){
		var oDiv=document.getElementById('div1');
		iSpeedY+=3;
		var l=oDiv.offsetLeft+iSpeedX;
		var t=oDiv.offsetTop+iSpeedY;
		if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
			iSpeedY*=-0.8;
			iSpeedX*=0.8;
			t=document.documentElement.clientHeight-oDiv.offsetHeight;
		}else if(t<=0){
			iSpeedY*=-1;
			iSpeedX*=0.8;
			t=0;
		}
		if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
			iSpeedX*=-0.8;
			l=document.documentElement.clientWidth-oDiv.offsetWidth;
		}else if(l<=0){
			iSpeedX*=-0.8;
			l=0;
		}
		if(Math.abs(iSpeedX)<1){
			iSpeedX=0;
		}
		if(Math.abs(iSpeedY)<1){
			iSpeedY=0;
		}
		oDiv.style.left=l+'px';
		oDiv.style.top=t+'px';
		
	},30);
}
</script>