邊緣動畫

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 hook 中設定的。這樣即使重新計算邊緣路徑（例如，當拖曳來源或目標節點時），動畫也可以繼續平穩播放。