svg.js 动画组合的情节和 dmove

Question

我正在尝试研究如何在 sgv.js 中为 plot 和 dmove 组合设置动画。

我期待如果我在 animate 之后将 plot 和 dmove 链接在一起，我的路径将从原始几何图形动画到 plot 加上 dmove 的结果几何图形：

myPath.animate().plot('20,20 25,20 25,25 20,25').dmove(100, 100)

但是，dmove 似乎与 plot 无关，而是与原始路径几何 (myPath) 相关。

我尝试使用 CODEPEN demonstrate this concept

path1 和 path2 都从 X:50 开始，应该在 X:200 结束。但是，plot 添加的 50 似乎被忽略了。

我考虑的另一种方法是在将几何传递给animate 函数之前更改几何：

var geometry = new SVG.PointArray('20,20 25,20 25,25 20,25')
geometry.dmove(100, 100)

myPath.animate().plot(geometry)

但是PointArray 和PathArray 类没有dmove 函数。

svg.js 库非常广泛，我认为我遗漏了一些明显的东西。

Answer 1

您面临的问题是，dmove() 的评估时间早于您想要的。 dmove 只是在计算出输入和 bbox 的新坐标后直接映射到 move。由于您的动画一开始是在您的起点，因此对 dmove 的调用会看到“旧”bbox 并将其用于其相对移动。

首先计算您的结果起点（如您在第二次尝试中所做的那样）是要走的路。 Path 和 PointArray 可能没有 dmove 方法，但它们有 bbox 方法，因此您可以编写自己的 dmove：

SVG.extend(SVG.PathArray, SVG.PointArray, {
  dmove: function (dx, dy) {
    var bbox = this.bbox()
    this.move(bbox.x + dx, bbox.y + dy)
    return this
  }
})

new SVG.PointArray('20,20 25,20 25,25 20,25').dmove(100, 100)

你不需要为此编写方法。你也可以用手来做。但是我发现直接添加功能更流畅