Maison > Article > interface Web > Comment implémenter le mouvement parabolique via JS (tutoriel détaillé)

Comment implémenter le mouvement parabolique via JS (tutoriel détaillé)

亚连original: 2018-06-08 17:47:502721parcourir

Cet article présente principalement l'effet du mouvement parabolique réalisé par JS, et analyse les opérations associées du mouvement parabolique javascript et les techniques de mise en œuvre du fonctionnement dynamique des éléments sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

<.>Les exemples de cet article décrivent l'effet de mouvement parabolique réalisé par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant suit :

<!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>

Idée de mise en œuvre :

La longueur du côté dans la direction X augmente de 5 à chaque fois, et l'angle diminue de 1 à chaque fois . Sur la base de ces deux conditions connues, il peut être calculé à l'aide de fonctions trigonométriques. Quelle est la longueur dans la direction Y

Afin d'obtenir les valeurs de coordonnées des directions X et Y de chaque mouvement ? pour obtenir l'effet d'une parabole

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus