Raphael JS로 동그라미 애니메이션하기

Question

Raphael JS로 만든 원 포인트에서 원을 움직이기 원합니다.

여기에 내가 노력 코드는 다음과 같습니다

for(var i=1; i<4; i++) { 
    var circle = paper.circle(width*0.4, height*0.2, 10*i); 
    circle.attr(
     { 
      stroke: '#0000d7', 
      'stroke-width': 1, 
      'stroke-linejoin': 'round' 
     } 
    ); 
    circle.animate({transform: "T0,100"}, 2000); 
} 

내가 걸을 수있는 완전한 원을 애니메이션. 하지만 먼저 내면의 가장 안쪽 원과 그 다음에는 세 번째 원이 몇 밀리 초 후에 나타납니다 (효과로). 그러나 나는 그것을 어떻게하는지 모른다.

Answer 1

이것이 어떤 수의 서클로 확장 될 수 있다고 가정 할 때, 나는 당신이 사용하고있는 것과 비슷한 setTimeout과 루프를 사용할 것입니다.

애니메이션을 루프에서 작동 시키려면 애니메이션이 나중에 실행될 때 참조 할 원이 무엇인지 알 수 있도록 '클로저'를 사용해야합니다 (그렇지 않으면 마지막 객체를 움직일 수 있습니다).

(function() {})() (직접 모드라고 함)의 함수 형식을 사용하면 함수 범위 내에서 변수가 캡처되므로 나중에 변수가 정확합니다.

jsfiddle

당신이 처음에 모든 원을 원하지 않는 경우

for(var i=1; i<10; i++) { 
    (function() {     // start closure with functional scope 
     var circle = paper.circle(width*0.4, height*0.2, 10*i); 
     setTimeout(function() { circle.animate({transform: "T0,100"}, 2000); }, (i-1) * 2000 ) 
    })(); 
} 

, 당신은 여전히 ​​(우리는 함수가 명확하게하기 위해 C에 할당 할) 인덱스 난을 캡처하는 폐쇄가 필요합니다.

for(var i=1; i<10; i++) { 
    (function() {     // start functional scope 
     var c = i;     // c is now tied to this scope 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate({transform: "T0,100"}, 2000); 
     }, (c-1) * 2000 ) 
    })(); 
} 

jsfiddle

예

나는 여기에 애니메이션 객체를 생성 할 필요가있다 모르겠지만, 당신이 원한다면, 워드 프로세서는 here

같은 예입니다,하지만 라파엘를 사용하여. 생기.

var animation = Raphael.animation({transform: "T0,100"}, 2000) 

for(var i=1; i<10; i++) { 
    (function() { 
     var c = i; 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate(animation); 
     }, (c-1) * 2000 ) 
    })(); 
} 

jsfiddle