JavaScript에서 탄력적인 효과를 얻는 방법-JS 튜토리얼-php.cn

JavaScript에서 탄력적인 효과를 얻는 방법

亚连

풀어 주다： 2018-06-19 16:06:20

원래의

1736명이 탐색했습니다.

본 글은 중력낙하와 탄성효과를 자바스크립트로 구현하는 방법을 주로 소개하며, 중력낙하와 탄성효과의 원리와 구체적인 구현 기법을 자바스크립트로 분석해 도움이 필요한 친구들이 참고할 수 있습니다

예시 이 기사에서는 JavaScript의 중력 구현 방법에 대해 설명합니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

여기에서는 아래와 같이 JS 언어를 사용하여 HTML 페이지에서 중력의 영향을 받은 후 튀어오르는 효과를 얻습니다.

In 이 예에서는 주로 다음과 같은 문제가 관련됩니다.

1. 구체에 초기 방출 속도를 지정합니다. 가장자리에 닿기 전에 아래쪽으로 이동할 때 속도 Y를 높이는 효과를 얻는 방법은 무엇입니까? 답변: 이는 타이머에서 매번 고정된 값만큼 수직 속도 speedY를 증가시켜 달성할 수 있습니다. 다음 코드에서는 speedY += 6;

2. 구체가 지면(이 경우 브라우저의 아래쪽 가장자리)에 닿은 후 속도 반전 효과를 얻는 방법은 무엇입니까? 답변: 지면에 닿은 후 방향 속도를 현재 속도의 반대 방향으로 설정하면 됩니다. if (iW >= w||iW <= 0){speedX = -speedX;}if 이동이 Range를 초과하면 수평 방향의 가장자리에 접촉한 후 이동 방향이 반전됨을 의미합니다. if (iH >= h||iH

3. 구체가 땅에 닿아 튕긴 후 다시 떠오르는 높이가 이전 높이보다 낮아지는 효과를 얻으려면 어떻게 해야 하나요? 답변: 지면에 닿은 후 속도가 음수가 되고 타이머가 다음 간격을 실행하기 시작하며 speedY += 6이 즉시 실행되고 바운스 속도가 즉시 6만큼 감소하며 크기는 닿기 전의 순간보다 작아집니다. 지면에 있으므로 구가 원래 높이로 다시 튕겨나가지 않습니다.

4. 구의 수직 방향 속도의 절대값이 0에 가까워질 때까지 점점 작아지는 효과를 얻으려면 어떻게 해야 할까요? 답변: 실제로 이 예에서는 speedY += 6만 사용합니다. 수직 방향의 속도 speedY는 0에 도달할 수 없습니다. 왜냐하면 이 함수에 초기 속도가 설정되어 있다는 전제하에 특정 시간의 착륙 속도는 0에 도달할 수 없기 때문입니다. 6(Later를 통해 각 실행 후 인쇄 속도를 결정할 수 있음)이므로 다음 실행은 0이 될 수 없습니다. 그러면 땅에 정지하여 떨어지는 효과는 정확히 어떻게 달성됩니까? 실제로 speedY 증가 값을 6으로 설정하면 공이 특정 순간에 착지할 때의 속도는 1, 2, 3, 4, 5 중 하나가 됩니다. 6을 더하면 순간 리바운드 속도는 -5가 됩니다. , -4, -3, -2, -1. 타이머 기간(이 예에서는 30밀리초) 후에 속도는 6을 추가한 직후에 1, 2, 3, 4, 5가 되고, 다음 번에는 속도가 1, 2, 3, 4, 5가 됩니다. -5, -4, -3, -2, -1...이 됩니다. speedY += 6이 타이머의 선두에 있으므로 최종 결과는 항상 -5에 고정됩니다. - 6을 추가하기 전에 4, -3, -2, -1.이며 타이머는 항상 동적이며 최종 구체가 하단에 표시됩니다.

5. 구체를 놓으면 측면 속도도 발생합니다X. 측면 속도를 점차 0으로 낮추는 방법은 무엇인가요? 답변: 이 예에서는 x 방향의 충돌을 고려할 필요가 없으므로 speedX에 매번 1보다 작은 숫자를 곱할 수 있으며 최종 speedX 값은 무한히 0에 접근하여 정지 상태임을 나타냅니다. .
창을 드래그할 때 스크롤 막대가 나타나지 않도록 하려면 어떻게 해야 하나요?
답변: 브라우저 창을 드래그한 후 구의 새로운 동작 범위를 설정하세요.

구현 코드와 분석은 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>弹性运动</title>
    <style type="text/css">
      #p {
        width: 100px;
        height: 100px;
        background: green;
        position: absolute;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //window.onload表示等页面标签内容加载完之后再加载window.onload里面的内容
      window.onload = function(){
        //分别设置p在x和y方向的的初速度
        var speedX = 2;
        var speedY = 3;
        //获取p标签
        var p = document.getElementById("p");
        //获取按钮
        var btn = document.getElementById("btn");
        //定义点击事件
        btn.onclick = function(){
          startMove();
        };
        //定义一个空的定时器，防止上次事件定时器的返回值叠加
        var timer = null;
        //定义点击事件函数
        function startMove(){
          //内部清空计时器，防止上次返回值叠加
          clearInterval(timer);
          //设置计时器
          timer = setInterval(function(){
            //竖直方向上反向运动时速度为负值，为了达到反弹逐渐速度逐渐减小的效果，可以在向下碰撞后速度加上一个正值
            speedY += 6;
            //分别获取p距离左边距和上边距的动态距离
            var iW = p.offsetLeft + speedX;
            var iH = p.offsetTop + speedY;
            //获取p水平方向运动的最大距离，即不包含边框的浏览器窗口的宽度clientWidth减去p的宽度
            var w = document.documentElement.clientWidth - p.offsetWidth;
            //获取p垂直方向运动的最大距离
            var h = document.documentElement.clientHeight - p.offsetHeight;
            //当动态宽度达到p最大运动宽度范围时，立刻转换速度为反方向负值，同时把w的值负值给iw，因为w是可视窗口范围，当w缩小时，iw保存的还是上一次窗口条件下的距离左边距的距离
            if (iW >= w||iW <= 0){speedX = -speedX;iW = w;}
            //当动态高度达到p最大运动高度范围时，立刻转向速度，同时将x方向速度乘以0.8，使之速度逐渐减小
if (iH >= h||iH <= 0){speedY = -speedY;iH = h;speedX *= 0.95;}
            //由于p.style.left和p.style.top还储存这上一次或第一次的计时后的值，此次计时后应把新的值储存起来，使p出现动态效果
            p.style.left = iW + "px";
            p.style.top = iH + "px";
            console.log(speedX);
          },30);
        }
      }
    </script>
    <input type="button" name="btn" id="btn" value="开始运动" />
    <p id="p"></p>
  </body>
</html>

로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.