Snap SVG - 在相反方向動畫一條路徑

Question

我正在研究一個路徑動畫，但我堅持如何完成它。

http://jsfiddle.net/t1yu3mcn/1/

目前，紅色路徑開始於全長，並且隨着時間的推移變得更短，並從正確的方向短。我想要完成相同的動畫，但路徑變短的地方從左側方向開始。 （開始從左邊的矩形消失，結束消失在右邊的矩形）。

我試圖改變內部.animate下面的代碼片段：

'stroke-dasharray': val + ' ' + (pathCoverLength - val) 

而是圍繞改變這種不同的值永遠不會產生正確的效果。

有沒有人知道完成這個簡單的方法？

Answer 1

一種方法是進一步玩弄dashOffset點......

jsfiddle

pathCover.attr({ strokeDasharray: pathCoverLength + ' ' + pathCoverLength }) 

Snap.animate(pathCoverLength*2, pathCoverLength, function(val) { 
    pathCover.attr({ 
     strokeDashoffset: val }); 
}, 7000, mina.ease);