2010-06-29 6 views
3

SVG 객체를 만들 때 Raphael 라이브러리를 사용하고 있습니다.'Raphael'캔버스에 애니메이션을 적용하는 방법은 무엇입니까?

var paper = Raphael(10, 50, 320, 200); 

내가 지금 내부의 종이와 모든 애니메이션을 적용 할 단지 : 문서에 명시된 바와 같이

SVG 모양을 초기화하고 내부 모두를위한 캔버스를 만들려면, 나는 다음 줄을 사용했습니다 같은 나는 다음과 같은 maner의 용지에 추가되었던 모양을 애니메이션 것 :

var firstShape = paper.rect(x, y, width, height); 
firstShape.animate({x: 100}, 500, "<"); 

나는 종이 등으로 비슷한 시도 할 때 :

'paper.animate is not a function'오류가 발생합니다.

여기에 무슨 일이 있으며 어떻게 해결할 수 있습니까?

답변

3

귀하의 닫는 대괄호의 순서는,이 animate를 호출 할 수 있다는 것 같지 않습니다

변경

paper.animate({x: 100, 500, "<")}; 

워드 프로세서

paper.animate({x: 100}, 500, "<"); 

UPDATE

에 잘못 직접 paper에 있지만 캔버스의 잘라 서브 모양 - firstshape.animate

+0

죄송합니다. 나는 그 질문에 신선한 입력, 그 오류가 내 실제 코드에 존재하지 않지만. 반영 할 질문을 업데이트했습니다. –

+0

Jack - 내 업데이트를 참조하십시오. – JoseK

0

당신은 드로잉 보드 ... 그 안에 단지 모양을 애니메이션 할 수없는 일 이유

용지가 당신입니다 ..입니다 드로잉 보드 .. 반면에 firstShape는 보드 내부에 생성 된 모양입니다.

+0

기본 '드로잉 보드'가 단순히 SVG 요소라는 가정하에있었습니다. 전체 SVG 객체를 애니메이션화/변형 할 수 있습니까? –

+0

@Jack, 제 이해는'Raphael (..)'이 캔버스 객체를 반환한다는 것입니다. 나머지는이 캔버스를 참조하고 그 내부에서 움직일 수있는 객체입니다. 나는 잘못 될 수 있습니다 .. –

9

종이 객체를 움직일 수 없습니다. 용지에 애니메이션을 적용 할 속성이 없습니다. 그러나 모든 요소를 ​​set에 통합 한 다음 애니메이션을 적용 할 수 있습니다.

+5

"Raphaël에게 감사"=) –

관련 문제