Ternary 연산자로 자바스크립트에서의 커스텀 애니메이션 효과 구현

08 Nov 2023

javascript

애니메이션은 사용자 경험을 향상시키는 데 도움이되는 효과적인 기술입니다. 자바스크립트를 사용하여 웹 애니메이션을 만들기 위해 Ternary(삼항) 연산자를 사용하는 방법을 알아보겠습니다. 이를 통해 소스 코드를 간결하게 유지하고, 애니메이션 효과를 관리하기 쉽게할 수 있습니다.

Ternary 연산자란?

Ternary 연산자는 조건문을 간단하게 표현할 수 있는 연산자입니다. 일반적으로 condition ? expression1 : expression2와 같은 형태로 사용됩니다. condition이 true이면 expression1이 실행되고, false이면 expression2가 실행됩니다.

커스텀 애니메이션 효과 구현하기

다음은 Ternary 연산자를 사용하여 자바스크립트에서 커스텀 애니메이션 효과를 구현하는 간단한 예제입니다.

const element = document.querySelector('.element');
let isAnimating = false;

function animateElement() {
  isAnimating = true;
  
  const initialPosition = element.offsetLeft;
  const finalPosition = 500;
  
  const animationDuration = 1000; // 애니메이션 지속 시간 (밀리초)
  const animationStart = performance.now(); // 애니메이션 시작 시간
  
  function updateElement(position) {
    element.style.left = `${position}px`;
  }
  
  function animationLoop(timestamp) {
    const elapsed = timestamp - animationStart; // 경과 시간 (밀리초)
    const progress = Math.min(elapsed / animationDuration, 1); // 진행률 (0 ~ 1)
    
    const currentPosition = initialPosition + (finalPosition - initialPosition) * progress;
    
    updateElement(currentPosition);
    
    if (progress < 1) {
      requestAnimationFrame(animationLoop);
    } else {
      isAnimating = false;
    }
  }
  
  requestAnimationFrame(animationLoop);
}

// 애니메이션을 클릭 이벤트로 시작하도록 설정
element.addEventListener('click', () => {
  if (!isAnimating) {
    animateElement();
  }
});

위의 코드는 .element라는 CSS 클래스를 가진 요소를 이동시키는 애니메이션을 생성합니다. 클릭 이벤트가 발생할 때마다 애니메이션을 시작하며, 애니메이션이 진행 중이지 않을 때만 실행됩니다.

Ternary 연산자를 사용하여 애니메이션을 시작하는지 확인하고, 진행 중인지 여부를 isAnimating 변수로 추적합니다. 이를 통해 중복된 애니메이션을 방지할 수 있습니다.

결론

Ternary 연산자를 사용하여 자바스크립트에서 커스텀 애니메이션 효과를 구현하는 방법을 살펴보았습니다. 이를 통해 코드를 간결하게 유지하고 애니메이션 효과를 관리하기 쉽게 할 수 있습니다. 이러한 애니메이션 기술을 활용하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참고자료:

MDN Web Docs - Conditional (ternary) Operator