raphaelJS 2.1 경로를 따라 애니메이션 적용

Question

나는 곡선 경로를 따라 경로 (실제로는 경로 집합이지만 그 부분에 대해 알아 보겠습니다.)를 움직이려합니다.

RaphaelJS 2는 animateAlong 메서드를 제거했습니다. 이유는 알 수 없기 때문입니다. 라파엘 문서의 gears demoZevan에 의해 추상화로 파고, 나는 여기까지 가지고있다 :

//adding a custom attribute to Raphael 
(function() { 
    Raphael.fn.addGuides = function() { 
    this.ca.guide = function(g) { 
     return { 
     guide: g 
     }; 
    }; 
    this.ca.along = function(percent) { 
     var g = this.attr("guide"); 
     var len = g.getTotalLength(); 
     var point = g.getPointAtLength(percent * len); 
     var t = { 
     transform: "t" + [point.x, point.y] 
     }; 
     return t; 
    }; 
    }; 
})(); 

var paper = Raphael("container", 600, 600); 

paper.addGuides(); 

// the paths 
var circ1 = paper.circle(50, 150, 40); 
var circ2 = paper.circle(150, 150, 40); 
var circ3 = paper.circle(250, 150, 40); 
var circ4 = paper.circle(350, 150, 40); 

var arc1 = paper.path("M179,204c22.667-7,37,5,38,9").attr({'stroke-width': '2', 'stroke': 'red'}); 

// the animation 

// works but not at the right place 
circ3.attr({guide : arc1, along : 1}) 
     .animate({along : 0}, 2000, "linear"); 

http://jsfiddle.net/hKGLG/4/

내가 세 번째 원은 빨간색 경로를 따라 애니메이션을 적용 할. 이제는에 애니메이션이 적용되지만 빨간색 경로에서 세 번째 원의 원래 좌표와 동일한 거리에 있습니다. 이상한 일은 along 객체의 변형 translate이 상대 (소문자 "t") 또는 절대 (대문자 "T")인지 여부에 관계없이 발생합니다. animate 호출 직전에 변환 변환을 사용하여 해당 부분을 조금이라도 움직여도 동일한 지점에서 항상 움직입니다.

도움이 매우 감사합니다. 방금 벡터 대륙에서 보트에서 내려 왔어. 포인터가 도움이됩니다. 작동하는 바이올린이 더 좋습니다.

Answer 1

당신은 그냥 건너 뛰어 원하는 기능에서 건너 뛰어야합니다. 여기서 혼란은 변환과 객체 속성 간의 상호 작용, 특히 변환이 원래 객체 속성을 수정하지 않는다는 점입니다. 번역은 단순히 원의 원래 좌표를 대체하는 것이 아니라 단순히 추가합니다.

이 솔루션은 매우 간단합니다. 당신을 따라 방법 : 분명히

this.ca.along = function(percent) { 
    var box = this.getBBox(false); // determine the fundamental location of the object before transformation occurs 
    var g = this.attr("guide"); 
    var len = g.getTotalLength(); 
    var point = g.getPointAtLength(percent * len); 
    var t = { 
    transform: "...T" + [point.x - (box.x + (box.width/2)), point.y - (box.y + (box.height/2))] // subtract the center coordinates of the object from the translation offset at this point in the guide. 
    }; 
    return t; 

(즉, 그것이 의미가 0,0 모든 서클을 만든 다음 원하는 좌표 표시로 변환 할 수 있도록 많은 피할 수 여기 최적화를위한 여지있다 반복 수학의). 그러나 그것은 기능적입니다 ... see here.

다른주의 사항 : ... T 변환은 이미 주어진 원에 적용된 다른 변환에는 영향을 미치지 않습니다. 이 구현은 이 아니며이 아닌 다른 변환과 잘 호환됩니다.