[책] 자바스크립트 코드 레시피 278 - 20일차

삼각 함수로 실습하기

• 원을 그리는 애니메이션을 만들기

실습

index.html

  <div class="container-character">
    <div class="character"></div>
  </div>

style.css

  .container-character {
    width: 500px;
    height: 500px;
    display: inline-block;
    border: 1px solid #000;
    position: relative;
  }

  .character {
    background-image: url('../../image/character.png');
    background-size: 100px 100px;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }

script.js

  window.onload = function () {
    const character = document.querySelector('.character');

    // 각도
    let degree = 0;

    loop();

    function loop() {
      const rotation = (degree * Math.PI) / 180; // 결과 0
      const targetX = window.pageXOffset / 2 + 150 * Math.cos(rotation) + 200;
      const targetY = window.pageYOffset / 2 + 150 * Math.sin(rotation) + 200;

      character.style.left = `${targetX}px`;
      character.style.top = `${targetY}px`;
      degree = degree + 1;

      requestAnimationFrame(loop);
    }
  }