Raphael.js中的自定义动画

Question

Hyphotesis

我在路径上有一些圆圈（参见图中的起始形状），他们需要设置动画到另一条路径（图中的最终形状）。

动画必须执行多项操作：
     - 将整个形状移动到新位置
     - 改变路径
     - 减少所有圆半径

图：

问题

Raphael.js知道如何设置从原始坐标到最终坐标的圆形动画，同时改变半径。因为动画不像原始动画和最终动画那样在类似路径上运行，所以动画看起来不太好。圆圈从x1，y1到x2，y2成直线。

我尝试了什么

1. 执行直接动画，从开始到结束移动圆圈，更改半径。就像我说的，这不行。

2. 按间隔移动每个圆，计算每次迭代的新路径并计算圆的位置。这很慢。

3. 使用Element.getPointAtLength（）计算每次迭代的临时圆圈位置。这也很慢。

4. 在数组中硬编码一些中间路径并通过每个路径运行动画。这在速度方面更好，但看起来有点生涩

那么，有什么想法吗？

Answer 1

http://irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.getpointatlength

我在iPod上这么说不多，但这可能会有所帮助