Paper.js는 JavaScript를 기반으로 하는 벡터 그래픽 라이브러리로, 웹 페이지에서 간단하고 강력한 벡터 애니메이션을 구현할 수 있습니다. 이번에는 Paper.js를 사용하여 벡터 애니메이션을 제작하는 방법에 대해 알아보겠습니다.

Paper.js 시작하기

먼저, Paper.js를 사용하기 위해 HTML 파일에 다음과 같이 스크립트 태그를 추가합니다.

<script src="https://unpkg.com/paper"></script>

그런 다음, JavaScript 파일에서 Paper.js를 초기화하고 캔버스를 생성합니다.

// Paper.js 초기화
paper.setup('myCanvas');

// 캔버스 생성
var myCanvas = document.getElementById('myCanvas');
paper.setup(myCanvas);

myCanvas는 캔버스의 ID로, HTML 파일에서 해당 ID를 갖는 요소를 찾아 캔버스로 사용합니다.

벡터 그리기

Paper.js를 사용하여 벡터 그래픽을 그리려면 Path 객체를 사용합니다. 다음은 원을 그리는 예제입니다.

var path = new paper.Path.Circle(new paper.Point(100, 100), 50);
path.fillColor = 'red';

이 코드는 (100, 100) 위치에 반지름이 50인 원을 그리고 색상을 ‘빨강’으로 설정합니다.

애니메이션 만들기

Paper.js를 사용하면 애니메이션을 만들기 위해 프레임 단위로 작업할 수 있습니다. Paper.js에서는 view 객체의 onFrame 이벤트 리스너를 사용하여 애니메이션을 만들 수 있습니다. 다음은 원을 왼쪽으로 이동시키는 애니메이션 예제입니다.

var path = new paper.Path.Circle(new paper.Point(100, 100), 50);
path.fillColor = 'red';

function onFrame(event) {
  path.position.x += 1;
  
  if (path.position.x > paper.view.size.width + path.bounds.width) {
    path.position.x = -path.bounds.width;
  }
}

paper.view.onFrame = onFrame;

이 코드는 onFrame 함수를 정의하고, 매 프레임마다 path 객체의 x 좌표를 1씩 증가시킵니다. 경계를 넘어가면 다시 왼쪽 끝으로 옮겨주어 무한 반복되는 애니메이션을 만듭니다.

Paper.js 문서 참고

Paper.js에 대해 더 자세한 내용은 공식 문서를 참고하시기 바랍니다. Paper.js의 다양한 기능과 예제를 통해 벡터 애니메이션을 구현하는 방법을 익힐 수 있습니다.

Paper.js는 강력한 도구로 웹 페이지에서 인터랙티브하고 동적인 애니메이션을 만들 수 있도록 도와줍니다. 쉽게 배울 수 있는 문법과 다양한 기능을 활용하여 자신만의 벡터 애니메이션을 만들어 보세요.