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.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=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.onload=function(){
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++){
aDiv[i].alpha=30;
aDiv[i].onmouseover=function(){
startMove(this,100);
}
aDiv[i].onmouseout=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.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=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.onload=function(){
var oDiv=document.getElementById('div1');
var lastX=0;
var lastY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=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.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=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>