Deux méthodes JS pour réaliser un mouvement de trajectoire parabolique de petites balles-js tutoriel-php.cn

Deux méthodes JS pour réaliser un mouvement de trajectoire parabolique de petites balles

小云云

Libérer： 2017-12-21 14:27:37

original

2826 Les gens l'ont consulté

Cet article présente principalement deux méthodes pour réaliser le mouvement de trajectoire parabolique d'une balle JS. Il analyse les compétences pertinentes en matière de calcul et de dessin graphique de JavaScript pour réaliser la trajectoire parabolique d'une petite balle sous forme d'exemples. il peut s'y référer. J'espère que cela pourra aider tout le monde.

L'idée générale deimplémenter le mouvement de trajectoire parabolique de la balle en js :

1 Utilisez la méthode setInterval() pour effectuer un rafraîchissement par intervalles et mettre à jour la position de la balle. pour obtenir des effets dynamiques
2. Dessinez la balle et la zone mobile. La zone mobile peut être centrée verticalement grâce à la disposition flexible
3. Utilisez la formule physique S(y)=1/2*g*. t*t, S( x)=V(x)t pour calculer le chemin
Déterminez maintenantV(x)=4m/s, et le rafraîchissement l'intervalle de temps est réglé sur 0,1 s. À l'origine, la conversion entre px et mètres est différente selon les tailles. Dans cet exemple, un moniteur de 17 pouces est utilisé, soit environ 1 px = 0,4 mm. Cependant, le navigateur est trop petit et ne peut donc simuler qu'une trajectoire parabolique. Dans cet exemple, la distance entre les px et les mètres est réduite à 100 fois.

Première méthode : dessiner la balle à travers le rayon de bordure

Idée : utiliser border-radius: 50% pour dessiner la balle et la définir par rapport à la balle , calculez à chaque fois la position actuelle de la balle et attribuez-la en haut et à gauche. Lors du calcul de la trajectoire de mouvement, la variable peut être incrémentée pour calculer le nombre d'appels setInterval, chaque fois étant de 0,1 s, afin que le temps total puisse être calculé. Le code est le suivant :

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  /*给body进行flex布局，实现垂直居中*/
  body {
  min-height: 100vh;/*高度适应浏览器高度*/
  display: flex;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
    font-size: 20px;
    font-weight: bold;
  }
  /*设置运动区域*/
  #bg {
    width: 600px;
    height: 600px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;/*给p设置圆角*/
    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>
<p id="bg">
  此时水平速度为：4<button onclick="start()">演示</button>
  <p id="ball"></p>
</p>
<script type="text/javascript">
function start(){
  var x,y,k=1,t;
  //x是水平方向移动路径；y是垂直方向的；k记录次数，可与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转换数
    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++;//每次调用，k自增，简化计算
  if(x>480||y>480){
  clearInterval(t);//小球达到边界时，清除setInterval
  }
  },100);//每0.1s调用一次setInterval的function
}
</script>
</body>
</html>

Copier après la connexion

Deuxième type : le canevas en h5 dessine la balle et la zone de mouvement

Idée : utilisez Canvas pour dessiner la balle. Puisque la balle ne peut pas se déplacer en haut et à gauche, elle doit effacer la toile avec clearRect à chaque fois qu'elle est appelée, puis dessiner la balle avec la position calculée. Le code est le suivant :

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #myCanvas {
  box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
  }
  </style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="600px"></canvas>
<script type="text/javascript">
var x=50,y=50,k=1;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#e0e0e0";
cxt.beginPath();
cxt.arc(x,y,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
t=setInterval("parabola()",100);
function parabola(){
  cxt.clearRect(0,0,600,600);//清除原始图形
  cxt.beginPath();
  x=50+0.1*k*4*100;y=50+9.8*0.1*k*0.1*k*1/2*100;
  cxt.arc(x,y,30,0,Math.PI*2,true);
  cxt.closePath();
  cxt.fill();
  k++;
  if(x>520||y>520){
  clearInterval(t);
  }
}
</script>
</body>
</html>

Copier après la connexion

Les deux méthodes peuvent être implémentées. Les méthodes de calcul sont les mêmes, mais les méthodes sont différentes. Le premier est partisan du CSS, utilisant border-radius et modifiant dynamiquement le DOM. Le second utilise un canevas pour dessiner des graphiques. Le processus de dessin doit être soigneusement étudié.

Recommandations associées :

Cas de code pour le mouvement parabolique de l'animation d'énergie potentielle élastique en JavaScript

JS implémente l'effet spécial de la parabole du produit ajouté au panier javascript Tips_

Ajouter au panier un effet d'animation parabolique basé sur le plug-in jquery fly_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!