[javascript] GSAP를 사용한 실시간 데이터 시각화 애니메이션

27 Nov 2023

javascript

이번 글에서는 GSAP(GreenSock Animation Platform)를 사용하여 실시간 데이터를 시각화하는 애니메이션을 만들어보겠습니다. GSAP는 JavaScript 애니메이션 라이브러리로서, 웹 애니메이션을 구현하는 데 매우 유용합니다.

GSAP 소개

GSAP는 많은 기능과 옵션을 제공하는 강력한 애니메이션 라이브러리입니다. 여기에는 애니메이션 기간, 이징(가속, 감속), 반복, 역재생 등을 포함한 다양한 애니메이션 형태를 구현할 수 있는 기능이 있습니다. 또한, SVG, CSS, Canvas와 같은 다양한 타겟을 지원합니다.

GSAP를 사용하려면 먼저 GSAP를 다운로드하고 HTML 문서에 포함해야 합니다. GSAP는 ‘TweenMax’, ‘TweenLite’, ‘TimelineMax’, ‘TimelineLite’ 등의 클래스를 제공합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

실시간 데이터 시각화 애니메이션 만들기

간단한 예제로, 실시간으로 업데이트되는 데이터를 시각화하는 애니메이션을 만들어보겠습니다. 이 예제에서는 랜덤한 정수 데이터를 생성하고 막대 그래프로 시각화합니다.

HTML:

<div id="chart"></div>

JavaScript:

// 랜덤 데이터 생성
function generateRandomData() {
  return Math.floor(Math.random() * 100);
}

// 막대 그래프 생성
function createBar(height) {
  var bar = document.createElement("div");
  bar.style.width = "20px";
  bar.style.height = height + "px";
  bar.style.backgroundColor = "blue";
  bar.style.marginRight = "5px";
  return bar;
}

// 데이터 업데이트
function updateData() {
  var chart = document.getElementById("chart");
  var data = generateRandomData();

  // 애니메이션 효과를 위한 GSAP 사용
  gsap.to(chart, {
    duration: 0.5,
    scaleX: 1.2,
    onComplete: function () {
      // 새로운 데이터로 막대 그래프 생성
      var bar = createBar(data);
      chart.innerHTML = "";
      chart.appendChild(bar);

      // 애니메이션 효과
      gsap.from(bar, {
        duration: 0.5,
        scaleY: 0,
      });

      // 다음 데이터 업데이트
      setTimeout(updateData, 1000);
    },
  });
}

// 초기화
function init() {
  updateData();
}

init();

위의 코드는 다음과 같이 동작합니다:

generateRandomData 함수를 사용하여 랜덤한 데이터를 생성합니다.
createBar 함수를 사용하여 데이터에 해당하는 막대 그래프를 생성합니다.
updateData 함수에서는 GSAP를 사용하여 애니메이션 효과를 적용합니다.
updateData 함수에서는 새로운 데이터로 막대 그래프를 생성하고 애니메이션 효과를 적용합니다.
setTimeout 함수를 사용하여 1초마다 데이터를 업데이트하도록 설정합니다.

위의 예제는 GSAP를 사용하여 실시간 데이터 시각화 애니메이션을 만드는 방법을 보여줍니다. GSAP를 사용하면 다양한 애니메이션 효과를 쉽게 적용할 수 있으며, 웹 애니메이션을 더욱 효과적으로 구현할 수 있습니다.

참고 자료

GSAP 공식 문서: https://greensock.com/docs/
GSAP 코드 샘플: https://greensock.com/examples/