拉斐尔动画中的新手问题

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