边缘动画

React Flow 为默认边缘类型提供了一个简单的内置动画，但可以通过使用自定义边缘来创建更高级的动画。以下是展示边缘路径在不同方式下使用的一些示例。

动画 SVG 元素

可以使用 <animateMotion /> 元素沿路径对 SVG 元素进行动画处理。此示例创建一个自定义边缘，沿着边缘路径对圆形进行动画处理。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

动画处理其他节点

如果你想对边缘之外的更多 SVG 进行动画处理，可以使用 Web Animations API。此示例演示了如何使用 offsetPath 属性和动画 offsetDistance 属性，在流程中沿边缘路径对另一个节点进行动画处理。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

此示例中有一些重要的细节需要注意

• 动画节点的 draggable 属性在动画运行期间设置为 false。这样可以防止用户移动节点，从而破坏动画路径。

• 动画路径和动画本身是在单独的 useEffect 钩子中设置的。这样即使边缘路径被重新计算（例如当源节点或目标节点被拖动时），动画也能继续平滑播放。