자바스크립트 애니메이션 프레임을 활용한 토글 버튼 애니메이션 만들기

18 Oct 2023

javascript

토글 버튼은 웹 개발에서 많이 사용되는 UI 요소 중 하나입니다. 이번에는 자바스크립트의 애니메이션 프레임을 활용하여 토글 버튼에 애니메이션 효과를 추가하는 방법을 알아보겠습니다.

HTML 구조

저희는 다음과 같은 HTML 구조를 가진 토글 버튼을 만들 예정입니다.

<button class="toggle-button">토글 버튼</button>
<div class="toggle-content">토글될 내용</div>

CSS 스타일

우선 토글 버튼의 초기 상태에 대한 CSS 스타일을 정의해줍니다.

.toggle-content {
  display: none;
}

자바스크립트 코드

이제는 자바스크립트를 사용하여 토글 애니메이션을 만들어보겠습니다.

const button = document.querySelector('.toggle-button');
const content = document.querySelector('.toggle-content');

button.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
    animateToggle("down");
  } else {
    content.style.display = 'none';
  }
});

function animateToggle(direction) {
  const start = performance.now();
  const duration = 1000; // 애니메이션 지속 시간 (1초로 설정)
  const contentHeight = content.scrollHeight;
  const easing = t => t<0.5 ? 2*t*t : -1+(4-2*t)*t; // 이징 함수 (easing function)

  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / duration;

    if (timeFraction > 1) timeFraction = 1;

    const progress = easing(timeFraction);
    const height = direction === "down" ? contentHeight * progress : contentHeight * (1 - progress);

    content.style.height = height + "px";

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
  });
}

사용 방법

이제 토글 버튼을 클릭해보면 텍스트 내용이 부드럽게 나타나고 사라지는 애니메이션 효과를 볼 수 있습니다.

마치며

이번에는 자바스크립트 애니메이션 프레임을 활용하여 토글 버튼에 애니메이션 효과를 추가하는 방법을 알아보았습니다. 이를 응용하여 다양한 웹 UI 요소들에 애니메이션 효과를 적용할 수 있으니 참고하시기 바랍니다.

#JavaScript #Animation #토글버튼애니메이션