ROX Components

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

安装

``bash
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

组件文档

$3

| 属性 | 类型 | 默认值 | 描述 |
| ------------------ | ---------------------------------------------------- | ---------- | -------------------- |
| 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 | 更新动画文本数据 |

$3

动画包装组件。

#### 属性

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

$3

箭头栏组件，结合了 Canvas。

#### 属性

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

$3

背景图片盒子组件。

#### 属性

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

$3

画布组件。

$3

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

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
| ------------- | -------------------------------------------- | ------ | ------------------- |
| 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 | - | 隐藏交换节点 |

$3

淡入淡出动画组件。

#### 属性

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

$3

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

#### 属性

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

$3

缩放动画组件。

#### 属性

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

$3

向右滑动动画组件。

#### 属性

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

$3

向上滑动动画组件。

#### 属性

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

$3

点击缩放动画组件。

#### 属性

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

$3

触摸事件处理组件。

#### 属性

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