エッジのアニメーション

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フックで設定されています。これにより、エッジパスが再計算された場合でも（たとえば、ソースノードまたはターゲットノードがドラッグされた場合）、アニメーションはスムーズに再生され続けます。