小球運動-常規1

sXin發表於2019-03-31

模運動規律對運動進行拆解，實現物體的直線、變速、圓周、橢圓、平拋、自由落體、落地彈起等常規運動。

注意點

  • 運動模擬物理運動規律
  • 使用javascript方式操作Dom方式實現運動，與canvas原理相同
  • 實時修改dom的tansform值實現運動
  • 採用定時器setInterval方式，模擬時間的增長
  • Vo為初速度，Vx水平速度，Vy垂直速度，S為物體位移，g為重力加速度，a為加速度，t為時間,timer為儲存定時器的變數
  • createDom方法為通過實時更新的點座標x,y繪製小球的運動軌跡

HTML

    <div id="container" class="container">
        <div id="ball"></div>
    </div>
    <script src="index.js"></script>
複製程式碼

css

    * {
	    margin: 0;
	    padding: 0;
    }
    #ball {
    	width: 10px;
    	height: 10px;
    	background-color: red;
    	border-radius: 50%;
    	/*margin: 200px auto;*/
    	display: inline-block;
    	position: absolute;
    	top: 0;
    }
    .container {
    	text-align: center;
    	height: 300px;
    	border: 1px solid #000;
    	position: relative;
    	width: 80%;
    	margin: auto;
    	margin-top: 100px;
    }
    .points {
    	width: 5px;
    	height: 5px;
    	border-radius: 50%;
    	background-color: blue;
    	display: inline-block;
    	position: absolute;
    	top: 0;
    }
複製程式碼

運動軌跡繪製

function createDom(x,y){
    var span = document.createElement("span");
    span.className = 'points';
    span.style.transform = 'translate('+ x+'px,'+y+'px)';
    container.appendChild(span);
}
複製程式碼

勻速直線運動

  • 根據公式 s=Vo*t;
  • 勻速直線運動為一種線性運動，Vo為初速度是一個常量，只需要定時的增加t即可
  • 運動距離s>300運動結束，清除定時器clearInterval(timer)
    var Vo = 10,
        t = 0,
        s = 0,
        timer = null;
    uniformSpeed();
    function uniformSpeed(){
        timer = setInterval(function(){
        	t+=0.1;
        	s = Vo*t;
        	ball.style.transform = 'translate('+ s+'px,0px)';
        	createDom(s,0);
        	if(s>300){
        		clearInterval(timer);
        	}
        })
    }
複製程式碼

勻變速玉棟

  • 根據公式 s=Vot + (at)t
  • 公式分解為初速度為Vo的勻速運動和一個初速度為0的勻變速運動
  • a，Vo為常量，s為只與t有關的2次函式
  • 運動距離s>300運動結束，清除定時器clearInterval(timer)
  • 原理與勻速運動類似
    var Vo = 10,
    	a = 1,
    	t = 0,
    	s = 0,
    	timer = null;
    uniformAcceleration();
    function uniformAcceleration(){
    	timer = setInterval(function(){
    		t+=0.05;
    		s = Vo*t + (a*t)*t;
    		ball.style.transform = 'translate('+ s+'px,0px)';
    		createDom(s,0);
    		if(s>300){
    			clearInterval(timer);
    		}
    	})
    }
複製程式碼

變速曲線運動

與勻速運動方法相似，只需要將運動分解為水平和豎直兩個方向分別結算Sx和Sy即可

圓周運動

  • 根據公式 x²+y²=r²
  • 假定座標原點為0點
  • 分解為x，y兩個方向，其中某一點x,y分成水平方向為sin&和cos&
  • 運動距離 angle>2PI 運動結束，清除定時器clearInterval(timer)*
  • 初始位置不為原點的給x，y加上一個偏移量即可，在此不做展開
    var angle = 0,
        r = 100,
        timer = null,
        x,y;
    circleSport();
    function circleSport(){
    	timer = setInterval(function(){
    		angle+=0.01;
    		x = r*Math.sin(angle);
    		y = r*Math.cos(angle);
    		ball.style.transform = 'translate('+x+'px,'+y+'px)';
    		createDom(x,y)
    		if(angle > Math.PI*2) clearInterval(timer);
    	});
    }
複製程式碼

橢圓運動

  • 根據公式 x²/a²+y²/b²=r²
  • 假定座標原點為0點
  • 分解為x，y兩個方向，為半徑為a和半徑為b的圓上的座標，a=b為圓，其他為橢圓
  • 運動距離 angle>2PI 運動結束，清除定時器clearInterval(timer)*
  • 初始位置不為原點的給x，y加上一個偏移量即可，在此不做展開
   var  deg = 0,
        Rx = 50,
        Ry = 100,
        x,y,
        timer = null;
    ellipse();
    function ellipse(){
    	timer = setInterval(function(){
    		deg+=0.01;
    		x = Rx*Math.sin(deg);
    		y = Ry*Math.cos(deg);
    		if(deg>Math.PI*2) return;
    		ball.style.transform = 'translate('+ x+'px,'+y+'px)';
    		createDom(x,y);
    	})
    }
複製程式碼

總結

以上實現均為根據運動學規律對運動拆解，分解成x，y兩個方向進行處理；較複雜的運動拆分成多個簡單的運動，對結果進行組合；t為運動唯一外部變數，所有可變變數都與t有關，注意t的使用；本文程式碼都進行過測試；下一遍會介紹平拋、自由落體、正弦、貝塞爾運動的實現。

相關文章