javascript - Raphael js, animate along path problem -


i have defined 2 circles , 1 path, path connect center points of 2 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 have feature when mouse click on path line, left circle c1 collapse right circle c2 (that's left circle c1 move , join right circle c2), , during process, path connect center points of 2 circles, that's path shorter , shorter 2 circles closer.

i not sure how implement feature, tried thing like

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

but don't know how handle path, path getting shorter c1 closer c2. can help?

i've done share of wrestling paths in last 2 weeks, assure you. happened notice .attr() , .animate() path objects can given entirely new path string (see documentation @ http://raphaeljs.com/reference.html#element.attr). so, mocked example in horrible day-glo colors , got results think you're looking 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 had in mind?


Comments

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -