자바스크립트 애니메이션과 터치 이벤트 처리하기

18 Oct 2023

javascript

애니메이션 처리하기

웹 페이지에서 요소들을 다이나믹하게 움직이거나 변화를 주는 것은 사용자 경험을 향상시키는데 도움이 됩니다. 자바스크립트를 사용하여 애니메이션을 처리할 수 있습니다.

requestAnimationFrame 사용하기

requestAnimationFrame은 브라우저가 다음 화면을 그리기 전에 애니메이션을 업데이트할 수 있도록 예약하는 메서드입니다. 이를 사용하여 부드러운 애니메이션을 구현할 수 있습니다.

function animateElement(element, targetX, targetY, duration) {
  const startTime = performance.now();
  const startX = element.offsetLeft;
  const startY = element.offsetTop;
  
  function updateAnimation(currentTime) {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1); // 진행률 계산
    
    const newX = startX + (targetX - startX) * progress;
    const newY = startY + (targetY - startY) * progress;
    
    element.style.left = newX + 'px';
    element.style.top = newY + 'px';
    
    if (progress < 1) {
      requestAnimationFrame(updateAnimation);
    }
  }
  
  requestAnimationFrame(updateAnimation);
}

위의 코드에서 animateElement 함수는 요소가 특정 위치로 이동하는 애니메이션을 처리합니다. 시작점, 목표점, 지속 시간을 인자로 받아서 requestAnimationFrame을 이용해 애니메이션을 업데이트합니다.

CSS 애니메이션 사용하기

CSS 애니메이션을 사용하면 브라우저의 GPU 가속을 활용하여 애니메이션을 처리할 수 있습니다. @keyframes 규칙을 작성하고 animation 속성을 사용하여 애니메이션을 요소에 적용할 수 있습니다.

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 1s;
}

위의 CSS 코드에서 @keyframes 규칙을 사용하여 slide-in 애니메이션을 정의하고, .element 클래스에 animation 속성을 사용하여 애니메이션을 적용합니다. 이렇게 함으로써 요소가 왼쪽에서 오른쪽으로 이동하는 슬라이드 인 애니메이션이 작동합니다.

터치 이벤트 처리하기

모바일 기기에서는 터치 이벤트를 처리하여 사용자의 상호작용을 감지할 수 있습니다.

터치 시작 이벤트 처리하기

element.addEventListener('touchstart', function(event) {
  const touchEvent = event.touches[0];
  const touchX = touchEvent.clientX;
  const touchY = touchEvent.clientY;
  
  // 이벤트 처리 코드 작성
});

위의 코드는 터치 시작 이벤트(touchstart)를 처리하는 코드입니다. event.touches 배열에서 첫 번째 터치 이벤트를 가져와서 clientX와 clientY 속성을 사용하여 터치한 위치를 가져올 수 있습니다.

터치 이동 이벤트 처리하기

element.addEventListener('touchmove', function(event) {
  const touchEvent = event.touches[0];
  const touchX = touchEvent.clientX;
  const touchY = touchEvent.clientY;
  
  // 이벤트 처리 코드 작성
});

위의 코드는 터치 이동 이벤트(touchmove)를 처리하는 코드입니다. 마찬가지로 터치한 위치를 가져와서 이벤트 처리 코드를 작성할 수 있습니다.

터치 종료 이벤트 처리하기

element.addEventListener('touchend', function(event) {
  // 이벤트 처리 코드 작성
});

위의 코드는 터치 종료 이벤트(touchend)를 처리하는 코드입니다. 이벤트 처리 코드를 작성하여 터치 종료 시 동작을 구현할 수 있습니다.

결론

자바스크립트를 사용하여 애니메이션을 처리하고 터치 이벤트를 처리하는 방법을 알아보았습니다. 애니메이션을 통해 웹 페이지를 더 생동감 있게 만들고, 터치 이벤트를 통해 모바일 기기에서의 상호작용을 감지할 수 있습니다. 이를 이용하여 사용자 경험을 향상시킬 수 있습니다.

#javascript #animation #touch-event

목차