먼저, Raphaël 라이브러리를 프로젝트에 추가해야 합니다. Raphaël은 SVG(Scaleable Vector Graphics)의 작성 및 조작을 위한 자바스크립트 라이브러리입니다.

도형을 이동시키기 위해서는 Raphaël의 animate 메서드를 사용합니다. animate 메서드는 도형의 속성을 애니메이션화하여 도형을 움직일 수 있게 해줍니다.

다음은 Raphaël을 사용하여 도형을 이동시키는 예제 코드입니다.

// Raphaël 라이브러리로 화면에 SVG 캔버스 생성
const paper = Raphael(0, 0, 800, 600);

// 원 생성
const circle = paper.circle(100, 100, 50);
circle.attr("fill", "#FF0000");

// 도형 이동 애니메이션
circle.animate({ cx: 200, cy: 200 }, 1000, "bounce");

위 코드에서 Raphael(0, 0, 800, 600)는 화면에 크기가 800x600 픽셀인 SVG 캔버스를 생성하는 부분입니다.

paper.circle(100, 100, 50)은 캔버스 위에 반지름 50 픽셀인 원을 생성하는 부분입니다.

circle.attr("fill", "#FF0000")은 원의 배경색을 빨간색으로 설정하는 부분입니다.

circle.animate({ cx: 200, cy: 200 }, 1000, "bounce")은 원의 중심점인 cx, cy 속성을 200, 200으로 1초 동안 애니메이션화하여 원을 움직이는 부분입니다. “bounce”는 애니메이션의 이동 방식을 설정하는 값입니다.

위의 코드를 실행하면 원이 처음 위치에서 (200, 200)으로 이동하는 애니메이션을 볼 수 있습니다.

Raphaël을 사용하면 다양한 속성과 메서드를 활용하여 도형을 다양하게 조작할 수 있습니다. Raphaël 공식 문서에서 더 자세한 정보를 찾아볼 수 있습니다. 참고 링크