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);