拉斐爾JS，沿路徑問題

Question

我已經定義了兩個圓圈和一個路徑，其中的路徑連接兩個圓的中心點動畫：

c1=r.circle(40, 40, 20).attr(dashed); 
c2=r.circle(140, 40, 20).attr(dashed); 
path = r.path("m 40 40 l 100 0"); 

我想有此功能，當鼠標點擊路徑線，左邊的圓圈c1將會以右邊的圓圈c2（即左邊的圓圈c1將移動並最終加入右邊的圓圈c2）摺疊，並且在此過程中，路徑將始終連接兩個圓圈的中心點，那麼隨着兩個圓圈越來越近，這條路會變得越來越短。

我不知道如何實現這個功能，我試着像

path.onclicke(){ 
c1.animateAlong(path, 1000, true, function(){ 
    c1.attr({cx: 140, cy: 40}); 
}); 
} 

一些東西，但我不知道如何處理的路徑，使路徑越來越爲C1更接近短C2。任何人都可以幫忙

Answer 1

我已經做了在過去兩週我與路徑摔跤的份額，我向你保證。我碰巧注意到路徑對象的.attr（）和.animate（）可以被賦予一個全新的路徑字符串（請參閱文檔http://raphaeljs.com/reference.html#Element.attr）。所以，我嘲笑起來可怕的一天格洛顏色你的榜樣，並得到了結果，我認爲你正在尋找這樣的：

var c1 = this.canvas.circle(300, 200, 50).attr({ stroke: "#F00", fill: "#F00", 'fill-opacity': 0.5, 'stroke-width': 10 }); 
var c2 = this.canvas.circle(500, 200, 50).attr({ stroke: "#00F", fill: "#00F", 'fill-opacity': 0.5, 'stroke-width': 10 }); 
var p = this.canvas.path("M300 200 L500 200").attr({ stroke: "#0F0", "stroke-width": 10 }); 
p.click( function() 
{ 
    c1.animate({ cx: 400, cy: 200, r: 60 }, 1500); 
    c2.animate({ cx: 400, cy: 200, r: 60 }, 1500); 
    p.animate({ path: "M400 200 L400 200", "stroke-opacity": 0.25 }, 1500); 
}); 

這是你腦子裏有什麼？