拉斐尔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); 
}); 

这是你脑子里有什么？