CODEWITHSUNDEEP
javascriptjqueryraphael
Mellon
Mellon

Reputation: 38842

Raphael js, animate along path problem

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?

Upvotes: 1

Views: 1216

Answers (1)

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

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?

Upvotes: 1

Related Questions