如何使用Raphael將捲曲路徑轉化爲螺旋形狀使用JS

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