回転アニメーション requestAnimationFrame()

const chara = document.querySelector('.character');

let degree = 0;
let requestID;
let countFrame = 0;

loop();

function loop() {
  const rotation = (degree * Math.PI) / 180;
  const targetX = window.innerWidth / 2 + 100 * Math.cos(rotation) - 50;
  const targetY = window.innerHeight / 2 + 100 * Math.sin(rotation) - 50;

  chara.style.left = `${targetX}px`;
  chara.style.top = `${targetY}px`;

  degree += 1;
  requestID = requestAnimationFrame(loop);
  countFrame++;
  console.log(countFrame);

  if (countFrame > 200) {
    // キャンセル処理
    cancelAnimationFrame(requestID);
  }
}