raphaelJS 2.1沿着路徑動畫

Question

我想沿着一條彎曲的路徑爲一條路徑（實際上是一組路徑，但我會做到這一點）製作動畫。

RaphaelJS 2刪除了animateAlong方法，原因我一直無法辨別。挖掘到拉斐爾文檔的gears demo爲抽象的Zevan，我有這麼遠：

//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翻譯不會影響已經應用到給定圓的任何其他變換。這個實現是而不是保證與其他轉換很好地發揮。