javascript - 如何使用 Raphael JS 在悬停时将路径 curl 成螺旋形

Question

我有一组 Raphael 路径，我想在将鼠标悬停在单独的路径上时为其设置动画。

客户发送了我已将其转换为 Raphael 代码的 SVG 插图。这只是大图的一小部分。

我想做的是如下:

starting canvas

从一行中的一组路径对象开始。当您将鼠标悬停在红色路径上时，它们会呈螺旋状动画，直到它们形成

ending canvas

我做了一些研究，我认为我将不得不沿着一条隐藏的路径为每个圆圈制作动画，该隐藏路径描绘了它们必须移动才能到达最终螺旋形状 (Animate along a path) 的弧线，但是我不确定这是否是创建此动画的最有效方法。

最重要的是，我不太确定如何计算圆圈所遵循的隐藏路径的 Angular 和大小。制作此动画的最佳方式是什么？

谢谢!

Answer 1

我认为沿着隐藏路径移动每个圆圈是最简单的方法。

我建议在 InkScape 矢量编辑器中创建一个新的 SVG 文件，在开始和结束位置绘制圆圈，然后用圆弧连接它们。保存文件。然后在任何文本编辑器中打开文件并将所有数据复制到您的 JS 代码(复制路径的“d”参数和圆圈坐标)。