[javascript] Fabric.js로 애니메이션 효과 추가하기
Fabric.js는 HTML5 캔버스를 이용하여 그래픽을 그리고 조작할 수 있는 자바스크립트 라이브러리입니다. 이제부터는 Fabric.js를 사용하여 애니메이션 효과를 추가하는 방법에 대해서 알아보겠습니다.
1. Fabric.js 설치하기
먼저, Fabric.js를 사용하기 위해서는 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 Fabric.js를 설치할 수 있습니다.
npm install fabric
2. Fabric.js 초기 설정하기
Fabric.js를 사용하기 위해서는 캔버스 요소를 생성하고, Fabric.js 인스턴스를 초기화해야 합니다. 다음은 초기 설정 코드의 예시입니다.
const canvas = new fabric.Canvas('canvas-element');
해당 코드는 ‘canvas-element’라는 ID를 가진 HTML 요소를 캔버스로 사용하도록 설정합니다.
3. 애니메이션 효과 추가하기
Fabric.js는 다양한 애니메이션 효과를 제공합니다. 예를 들어, 객체를 이동시키거나 회전시키는 애니메이션 효과를 추가할 수 있습니다. 다음은 애니메이션 효과를 추가하는 코드의 예시입니다.
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
rect.animate('left', 200, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function() {
console.log('Animation completed!');
}
});
해당 코드는 100x100 크기의 빨간색 사각형을 생성하고, 왼쪽으로 200px만큼 이동시키는 애니메이션 효과를 추가합니다. animate 메소드의 다양한 옵션을 설정하여 원하는 애니메이션 효과를 적용할 수 있습니다.
4. 실행하기
위에서 작성한 코드를 HTML 파일에 추가하고 브라우저에서 실행하면 애니메이션 효과가 적용된 Fabric.js 그래픽을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="fabric.min.js"></script>
</head>
<body>
<canvas id="canvas-element" width="500" height="500"></canvas>
<script src="main.js"></script>
</body>
</html>
위 코드에서 fabric.min.js는 Fabric.js 라이브러리 파일의 경로를 지정하는 것이며, main.js는 위에서 작성한 코드가 포함된 자바스크립트 파일의 경로입니다.