Raphael js，动画沿路径问题

Raphael js, animate along path problem

本文关键字：路径 问题 动画 js Raphael      更新时间：2023-09-26

我定义了两个圆和一条路径，其中路径连接两个圆的中心点:

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而变短。有人能帮忙吗?

我向你保证，在过去的两周里，我已经完成了与路径的角力。我碰巧注意到路径对象的。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 );
} );

这是你想要的吗?

相关文章：