【发布时间】：2012-04-06 20:13:51
【问题描述】：
催眠
我在一条路径上有一些圆圈（见图中的起始形状），它们需要动画到另一条路径（图中的结束形状）。
动画必须做几个动作：
- 将整个形状移动到新位置
- 改变路径
- 减小所有圆半径
图：
问题
Raphael.js 知道如何将圆从原始坐标变为最终坐标，同时改变半径。因为动画不像原始和最终的那样在相似的路径上运行，所以动画看起来不是很好。圆圈从 x1,y1 到 x2,y2 是一条直线。
我尝试了什么
做直接的动画，从头到尾移动圆圈，改变半径。就像我说的，这不行。
按间隔移动每个圆圈，在每次迭代中计算新路径并计算圆圈的位置。这运行得很慢。
使用 Element.getPointAtLength() 计算每次迭代的临时圆位置。这也很慢。
在数组中硬编码一些中间路径，并在每个中间路径中运行动画。这在速度方面更好，但看起来有点生涩
那么，有什么想法吗？
【问题讨论】：
-
我也想要这个问题的答案......我正在制作一个教学时钟，我需要一个弧线来沿着弧线平滑地制作动画。不过，与您的情况一样，它会直接跳到新点：jsfiddle.net/zFXCb/10 如果我找到解决方案，我会发布答案。
标签： javascript animation svg raphael