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上這么說不多，但這可能會有所幫助