Question

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

我期望，如果在plot之后将dmove和animate链接在一起，那么我的路径将从原始几何图形动画化为最终的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()的评估早于您想要的。在从输入和bbox中计算出新坐标之后，dmove会直接映射到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)

Ofc，您无需为此编写方法。您也可以手动完成。但是我发现直接添加功能更加顺畅

svg.js对组合图和dmove进行动画处理

1 个答案: