물결 이동 애니메이션

IT 2024. 1. 28. 00:21

 

 

js에서 requestAnimationFrame함수를 활용하여 물결처럼 나아가는 움직임을 구현해보았다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: black;
      }

      .ball {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 시간에 따라 공이 움직이는 효과 -->
    <div id="container">
      <div class="ball"></div>
    </div>

    <script type="module">
      let rafId;

      const ball = document.querySelector(".ball");

      let xPos = 0;
      let yPos = 250;

      const xSpeed = 1;

      const writeInnerHtml = (targetID, content) => {
        document.getElementById(targetID).innerHTML = content;
      };

      const draw = (timestamp) => {
        if (xPos >= 450) {
          cancelAnimationFrame(rafId);
          return;
        }

        xPos += xSpeed;

        yPos = 250; // 중심축

        // x훅 이동 방향에 대한 물결파 높이 계산
        // 진폭, 주기롤 조절함
        const amp = 123;
        const per = 1200;
        yPos += amp * Math.sin(per * xPos);

        ball.style.left = xPos + "px";
        ball.style.top = yPos + "px";

        rafId = requestAnimationFrame(draw);
      };

      draw();
    </script>
  </body>
</html>

 

 

공의 움직임을 구현하기 위해, sin 함수를 사용하여 y축에 대한 공의 높이를 계산했으며, 진폭으로는 공이 진동하는 높이를, 주기로는 공이 움직이는 속도를 구현할 수 있었다.

그리고 자연스러운 움직임을 위해 requestAnimationFrame을 사용하여, 매 프레임마다 공의 위치를 계산하도록 했고, x축으로 450px이상 가면 애니메이션이 멈추도록 했다.

 

'IT' 카테고리의 다른 글

자연어 처리의 기술  (0) 2025.03.14
정책  (0) 2024.07.20
장애인 차별 금지법에 따른 웹 접근성  (0) 2024.02.07
참고 블로그 사이트 정리  (0) 2024.01.15
서브 도메인 자동 생성 기능  (0) 2023.07.09