JS를 통해 포물선 모션을 구현하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

JS를 통해 포물선 모션을 구현하는 방법(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-08 17:47:50

원래의

2760명이 탐색했습니다.

이 글은 주로 JS가 구현하는 포물선 운동 효과를 소개하고, 자바스크립트 포물선 운동의 관련 연산과 요소 동적 연산의 구현 기술을 예제 형식으로 분석합니다. 도움이 필요한 친구들은 참고할 수 있습니다

이 글의 예제 JS가 구현하는 포물선 운동 효과를 설명합니다. 참고용으로 모두와 공유하세요. 세부 사항은 다음과 같습니다.

실행 효과를 먼저 살펴보겠습니다.

구체 코드는 다음과 같습니다.

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

로그인 후 복사

구현 아이디어: