本文實例講述了JS小球拋物線軌跡運動的兩種實現(xiàn)方法。分享給大家供大家參考，具體如下：
js實現(xiàn)小球拋物軌跡運動的大致思路：
1、用setInterval()方法，進行間隔性刷新，更新小球位置，以實現(xiàn)動態(tài)效果
2、繪制小球和運動區(qū)域，運動區(qū)域可通過flex布局實現(xiàn)垂直居中
3、用物理公式S(y)=1/2*g*t*t，S(x)=V(x)t來計算路徑
現(xiàn)確定V(x)=4m/s,刷新的時間間隔設置為0.1s。原本px和米之間的轉換，不同尺寸轉換不同，本例采用17寸顯示器，大約1px=0.4mm。但瀏覽器太小，因此只能模擬拋物線軌跡，本例將px和米之間縮成100倍。
第一種：通過border-radius繪制小球
思路：用border-radius: 50%繪制小球，給小球設置relative，每次計算小球當前位置，賦給top和left。計算運動軌跡時，可用變量自增計算setInterval調(diào)用次數(shù)，每次是0.1s，這樣可計算總時間。代碼如下：
<!DOCTYPE><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*給body進行flex布局，實現(xiàn)垂直居中*/ body { min-height: 100vh;/*高度適應瀏覽器高度*/ display: flex; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/ font-size: 20px; font-weight: bold; } /*設置運動區(qū)域*/ #bg { width: 600px; height: 600px; border: 2px solid #e0e0e0; border-radius: 4px;/*給div設置圓角*/ padding: 20px; } /*生成小球，并定義初始位置*/ #ball { border-radius: 50%;/*可把正方形變成圓形，50%即可*/ background: #e0e0e0; width: 60px; height: 60px; position: relative; top: 30px; left: 30px; } button { width: 80px; height: 30px; border-radius: 4px; color: #fff; background: #AA7ECC; font-size: 20px; font-weight: bold; margin-left: 20px; } </style></head><body><div id="bg"> 此時水平速度為：4<button onclick="start()">演示</button> <div id="ball"></div></div><script type="text/javascript">function start(){ var x,y,k=1,t; //x是水平方向移動路徑；y是垂直方向的；k記錄次數(shù)，可與0.1相乘得時間；t記錄setInterval的返回id，用于clearInterval t = setInterval(function(){ x = 30+0.1*k*4*100; //S(x)=S(0)+t*V(x)，100是自定義的米到px轉換數(shù) y = 30+1/2*9.8*0.1*k*0.1*k*100;//S(y)=S(0)+1/2*g*t*t var j = document.getElementById("ball"); //通過修改小球的top和left，修改小球的位置 j.style.top = y; j.style.left = x; k++;//每次調(diào)用，k自增，簡化計算 if(x>480||y>480){ clearInterval(t);//小球達到邊界時，清除setInterval } },100);//每0.1s調(diào)用一次setInterval的function}</script></body></html>
新聞熱點
疑難解答
圖片精選
