Home > Article > Web Front-end > How to implement parabolic motion through JS (detailed tutorial)

How to implement parabolic motion through JS (detailed tutorial)

亚连Original: 2018-06-08 17:47:502736browse

This article mainly introduces the parabolic motion effect realized by JS, and analyzes the related operations of javascript parabolic motion and the implementation techniques of element dynamic operation in the form of examples. Friends in need can refer to the following

The examples in this article describe Parabolic motion effect realized by JS. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the running effect first:

The specific code is as follows:

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

Implementation Idea:

The side length in the X direction increases by 5 each time, and the angle decreases by 1 each time. Based on these two known conditions, the Y direction can be calculated through trigonometric functions. What is the length of

so as to obtain the coordinate values of the X and Y directions of each movement to achieve the effect of a parabola

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

How to use iconfont font icon in webpack

How to implement a circular progress bar in WeChat applet

Implement dynamic introduction of files in webpack

The above is the detailed content of How to implement parabolic motion through JS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Encapsulate Vue2 routing navigation hook and use it in actual combatNext article：Encapsulate Vue2 routing navigation hook and use it in actual combat

See more

How to implement parabolic motion through JS (detailed tutorial)

Related articles