动画什么时候出现

Question

在 svg.js 中首次尝试制作动画。非常简单，独立运行也很好。只需为从 A 到 B 绘制一条线设置动画。从 A 处的零长度线开始，将端点设置为 B 的动画，将起点设置为 B 的动画。我使用第 4 个参数（线性缓动“-”）来设置动画（）通过查看 CodePen 上 svg.js 的示例之一 - 我没有看到它以这种方式记录。

let beam = canvas.line(new SVG.PointArray(
    [[100, 100], [100, 100]]
    ));
beam.stroke({ width: 10, color: '#00ff00', linecap: 'round' });
  
beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray(
    [[100, 100], [200, 200]]
    ));

beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray(
    [[200, 200], [200, 200]]
    ));

尽管我尝试在真实应用程序的上下文中使用它，但我没有看到任何反应。不线，什么都没有。我的一个想法是，这段代码是从事件侦听器（在客户端中）调用的，并且服务器可能会快速连续地向客户端发送大量消息——其中任何一个的动画持续时间都长于两者之间的时间传入消息事件。动画不必与消息完美同步，它们最终必须按顺序发生。

我不清楚主事件循环中动画何时发生。也就是说，它如何与鼠标 clicks/movement、socket.io 消息等其他事件竞争。我还没有找到关于这一切如何工作的良好入门，所以我正在寻找指向 material 我可以阅读它，以及关于如何调试未显示的行的任何想法。

Answer 1

How can you tell when an animation has finished?

let runner = beam.animate(250, 0, 'after', '-').plot(new SVG.PointArray(
    [[200, 200], [200, 200]]
    ));
runner.on('finish', myFunction);

或

runner.after(myFunction);

动画什么时候出现

When does animation happen

svg.js