자바스크립트 브라우저 애니메이션의 매력적인 세계

애니메이션의 기본

let element = document.getElementById("myElement");
let positionX = 0;

function move() {
  positionX += 1;
  element.style.left = positionX + 'px';
  requestAnimationFrame(move);
}

move();

위의 코드는 요소를 오른쪽으로 이동시키는 매우 간단한 예시입니다. element 변수는 이동할 요소를 지정하는 DOM 요소를 참조합니다. 이제 이 요소의 left 속성을 조정하여 요소를 이동시킵니다. 현재 위치를 저장하는 positionX 변수를 사용하여 요소를 이동시키는 데 사용됩니다. requestAnimationFrame(move)는 브라우저에서 프레임 간의 애니메이션을 처리하도록 요청합니다.

애니메이션 속성 변경

let element = document.getElementById("myElement");

function spin() {
  let rotation = parseInt(element.style.transform.replace("rotate(", ""), 10) || 0;
  rotation += 5;
  element.style.transform = 'rotate(' + rotation + 'deg)';
  requestAnimationFrame(spin);
}

spin();

위의 예시는 요소를 회전시키는 방법을 보여줍니다. 요소의 현재 회전 각도를 추출하기 위해 parseInt와 replace를 사용하여 변환을 수행합니다. 그런 다음, 회전 값을 변경하고 다시 애니메이션을 호출합니다(requestAnimationFrame).

전체 화면 애니메이션

function loop() {
  window.requestAnimationFrame(loop);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.fillStyle = "blue";
  context.rect(x, y, 100, 100);
  context.fill();

  x += velocityX;
  y += velocityY;

  if (x + 100 > canvas.width) {
    x = canvas.width - 100;
    velocityX *= -1;
  } else if (x < 0) {
    x = 0;
    velocityX *= -1;
  }

  // y 축 처리도 위와 같음

}

window.requestAnimationFrame(loop);

위의 예시는 전체 화면 애니메이션을 보여줍니다. 코드는 캔버스 요소에 블루 박스가 왼쪽 상단에서 시작하여 오른쪽 밑으로 움직이도록 지정합니다. requestAnimationFrame(loop) 함수는 브라우저에서 다음 애니메이션 프레임을 그리기 전에 항상 호출됩니다. 애니메이션을 지원하지 않는 브라우저의 경우 대체 솔루션이 없습니다.

자바스크립트 브라우저 애니메이션은 강력하고 재미있으며 사용 가능한 모든 도구가 있습니다. 브라우저를 스케치 패드로 바꾸고 사용자가 상호작용할 수 있는 동적한 경험을 제공하고, 새로운 프레임 좌표를 지속적으로 계산하는 것으로 사용자 환경을 개선합니다.