antv g6 边的动态动画

AntV G6 边的动态动画可以使用 G6 内置的动画效果或者外部动画库配合 G6 实现。以下是一些常见的边动态动画效果示例：

1. 边闪烁动画

const edge = graph.getEdges()[0];
const path = edge.getKeyShape();
path.animate({
  onFrame: ratio => {
    const opacity = ratio > 0.5 ? 1 - (ratio - 0.5) * 2 : ratio * 2;
    return { opacity };
  },
  repeat: true,
  duration: 1000
});

在上面的代码中，我们获取了第一条边，并使用 `path.animate()` 方法实现了一个边闪烁的动画效果。动画效果通过修改边的透明度实现，使用了 G6 内置的动画效果，重复播放时长为 1000ms。

2. 边流动动画

const edge = graph.getEdges()[0];
const path = edge.getKeyShape();
path.animate({
  onFrame: ratio => {
    const length = path.getTotalLength();
    const start = length * ratio;
    const end = start + length / 2;
    const subPath = path.getSubpath(start, end);
    return { path: subPath };
  },
  repeat: true,
  duration: 2000
});

在上面的代码中，我们获取了第一条边，并使用 `path.animate()` 方法实现了一个边流动的动画效果。动画效果通过截取一段边路径实现，使用了 G6 内置的动画效果，重复播放时长为 2000ms。

3. 边弹性动画

const edge = graph.getEdges()[0];
const path = edge.getKeyShape();
path.animate({
  onFrame: ratio => {
    const length = path.getTotalLength();
    const start = length * ratio;
    const end = start + length / 2;
    const subPath = path.getSubpath(start, end);
    const point = path.getPoint(0.5);
    const dx = point.x - path.getStartTangent().x;
    const dy = point.y - path.getStartTangent().y;
    const angle = Math.atan2(dy, dx);
    const x = point.x + Math.sin(angle) * (length / 2 * Math.sin(ratio * Math.PI));
    const y = point.y - Math.cos(angle) * (length / 2 * Math.sin(ratio * Math.PI));
    return { path: subPath, endArrow: true, target: { x, y } };
  },
  repeat: true,
  duration: 2000
});

在上面的代码中，我们获取了第一条边，并使用 `path.animate()` 方法实现了一个边弹性的动画效果。动画效果通过截取一段边路径实现，同时根据路径上的点和起始切线计算出目标点的位置，使用了 G6 内置的动画效果，重复播放时长为 2000ms。