ReactFlow自定义动画连接线开发：替换官方默认虚线动画

要实现类似示例中的流动式连接线动画，不用ReactFlow自带的animated: true虚线效果，你可以通过自定义CSS动画结合边的样式配置来实现，具体步骤如下：

1. 定义CSS动画 #

首先在样式文件中编写实现流动效果的关键帧动画，核心是利用SVG的stroke-dasharray和stroke-dashoffset属性模拟线条流动：

@keyframes flowAnimation {
  0% {
    stroke-dashoffset: 100%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

.custom-flow-edge {
  stroke: #4ade80; /* 基础线条颜色 */
  stroke-width: 4;
  stroke-dasharray: 10 5; /* 控制流动段的长度和间隔 */
  animation: flowAnimation 2s linear infinite;
}

如果想要更贴近示例的渐变流动效果，可以调整为渐变描边配合动画：

@keyframes gradientFlow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}

.custom-gradient-edge {
  stroke: url(#flow-gradient);
  stroke-width: 4;
  stroke-dasharray: 20;
  animation: gradientFlow 3s linear infinite;
}

同时在全局添加渐变定义（可放在ReactFlow组件外层）：

<svg style={{ position: 'absolute', width: 0, height: 0 }}>
  <defs>
    <linearGradient id="flow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3b82f6" />
      <stop offset="50%" stop-color="#8b5cf6" />
      <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>
</svg>

2. 在ReactFlow中应用动画 #

你有两种方式将动画应用到连接线上：

方式一：直接通过边的style属性注入动画 #

在设置边时，把动画样式直接写入style对象：

setEdges((eds) => [
  ...eds,
  {
    source: 2,
    targetHandle: 'bottom',
    target: 1,
    sourceHandle: 'top',
    id: 'custom-edge-1',
    type: 'smoothstep',
    style: {
      stroke: '#4ade80',
      strokeWidth: 4,
      strokeDasharray: '10 5',
      animation: 'flowAnimation 2s linear infinite',
    },
  },
]);

方式二：自定义边组件（更灵活） #

如果需要更复杂的样式控制，建议自定义边组件，直接给SVG路径添加类名：

import { SmoothStepEdge } from 'reactflow';

const CustomAnimatedEdge = (props) => {
  return (
    <SmoothStepEdge
      {...props}
      style={{ ...props.style, className: 'custom-flow-edge' }}
    />
  );
};

// 在ReactFlow组件中注册自定义边
<ReactFlow
  edges={edges}
  edgeTypes={{
    customAnimated: CustomAnimatedEdge,
  }}
  // 其他配置...
/>

// 设置边时指定自定义类型
setEdges((eds) => [
  ...eds,
  {
    source: 2,
    targetHandle: 'bottom',
    target: 1,
    sourceHandle: 'top',
    id: 'custom-edge-1',
    type: 'customAnimated',
  },
]);

注意事项 #

• 调整stroke-dasharray的值可以改变流动段的长度和间隔，让动画更贴合需求
• 使用渐变时，需确保渐变定义在全局SVG的defs中，保证ReactFlow的SVG能访问到
• 不同边类型（如smoothstep、bezier）对动画兼容性一致，最终都是渲染SVG路径

内容的提问来源于stack exchange，提问作者Ahsan Baloch