如何在 cytoscape.js 中将边缘动画循环到行军蚂蚁

Question

如何使边缘像行军蚂蚁一样动画并将其指向目标节点？

我尝试像这样使用line-dash-offset 属性，但它没有循环。

风格

{
      selector: "edge",
      style: {
        "curve-style": "taxi",
        width: 2,
        "target-arrow-shape": "triangle",
        "target-arrow-color": "#9dbaea",
        "line-style": "dashed",
        "line-dash-pattern": [8, 4],
      }
    }

动画

let loopAnimation = eles => {
  eles.animation(
      {
        style: {
          "line-dash-offset": 24,
          "line-dash-pattern": [8, 4],
        }
      },
      {
        duration: 1000
      }
  ).play().promise('complete').then(() => loopAnimation(eles))
};

cy.edges().forEach(loopAnimation);

Answer 1

我可以在你播放之前调用 reverse() 来解决这个问题

let loopAnimation = eles => {
  const ani = eles.animation(
      {
        style: {
          "line-dash-offset": 24,
          "line-dash-pattern": [8, 4],
        }
      },
      {
        duration: 1000
      }
  );

  ani.reverse().play().promise('complete').then(() => loopAnimation(eles))
};