antv g6 线的动画例子

以下是一个使用AntV G6绘制动态线条的示例代码：

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'node1',
      x: 50,
      y: 50,
    },
    {
      id: 'node2',
      x: 150,
      y: 150,
    },
  ],
  edges: [
    {
      id: 'edge1',
      source: 'node1',
      target: 'node2',
    },
  ],
};

const container = document.getElementById('container');

const width = container.scrollWidth;
const height = container.scrollHeight || 500;

const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultNode: {
    size: 20,
    style: {
      fill: '#C6E5FF',
      stroke: '#5B8FF9',
    },
  },
  defaultEdge: {
    style: {
      stroke: '#e2e2e2',
    },
  },
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
});

graph.data(data);
graph.render();

const path = G6.Util.getPath(data.edges[0], data.nodes);
const points = G6.Util.getControlPoints(path);

const line = graph.getShape(data.edges[0].id);
const animateCfg = {
  duration: 5000,
  easing: 'easeLinear',
  onFrame(ratio) {
    const tmpPath = G6.Util.getLinePath(points, ratio);
    line.attr('path', tmpPath);
  },
  repeat: true,
};
line.animate(animateCfg);

这个示例绘制了两个节点和一条连接它们的边。然后，它获取该边的路径和控制点，并使用 `getLinePath` 方法在路径上绘制动态线条。最后，使用 `animate` 方法将线条动画化。