antv x6沿边运动的动画

实现效果

要实现什么时候开始有运动小圆球的出现：1.在graph添加了内容之后，也就是可以看到图之后，让小圆球流动起来。2.再点击node的时候增加一个圆球。

需求 1实现原理是，graph.fromJSON(this.graphData);添加之后，使用getNodes()获取所有节点，可根据节点存入的标识字段，找出默认开始的节点，代码如下：（这里可以看到一个自定义方法的使用graph.on("signal")),其中会利用getTargetCell找到节点的下一个连接点，继续添加动画小球。）

// 找到图里面的起始点
    graph.getNodes().filter((node) => {
      const data = node.getData();
      if (data && data.start) {
        trigger(start);
      }
});
 // 起始函数
    const trigger = (start) => {
      graph.trigger("signal", start);
      if (!manual) {
        setTimeout(trigger, 5000);
      }
    };
graph.on("signal", (cell) => {
      if (cell.isEdge()) {
        const view = graph.findViewByCell(cell);
        if (view) {
          const token = Vector.create("circle", { r: 6, fill: "#1A7AD6" });
          const target = cell.getTargetCell();
          setTimeout(() => {
            view.sendToken(token.node, 2000, () => {
              if (target) {
                graph.trigger("signal", target);
              }
            });
          }, 300);
        }
      } else {
        // flash(cell);
        const edges = graph.model.getConnectedEdges(cell, {
          outgoing: true,
        });
        edges.forEach((edge) => graph.trigger("signal", edge));
      }
    });

需求2，点击节点时候添加小球。就是添加节点的点击监听，再去调用自定义方法graph.on("signal"))

graph.on("node:mousedown", ({ cell }) => {
      manual = true;
      graph.trigger("signal", cell);
    });

 前段时间有利用antv x6开发的完整编辑器代码。感兴趣的可留言，分享哟