尋找在拉斐爾沿路徑的點的位置

我在拉斐爾做一個動畫，其中涉及到一對來自div的二次Bezier線，並沿着朝向一對子元素的路徑進行動畫處理。我希望每個子元素的曲線都能一點一點地畫出來，直到達到最終點。我解決此去的方式如下：尋找在拉斐爾沿路徑的點的位置

1）爲整個動畫

2）在每一幀創建一箇中央螺紋，增加的變量，currentLength，通過一定量的

3）在每個幀中，通過使用getPointAtLength

4）在每一幀中找到在每個曲線的當前點，移動一點點這一點

5）在每一幀中，了lineTo小點的新位置 - 直線，但有en最終結果仍然看起來不錯，二次曲線和曲線的框架

這一切都像絕對的魅力一樣，除了一件事 - getPointAtLength似乎是慢的。我已經嘗試了10個不同的方法來解決這個問題，上面提到的解決方案是迄今爲止我所提出的最快的解決方案。它們都工作 - 但getPointAtLength的包含使得它太慢了。使用animateAlong與一個點，然後lineTo與該點的座標不太好，首先會導致它創建多個線程，因爲它有子節點，因爲它不會更快。

請幫忙！閱讀我的消息，瞭解它，幫助我找到解決方案！ getPointAtLength似乎waaaaaaaaaaaay太慢 - 在7行中爲每幀40幀調用一次，它使得一切都變得緩慢。任何幫助，將不勝感激。

來源

2011-02-02 Andrés Angulo

Raphael有一個內置的animateAlong方法（http://raphaeljs.com/reference.html#animateAlong）。定義您的路徑，然後讓幫助對象沿着路徑移動。

然後，使用onAnimation方法（http://raphaeljs.com/reference.html#onAnimation）。此方法在動畫的每一步調用一個函數，並且可以定義回調函數以繪製輔助對象已達到的曲線部分（使用getSubpath方法）。

var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z"), 
    t = 4000, // length of timeout 
    i = p.getTotalLength()/4000, // length of path to move each time 
    j = 0, // counter 
    p2 = r.path(), 
    e = r.ellipse(10, 50, 1,1).attr({stroke: "none", fill: "#f00"}).onAnimation(function() { 
     p2.attr({path: p.getSubpath(0, j*i)}); 
     j++; 
    }).animateAlong(p, t, function() { 
     console.log(j); 
    }); 
});

我知道它變得有點複雜，但基本上是你的工作輔助對象多遠沿着小路進入的方式（i）每一步，然後作爲反循環（j），再移動其他沿路徑的分數。

我不確定拉斐爾會重繪每一毫秒，但應該有一種方法可以計算出動畫中有多少個階段。 animateAlong有一個回調函數，當動畫完成時我用它來記錄j，所以你可以看到有多少個動畫階段。

來源

2011-08-03 11:42:15 chris5marsh

尋找在拉斐爾沿路徑的點的位置

回答

相關問題