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

发布于 2024-11-01 01:38:31 字数 558 浏览 3 评论 0原文

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

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），在此过程中，< strong>路径总是连接两个圆的中心点，即随着两个圆越来越近，路径会越来越短。

我不知道如何实现这个功能，我尝试了类似的东西

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

，但我不知道如何处理路径，因此随着 c1 越来越接近 c2，路径变得越来越短。有人可以帮忙吗？

原文

I have defined two circles and one path, where the path connect the center points of two circles:

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

I would like to have the feature that when mouse click on the path line, the left circle c1 will collapse with the right circle c2 (that's the left circle c1 will move to and finally join the right circle c2), and during this process, the path will always connect the center points of the two circles, that's the path will get shorter and shorter as two circles get closer.

I am not sure how to implement this feature, I tried some thing like

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

But I don't know how to handle the path, so that the path is getting shorter as c1 get closer to c2. Anyone can help?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼泪也成诗 2024-11-08 01:38:31

我向你保证，在过去的两周里，我已经完成了与路径的角力。我碰巧注意到路径对象的 .attr() 和 .animate() 可以被赋予一个全新的路径字符串（请参阅

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

这是你想要的吗？

I've done my share of wrestling with paths in the last two weeks, I assure you. I happened to notice that .attr() and .animate() for path objects can be given an entirely new path string (see the documentation at http://raphaeljs.com/reference.html#Element.attr). So, I mocked up your example in horrible day-glo colors and got the results I think you're looking for like this:

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

Is this what you had in mind?

回复收藏 0 原文

~没有更多了~