节点位置动画

此示例演示了如何在不同的图表布局之间创建流畅的动画过渡。当你点击 “切换布局” 按钮时，节点会平滑地移动到新的位置，从而以极具视觉吸引力的方式在不同布局之间切换。

¥This example demonstrates how to create fluid, animated transitions between different graph layouts. When you click the “toggle layout” button, nodes smoothly animate to their new positions, creating a visually appealing way to switch between different arrangements.

关于此 Pro 示例

¥About this Pro Example

• 依赖：@xyflow/react , d3-timer 

  ¥Dependencies: @xyflow/react , d3-timer 

• 实现可重用的 useAnimatedNodes 钩子，以实现平滑过渡

  ¥Implements a reusable useAnimatedNodes hook for smooth transitions

• 使用线性插值来为节点位置添加动画

  ¥Uses linear interpolation to animate node positions

• 演示水平和垂直布局之间的位置补间

  ¥Demonstrates position tweening between horizontal and vertical layouts

• 提供一个简单的切换控件，用于在不同布局之间切换

  ¥Provides a simple toggle control to switch between different layouts

• React Flow 从版本 12 开始支持服务器端渲染。

  ¥React Flow supports server-side rendering since version 12

• 许可证：xyflow 专业版许可证 

  ¥License: xyflow Pro License