透過JS如何實現拋物線運動（詳細教學）
- 亚连原創
- 2018-06-08 17:47:502720瀏覽
這篇文章主要介紹了JS實現的拋物線運動效果,結合實例形式分析了javascript拋物線運動的相關運算與元素動態操作實現技巧,需要的朋友可以參考下
本文實例講述了JS實現的拋物線運動效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體程式碼如下：
<!doctype html >
<html>
<head>
<meta charset="utf-8"/>
<title>抛物线运动</title>
<style>
.pwx_rect{position:absolute;left:10px;top:300px;background-color:#888;height:50px;width:50px;}
.pwx_hr{border-top:2px solid #ddd;position:absolute;width:98%;left:0px;top:350px;}
</style>
<script>
test = function(){
var rect = document.getElementById("rect");
pwx(rect,60,5); //参数2：抛物线角度，参数3：横向速度每次增加5
}
function pwx(rect,radian,step){
var animate = function(opt){
var cos = Math.cos(opt.radian*Math.PI/180);//邻边比斜边,60度的话等于1/2
var sin = Math.sin(opt.radian*Math.PI/180);//对边比斜边,30度的话等于1/2
var left = opt.rect.offsetLeft;
var top = opt.rect.offsetTop;
if(opt.radian>0){
left+=opt.step;
opt.radian-=1; //角度递减1
var a = left - opt.initLeft;
var c = (a/cos);
var b = (sin*c);
opt.rect.style.left = opt.initLeft+a+"px";
opt.rect.style.top = opt.initTop-b+"px";
setTimeout(function(){
animate(opt);
},10);
}else{
opt.rect.style.left = left+opt.step+"px";
opt.rect.style.top = opt.initTop+"px";
}
}
animate({
step : step,
rect : rect,
radian : radian,
initTop : rect.offsetTop,
initLeft : rect.offsetLeft
});
}
</script>
</head>
<body>
www.jb51.net
<input type="button" value="抛物线" onclick="test()"/>
<p class="pwx_rect" id="rect"></p>
<p class="pwx_hr"></p>
</body>
</html>實現想法：
X方向的邊長每次遞增5，角度每次遞減1，根據這兩個已知條件，透過三角函數就可以計算出Y方向的長度是多少
從而得出每次運動的X和Y方向的座標值，達到拋物線的效果
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#以上是透過JS如何實現拋物線運動（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn