Вопрос новичка в анимации Рафаэля

Question

Я новичок в Рафаэле. Здесь у меня проблема.

Я определил путь:

var c = paper.path('M '+p1.x+' '+p1.y+'L '+p2.x+' '+p2.y);

где p1,p2 две конечные точки пути.

Я хотел бы иметь функцию анимации, которая при щелчке мышью по пути, p2 свернется до p1 и, наконец, p2 будет "скрываться за p1", поскольку они перекрываются. Как это сделать?

Answer 1

Насколько я знаю, вы не можете анимировать свойства пути. Лучше всего перерисовать путь с разными свойствами. Таким образом, вы бы "анимировали" переменные для p1 и перерисовали путь с этими переменными.

Вам нужна функция таймера, которая изменяет параметры p1. Так что, например, каждые 0,1 секунды параметры p1 приближаются к параметрам p2.

var p1x = 10;
var p1y = 10;

var p2x = 20;
var p2y = 20;

var t = setTimeout("timer()", 100);
var p = paper.path(...);

function timer()
{
   p1x++;
   p1y++;

   p.remove();
   p = paper.path(with new variables);

   if(p1x == p2x) clearTimeout(t);
}

Кто-то еще борется с этим: http://japhr.blogspot.com/2010/09/cant-animate-raphael-path-positions.html