2

我有一组 Raphael 路径，我想在单独的路径悬停时对其进行动画处理。

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

我正在尝试做的事情如下：

起始画布

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

结束画布

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

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

谢谢！

4

2 回答 2

0

自从被问到已经一年多了，但也许它可能对其他人有所帮助。

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

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在这里

于 2014-05-19T00:34:17.237 回答
0

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

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

于 2013-03-13T09:41:25.553 回答