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 );
} );

这是你的想法吗？

Raphael js，沿路径问题制作动画

1 个答案: