Skip to content
专业版
FaAnimatedBeam 动画光束
动态光束连接组件，用于在两个元素之间创建流动的动画光束效果，适合展示元素之间的关联关系。
使用场景
- 技术栈关联展示
- 数据流向可视化
- 架构图连接关系
- 功能模块关联图
- 思维导图连接线
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
containerRef | HTMLElement | null | 必需 | 容器元素引用 |
fromRef | HTMLElement | null | 必需 | 起点元素引用 |
toRef | HTMLElement | null | 必需 | 终点元素引用 |
curvature | number | 0 | 光束曲率（弧度） |
reverse | boolean | false | 是否反向动画 |
pathColor | string | 'gray' | 路径颜色 |
pathWidth | number | 2 | 路径宽度 |
pathOpacity | number | 0.2 | 路径透明度 |
dotted | boolean | false | 是否虚线样式 |
dotSpacing | number | 6 | 虚线点间距 |
gradientStartColor | string | '#FFAA40' | 渐变起始色 |
gradientStopColor | string | '#9C40FF' | 渐变终止色 |
delay | number | 0 | 动画延迟（秒） |
duration | number | 4-7 | 动画持续时间（秒） |
startXOffset | number | 0 | 起点 X 偏移 |
startYOffset | number | 0 | 起点 Y 偏移 |
endXOffset | number | 0 | 终点 X 偏移 |
endYOffset | number | 0 | 终点 Y 偏移 |
class | HTMLAttributes['class'] | - | 自定义 CSS 类 |
注意事项
- 必需引用：
containerRef、fromRef、toRef都是必需的，需要使用useTemplateRef获取 DOM 引用 - 容器定位：容器元素必须设置为
relative定位，光束使用绝对定位 - 响应式更新：组件会自动监听容器和元素位置变化，自动更新路径
- 动画方向：组件会自动检测光束方向（水平/垂直）并调整动画方向
- 性能优化：使用 ResizeObserver 监听容器大小变化，避免频繁重绘
- Z 轴层级：光束元素使用
pointer-events-none，不会影响鼠标事件 - 曲率效果：正曲率向下弯曲，负曲率向上弯曲