安装
示例
单向动画光束
双向动画光束
多输入动画光束
多输出动画光束
用法
import { AnimatedBeam } from "@/components/magicui/animated-beam";<AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />属性
动画光束
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 组件的类名。 |
containerRef | ref | - | 容器引用。 |
fromRef | ref | - | 光束应开始的元素的引用。 |
toRef | ref | - | 光束应结束的元素的引用。 |
curvature | number | 0 | 光束的曲率。 |
反向 | 布尔值 | 否 | 光束是否应反向。 |
持续时间 | number | 5 | 光束的持续时间。 |
delay | number | 0 | 光束的延迟时间。 |
pathColor | string | 灰色 | 光束的颜色。 |
pathWidth | number | 2 | 光束的宽度。 |
pathOpacity | number | 0.2 | 光束的不透明度。 |
gradientStartColor | string | #ffaa40 | 渐变的起始颜色。 |
gradientStopColor | string | #9c40ff | 渐变的终止颜色。 |
startXOffset | number | 0 | 光束的起始 x 偏移。 |
startYOffset | number | 0 | 光束的起始 y 偏移。 |
endXOffset | number | 0 | 光束的结束 x 偏移。 |
endYOffset | number | 0 | 光束的结束 y 偏移。 |
致谢
- 感谢 @itsarghyadas 找出了其基础实现！