Raphaël.js로 회전 된 오브젝트 애니메이션하기

Question

저는 현재 로봇으로 로봇을 그려야합니다. 로봇은 원과 로봇의 현재 방향을 보여주는 상자로 구성됩니다.

내 문제는 내가 그들을 애니메이션 때이다, 때문에 회전 이상한 방법으로 방향 상자 이동 ...

이 여기의 의미는 다음과 같습니다 도와 http://jsfiddle.net/zmunB/

감사합니다.

발자드.

Answer 1

이 fiddle은 다른 옵션을 보여줍니다. rajkamal의 솔루션만큼 우아하지 않을 수도 있지만 매트릭스 작업에 익숙하지 않으면 이해하기 쉽습니다. 원하는대로 기능을 추가 할 수 있어야합니다 (내가 추가 한 '눈'에 주목하십시오).

기본적으로 세트에 기능을 추가하고 세트의 각 요소에 변형을 적용합니다. 오른쪽의 채색 된 사각형을 클릭하여 애니메이션을 시작하십시오. '상대 이동'은 세트가 '찾고있는'방향으로 이동하게합니다.

Answer 2

이 피들을 참조하십시오. http://jsfiddle.net/apUvX/2/, 변형 된 동작. 여기 원의 "onAnimation"메서드에서 Matrix.x, Matrix.y을 사용하고 사각형의 x, y에 결과를 할당하여 직사각형 좌표계로 원의 중심 좌표를 변환합니다.