当前位置：文江博客话题详情

拉斐尔动画新手问题

发布于 2024-10-28 13:15:31 字数 245 浏览 3 评论 0原文

我是拉斐尔的新手。我在这里遇到了一个问题。

我定义了一个路径：

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

其中 < code>p1,p2 是路径的两个端点。

我想要一个动画功能，当鼠标单击路径时，p2 将折叠到 p1，最后 p2 在重叠时将“被 p1 隐藏”。怎么做呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我要还你自由 2024-11-04 13:15:31

据我所知，你不能为路径属性设置动画。最好用不同的属性重新绘制路径。因此，您可以对 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

As far as I know you can't animate a path properties. Best to redraw the path with different properties. So you would "animate" the variables for p1 and redraw the path with those variables.

You need a timer function which alters the p1 parameters. So that every 0.1 second in example the p1 parameters go near the p2 ones.

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);
}

Somebody else struggling with it: http://japhr.blogspot.com/2010/09/cant-animate-raphael-path-positions.html

回复收藏 0 原文

~没有更多了~