Snap SVG - 以相反方向为路径设置动画答案

【问题标题】：Snap SVG - Animating a Path in the opposite directionSnap SVG - 以相反方向为路径设置动画
【发布时间】：2015-02-25 04:43:22
【问题描述】：

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

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

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

我尝试在 .animate 中更改以下 sn-p：

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

但是将其更改为不同的值永远不会产生正确的效果。

有没有人知道一个简单的方法来完成这个？

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

一种方法是进一步调整 dashOffset 点...

jsfiddle

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

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

【讨论】：

太棒了！啊，是的，这是有道理的。