JS之运动框架

朴灿烈づ我的快乐病毒、 2022-08-22 00:02 169阅读 0赞

## 一、匀速运动框架 ##

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

2. 匀速运动框架startMove

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);
    	}
    }

![Center][]

## 二、缓冲运动 ##

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

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

![Center 1][]

## 三、多物体运动 ##

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

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()

## 五、链式运动 ##

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

##    六、完美框架 ##

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});
    	}
    }

\--------------------------------------------------------------

<table style="border-style:solid; border-color:rgb(221,221,221); border-collapse:collapse; border-spacing:0px; margin:20px 0px; width:619px; font-size:14px; table-layout:fixed; word-wrap:break-word; color:rgb(85,85,85); font-family:Lato,'PingFang SC','Microsoft YaHei',sans-serif; line-height:28px; text-align:justify"> 
 <tbody> 
  <tr style="background-color:rgb(249,249,249)"> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> startMove(element)</td> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> 运动</td> 
  </tr> 
  <tr> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> startMove(element,iTarget)</td> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> 匀速–&gt;缓冲–&gt;多物体</td> 
  </tr> 
  <tr style="background-color:rgb(249,249,249)"> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> startMove(element,attr,iTargrt)</td> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> 任意值</td> 
  </tr> 
  <tr> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> startMove(element,attr,iTargrt,func)</td> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> 链式运动</td> 
  </tr> 
  <tr style="background-color:rgb(249,249,249)"> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> startMove(element,json,func)</td> 
   <td style="border-right-style:solid; border-bottom-style:solid; border-right-color:rgb(238,238,238); border-bottom-color:rgb(221,221,221); padding:8px; text-align:left; vertical-align:middle"> 多值(同时)–&gt;完美运动框架</td> 
  </tr> 
 </tbody> 
</table>

七、拓展

1.弹性运动

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

速度\*=0.7;

2.碰撞运动

3. 碰撞重力拖拽

[Center]: /images/20220724/f070d5202f4249f89adf3f5ceff13451.png
[Center 1]: /images/20220724/18a67dbe82764c9da8bf97a39ec0ecf4.png