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

var cy = cytoscape({
  container: document.getElementById('cy'), // 图形容器的DOM元素
  elements: [], // 图形数据
  style: [ // 图形样式
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: { // 图形布局
    name: 'grid',
    rows: 1
  }
});

// 添加节点
cy.add([
  { data: { id: 'A' } },
  { data: { id: 'B' } },
  { data: { id: 'C' } },
  { data: { id: 'D' } }
]);

// 添加边缘
cy.add([
  { data: { id: 'AB', source: 'A', target: 'B' } },
  { data: { id: 'BC', source: 'B', target: 'C' } },
  { data: { id: 'CD', source: 'C', target: 'D' } },
  { data: { id: 'DA', source: 'D', target: 'A' } }
]);

function animateAnt() {
  var edges = cy.edges(); // 获取所有边缘
  
  edges.forEach(function(edge, i) {
    var animateTime = 1000; // 动画持续时间
    var delay = i * animateTime; // 每个边缘的延迟时间
    
    edge.delay(delay).animate({
      style: { 'line-color': '#f00' } // 更新边缘的样式
    }, {
      duration: animateTime,
      complete: function() {
        // 当动画完成后，重置边缘的样式
        edge.style('line-color', '#ccc');
        
        // 递归调用动画函数，实现循环效果
        animateAnt();
      }
    });
  });
}

// 调用动画函数，开始循环边缘动画
animateAnt();