Question

我有一套Raphael路径，当一条单独的路径悬停在上面时，我想要制作动画。

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

我要做的是如下：

starting canvas

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

ending canvas

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

最重要的是，我不确定如何计算圆圈所遵循的隐藏路径的角度和大小。什么是创建这个动画的最佳方式？

谢谢！

Answer 1

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

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

Answer 2

自问问以来已经有一年多了，但也许可以帮助其他人。

在高中使用简单的代数思想，你可以定义两个函数：线性和螺旋。

function linear(i){
    x = i*15;
    y = x;
    return {cx:x+offset,cy:y+offset};
}

function spiral(i){
    r = 50 - i*5;
    x = r*Math.cos(i);
    y = r*Math.sin(i);
    return {cx:x+offset,cy:y+offset};
}

这只是一个5分钟的小摆设，所以看起来很便宜。当然，您可以使用transform函数定义更好的算法。

jsfiddle here

如何使用Raphael JS在悬停时将路径卷曲成螺旋形

2 个答案: