raphael - 拉斐尔动画中的新手问题

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