javascript - 使用动画更改组中的 svg.js 文本

Question

我有两个功能。第一个创建一个组，画一条线，将一行添加到组中，获取其坐标并将其显示在文本行下方，文本也会添加到组中。其次，为运动组设置动画。

  animate: function(x, y, draw) {
    this.group.animate(1000, '-', 0).move(x, y);
  },

  linePainting: function(x1, y1, x2, y2, x3, y3, textY, draw, color) {
    this.group = draw.group().x(x1).y(y1);
    this.line = draw.line(x2, y2, x3, y3).stroke({ width: 1, color: "#" + color });
    this.group.add(this.line);
    pos = this.group.x().toFixed(1);
    this.text = this.group.add(draw.text(pos.toString()).x(-10).y(textY));
  },

如何在 1 次调用动画之后，函数 linePainting 仅被调用一次。

我有 2 个问题。

1. 如何更改组中的文本？
2. 可以为文本添加动画吗？例如，如果有100个，下面的数字为150，能够在一秒之内顺利地从100到150。

我非常希望问题的答案Wout)

Answer 1

首先:您在 this.text 中放入了一些内容，但这不是您想象的文本，而是组，因为 add() 返回 this > 而不是添加的元素。

使用put()来取回文本。

现在您只需调用 this.text.text('new Text') 即可更改文本。

第二:没有什么比文本变形更好的了(如何实现它？)。但您可以轻松地将每个动画步骤的文本更改为另一个数字。

看看svg.textmorph.js这使得文本可以动画化。您需要一个 svg 字体。