ホームページ > 記事 > ウェブフロントエンド > JS を介して放物線運動を実装する方法 (詳細なチュートリアル)
JS を介して放物線運動を実装する方法 (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-08 17:47:502678ブラウズ
この記事では、主に 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ずつ減少するこの2つの既知の条件に従って、Y方向の長さが三角関数
によって計算され、座標値が得られます。各動きの X 方向と Y 方向を調整し、放物線の効果を実現します
以上、皆さんの参考になれば幸いです。
関連記事:
webpackでiconfontフォントアイコンを使用する方法WeChatアプレットに円形のプログレスバーを実装する方法webpackにファイルを動的にインポートする実装以上がJS を介して放物線運動を実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。