Comment faire bouger des éléments le long d'une trajectoire parabolique en JS-js tutoriel-php.cn

Comment faire bouger des éléments le long d'une trajectoire parabolique en JS

php中世界最好的语言

Libérer： 2018-04-14 11:19:32

original

2765 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JS pour faire bouger des éléments le long d'une trajectoire parabolique. Quelles sont les précautions pour utiliser JS pour faire bouger des éléments le long d'une trajectoire parabolique. un cas pratique. Jetons un coup d'oeil une fois.

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

1. Utilisez la méthode setInterval() pour effectuer un rafraîchissement par intervalles et mettre à jour la position du ballon pour obtenir des effets dynamiques
2. Dessinez le ballon et la zone de sport La zone de sport peut être centrée verticalement grâce à une 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 maintenant. V (x)=4m/s, l'intervalle de temps de rafraîchissement est fixé à 0,1s. À 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.

Le premier type : tirer la balle à travers le rayon de bordure

Idée : utilisez border-radius: 50% pour dessiner la balle, définissez-la par rapport à la balle, calculez la position actuelle de la balle à chaque fois 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 des balles et des zones 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 mises en œuvre. La méthode de calcul est la même, mais la méthode est différente. 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é.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la bibliothèque de composants mobiles cube-ui

Classe JS, constructeur, fonction d'usine Comment utiliser

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!