[本]278-20日目JavaScriptコードフォーミュラ


三角関数を用いた実験
  • ウォンのアニメーション
  • を作成
    実習
    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);
        }
      }