Рафаэль JS, анимировать по пути пути - PullRequest
Новая
       1

Рафаэль JS, анимировать по пути пути

1 голос
/ 11 апреля 2011

Я определил две окружности и одну траекторию, где пути соединяют центральные точки двух окружностей: 

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.Кто-нибудь может помочь?

1 Ответ

1 голос
/ 13 апреля 2012

Я сделал свою долю борьбы с путями в последние две недели, уверяю вас. Я случайно заметил, что .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 );
} );

Это то, что вы имели в виду?

...