拉斐爾動畫中的新手問題

Question

我是拉斐爾的新手。這裏我遇到了一個問題。

我已經定義的路徑：

var c = paper.path('M '+p1.x+' '+p1.y+'L '+p2.x+' '+p2.y);

p1其中，p2是路徑的兩個端點。

我想要一個動畫功能，當鼠標點擊路徑時，p2將摺疊爲p1，最後p2會在「疊加」時「隱藏p1」。怎麼做？

Answer 1

據我所知，您不能爲路徑屬性設置動畫。最好重新繪製具有不同屬性的路徑。所以你會爲p1的變量「動畫」，並用這些變量重繪路徑。

您需要一個可以改變p1參數的定時器功能。因此，例如每隔0.1秒p1參數就會接近p2參數。

var p1x = 10; 
var p1y = 10; 

var p2x = 20; 
var p2y = 20; 

var t = setTimeout("timer()", 100); 
var p = paper.path(...); 

function timer() 
{ 
    p1x++; 
    p1y++; 

    p.remove(); 
    p = paper.path(with new variables); 

    if(p1x == p2x) clearTimeout(t); 
} 

某些別有用心的人用它掙扎：http://japhr.blogspot.com/2010/09/cant-animate-raphael-path-positions.html