ROX Components

ROX Components 是一个基于 React 的组件库，提供了丰富的动画和交互组件。

安装

npm install @a-drowned-fish/rox-components

组件列表

• AnimationJSON
• Animate
• ArrowBar
• BgBox
• Canvas
• ChangeCard
• DebounceScale
• Fade
• FadeImage
• FadeIn
• FadeText
• FadeText2
• Fly
• LoadGif
• Loading
• Progress
• Scale
• ScaleImage
• SlideRight
• SlideUp
• SwitchCard
• TapScale
• Touch

组件文档

AnimationJSON

| 属性 | 类型 | 默认值 | 描述 | | ------------------ | ---------------------------------------------------- | ---------- | -------------------- | | path | string | - | 动画 JSON 文件路径 | | needRerender | boolean | false | 是否需要重新渲染动画 | | startFrame | number | 0 | 动画开始帧 | | endFrame | number | - | 动画结束帧 | | className | string | "" | 容器类名 | | onEnd | () => void | () => null | 动画结束回调 | | gtKeyFrameListener | { frame: number; handler?: (frame: number) => void } | - | 关键帧监听器 |

方法

| 方法 | 参数 | 描述 | | -------- | ------------------------------------------------------------------------- | ---------------- | | play | - | 播放动画 | | pause | - | 暂停动画 | | continue | bool: boolean | 继续播放动画 | | stop | - | 停止动画 | | set | frame?: number | 设置动画到指定帧 | | destroy | - | 销毁动画 | | update | path: (string | number)[], documentData: TextDocumentData, index: number | 更新动画文本数据 |

Animate

动画包装组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | -------- | --------------- | ------ | ------ | | children | React.ReactNode | - | 子组件 |

ArrowBar

箭头栏组件，结合了 Canvas。

属性

| 属性 | 类型 | 默认值 | 描述 | | ----------- | --------------- | ------ | --------------- | | children | React.ReactNode | - | 子组件 | | canvasProps | CanvasProps | - | Canvas 组件属性 |

BgBox

背景图片盒子组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | ------------ | --------------- | ------ | ------------- | | children | React.ReactNode | - | 子组件 | | className | string | - | 容器类名 | | src | string | - | 背景图片路径 | | alt | string | - | 图片 alt 文本 | | imgClassName | string | - | 图片类名 |

Canvas

画布组件。

ChangeCard

卡片切换动画组件，用于展示一系列卡片并提供切换效果。

属性

| 属性 | 类型 | 默认值 | 描述 | | ------------- | -------------------------------------------- | ------ | ------------------- | | dataSource | T[] | - | 数据源数组 | | renderItem | (item: T, index?: number) => React.ReactNode | - | 渲染每个项目的函数 | | frontSrc | string | - | 卡片正面背景图片 | | genKey | (item: T, index?: number) => React.Key | - | 生成项目 key 的函数 | | gap | string | number | 10 | 卡片间距 | | bgSrc | string | - | 卡片背面背景图片 | | itemClassName | string | - | 项目类名 | | itemStyle | React.CSSProperties | - | 项目样式 | | exchangeNode | React.ReactNode | - | 交换节点 |

方法

| 方法 | 参数 | 描述 | | ---------------- | ---- | ---------------- | | exchange | - | 执行卡片交换动画 | | showExchangeNode | - | 显示交换节点 | | hideExchangeNode | - | 隐藏交换节点 |

Fade

淡入淡出动画组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | --------- | --------------- | ------ | -------------------- | | children | React.ReactNode | - | 子组件 | | visible | boolean | true | 是否可见 | | duration | number | 300 | 动画持续时间（毫秒） | | className | string | "" | 容器类名 | | onClick | () => void | - | 点击事件处理函数 |

Loading

全局加载组件，使用 React Portal 渲染到 body。

属性

| 属性 | 类型 | 默认值 | 描述 | | ----------------------- | --------------------------------- | ------ | ---------------- | | children | React.ReactNode | - | 子组件 | | className | string | - | 容器类名 | | loading | boolean | - | 是否显示加载 | | loadingComponent | React.ReactNode | - | 自定义加载组件 | | duration | number | 20 | 动画持续时间 | | defaultLoadingComponent | { size?: number; color?: string } | {} | 默认加载组件属性 |

Scale

缩放动画组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | --------- | --------------- | ------ | -------------------- | | children | React.ReactNode | - | 子组件 | | visible | boolean | true | 是否可见 | | duration | number | 300 | 动画持续时间（毫秒） | | className | string | "" | 容器类名 |

SlideRight

向右滑动动画组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | --------- | --------------- | ------ | -------------------- | | children | React.ReactNode | - | 子组件 | | visible | boolean | true | 是否可见 | | duration | number | 300 | 动画持续时间（毫秒） | | className | string | "" | 容器类名 | | ease | EaseType | - | 缓动函数类型 |

SlideUp

向上滑动动画组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | --------- | --------------- | ------ | -------------------- | | children | React.ReactNode | - | 子组件 | | visible | boolean | true | 是否可见 | | duration | number | 300 | 动画持续时间（毫秒） | | className | string | "" | 容器类名 |

TapScale

点击缩放动画组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | --------- | --------------- | ------ | -------------------- | | children | React.ReactNode | - | 子组件 | | scale | number | 0.95 | 缩放比例 | | duration | number | 100 | 动画持续时间（毫秒） | | className | string | "" | 容器类名 | | onClick | () => void | - | 点击事件处理函数 |

Touch

触摸事件处理组件。

属性

| 属性 | 类型 | 默认值 | 描述 | | -------------- | ----------------- | ------ | ------------ | | children | React.ReactNode | - | 子组件 | | onTouchStart | TouchEventHandler | - | 触摸开始事件 | | onTouchMove | TouchEventHandler | - | 触摸移动事件 | | onTouchEnd | TouchEventHandler | - | 触摸结束事件 | | className | string | - | 容器类名 | | htmlAttributes | HTMLAttributes | - | HTML 属性 |