如何爲Raphael JS繪製的矢量路徑製作動畫？

Question

如何使用Raphael JS繪製矢量路徑的動畫？

我有一套座標，我想用拉斐爾JS連接。

在網格上，座標是（x，y集合）。我想從一端開始，並在用戶觀看時「連接點」。最終的產品將是這個樣子：

Picture 9.png http://img213.imageshack.us/img213/8013/picture9my.png

理想情況下，我想能夠使路徑彎曲，使他們看起來更像這個（座標添加供參考）：

Picture 10.png http://img534.imageshack.us/img534/1789/picture10fc.png

的座標是：

26,-6 
14,-12 
5,-20 
11,-28 
14,-37 
5,-40 

我一直在尋找谷歌和我已經閱讀THR ough這個問題How to draw a vector path progressively? (Raphael.js)，但我想特別使用Raphael.js，Raphael.js的那個頁面上的例子似乎不起作用，也沒有討論使用多個座標點輸入。

Answer 1

漸進路徑

逐步繪製路徑是很容易做到。我不喜歡this question上第二個最被接受的答案，因爲它在每一步都重新創建一條路徑，清理之間的紙張。這裏，我再次使用的時間和時間的實用功能：

function drawpath(canvas, pathstr, duration, attr, callback) 
{ 
    var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" }); 
    var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr); 
    var total_length = guide_path.getTotalLength(guide_path); 
    var last_point = guide_path.getPointAtLength(0); 
    var start_time = new Date().getTime(); 
    var interval_length = 50; 
    var result = path;   

    var interval_id = setInterval(function() 
    { 
     var elapsed_time = new Date().getTime() - start_time; 
     var this_length = elapsed_time/duration * total_length; 
     var subpathstr = guide_path.getSubpath(0, this_length);    
     attr.path = subpathstr; 

     path.animate(attr, interval_length); 
     if (elapsed_time >= duration) 
     { 
      clearInterval(interval_id); 
      if (callback != undefined) callback(); 
       guide_path.remove(); 
     }          
    }, interval_length); 
    return result; 
} 

你可以看到它在行動on my site。

僅憑這一點就可以使您的點的漸進路徑構造以線性方式動畫化，非常簡單。你只需編譯你的路徑...

var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"]; 

然後將它傳遞給你設置的任何路徑動畫函數。就我而言，

drawpath(paper, 
      sequence_path, 
      3500, 
      { stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 }, 
      function() 
      { 
       alert("All done"); // trigger whatever you want here 
      }); 

曲線插補

拉斐爾2.0的卡特莫爾羅功能，使您的點之間優雅地彎曲非常簡單（感謝埃裏克·達爾斯特羅姆指出這一點）。所有你需要做的就是使用'R'命令來建立一個路徑在點之間移動，而拉斐爾將完成剩下的工作。

function generateInterpolatedPath(points) 
{ 
    var path_sequence = []; 
    path_sequence.push("M", points[0].x, points[0].y); 
    path_sequence.push("R"); 
    for (var i = 1; i < points.length; i++) 
    { 
     path_sequence.push(points[i].x, points[i].y); 
    } 
    return path_sequence; 
} 

你可以看到所有的作品一起here工作。

Answer 2

您也可以使用Catmull Rom（參見http://raphaeljs.com/reference.html#Paper.path）以獲得通過給定點的平滑曲線。

現場演示here（單擊以指定點，然後按住Shift鍵單擊以過渡到Catmull Rom曲線）。