자바스크립트를 사용하여 웹 페이지에 애니메이션을 추가하는 것은 매우 일반적입니다. 하지만 애니메이션의 제어와 상태를 관리하는 것은 때로는 복잡할 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트에서 Ternary 연산자를 활용할 수 있습니다. Ternary 연산자는 간단한 조건문을 작성하기 위해 사용되며, 애니메이션 제어에 유용할 수 있습니다.

Ternary 연산자는 세 개의 피연산자로 구성됩니다. 첫 번째 피연산자는 조건입니다. 조건이 true이면, 두 번째 피연산자가 반환됩니다. 조건이 false이면, 세 번째 피연산자가 반환됩니다. 이를 통해 애니메이션의 상태에 따라 다른 동작을 할 수 있습니다.

다음은 Ternary 연산자를 활용하여 애니메이션 제어하는 예시 코드입니다.

const animation = document.getElementById('animation');
const btnStart = document.getElementById('btn-start');
const btnStop = document.getElementById('btn-stop');
let isAnimating = false;

btnStart.addEventListener('click', () => {
  if (!isAnimating) {
    animation.style.animationPlayState = 'running';
    isAnimating = true;
    btnStart.textContent = 'Stop Animation';
  } else {
    animation.style.animationPlayState = 'paused';
    isAnimating = false;
    btnStart.textContent = 'Start Animation';
  }
});

btnStop.addEventListener('click', () => {
  animation.style.animationPlayState = 'paused';
  isAnimating = false;
  btnStart.textContent = 'Start Animation';
});

이 예시 코드에서는 Ternary 연산자를 사용하여 isAnimating 변수에 따라 애니메이션 상태를 제어합니다. btnStart 버튼을 클릭하면, isAnimating이 false이면 애니메이션을 시작하고 버튼의 텍스트를 “Stop Animation”으로 변경합니다. isAnimating이 true이면 애니메이션을 일시정지하고 버튼의 텍스트를 “Start Animation”으로 변경합니다. btnStop 버튼을 클릭하면 애니메이션을 일시정지하고 isAnimating을 false로 설정하며, 버튼의 텍스트를 “Start Animation”으로 변경합니다.

자바스크립트에서 Ternary 연산자를 활용하여 애니메이션을 제어할 수 있습니다. 이를 통해 애니메이션 상태와 관련된 코드를 간결하고 효율적으로 작성할 수 있습니다.

참고 자료:

• MDN Web Docs - Ternary 연산자
• W3Schools - JavaScript Animation

#javascript #animation