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

拉斐尔动画中的新手问题

1 个答案: