Snap SVG - 在相反方向动画路径

Question

我正在制作路径动画，但不知道如何反向完成它。

目前，红色路径从全长开始，随着时间的推移变得越来越短从正确的方向。我想完成相同的动画，但路径变得更短 从左侧 方向开始。（从左侧矩形开始消失，到右侧矩形结束）。

我尝试在 .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);

Snap SVG - 在相反方向动画路径

Snap SVG - Animating a Path in the opposite direction

svg

snap.svg