So implementieren Sie eine parabolische Bewegung über JS (ausführliches Tutorial)-js-Tutorial-php.cn

So implementieren Sie eine parabolische Bewegung über JS (ausführliches Tutorial)

亚连

Freigeben： 2018-06-08 17:47:50

Original

2759 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der von JS realisierte Effekt der parabolischen Bewegung vorgestellt und die zugehörigen Operationen der parabolischen Bewegung von Javascript sowie die Implementierungstechniken der elementdynamischen Operation anhand von Beispielen analysiert

Die Beispiele in diesem Artikel beschreiben den von JS realisierten parabolischen Bewegungseffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schauen wir uns zunächst den Laufeffekt an:

Der spezifische Code lautet wie folgt folgt:

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

Nach dem Login kopieren

Implementierungsidee:

Die Seitenlänge in X-Richtung erhöht sich jedes Mal um 5 und der Winkel verringert sich jedes Mal um 1 Unter diesen beiden bekannten Bedingungen kann die Y-Richtung durch trigonometrische Funktionen berechnet werden. Wie groß ist die Länge?

Um die Koordinatenwerte der X- und Y-Richtungen jeder Bewegung zu erhalten und den Effekt zu erzielen einer Parabel

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie das Iconfont-Schriftsymbol im Webpack

So implementieren Sie einen kreisförmigen Fortschrittsbalken im WeChat-Applet

Implementieren Sie den dynamischen Import von Dateien im Webpack

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine parabolische Bewegung über JS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!