# react-motion

**Repository Path**: box3lab/react-motion

## Basic Information

- **Project Name**: react-motion
- **Description**: 适用于React的神岛UI动画框架
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-17
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 神奇代码岛 React UI 动画库

适用于 **神岛 Arena 客户端 UI** 的轻量 motion 动画库。

使用前提：

- 需在 **React** 项目中使用。
- 需配合 `@dao3fun/react-ui` 的组件一起使用：https://www.npmjs.com/package/@dao3fun/react-ui

详细教程：https://docs.box3lab.com/arenapro/zh/react-motion

该包提供：

- **`useMotion`**：基于关键帧的样式动画（支持缓动、循环、yoyo、外部进度驱动）。
- **`useTimeline`**：轻量时间轴（setInterval 驱动），用于手动/自动推进进度。
- **`useMotionOrchestrator`**：编排多个 motion（parallel/sequence/stagger），并返回可取消的播放句柄。

## 安装

```sh
npm install @dao3fun/react-motion
```

## 快速上手

```tsx
import React from 'react';
import { Box } from '@dao3fun/react-ui';
import { useMotion } from '@dao3fun/react-motion';

export function App() {
  const [style] = useMotion({
    to: [
      { value: { backgroundOpacity: 0 }, duration: 200, ease: 'quadOut' },
      { value: { backgroundOpacity: 1 }, duration: 300, ease: 'easeOut' },
    ],
    autoPlay: true,
  });

  return <Box style={style} />;
}
```

## TypeScript

该包基于 TypeScript 编写，并提供类型定义（`EasingFn`、`MotionKeyframe`、`UseMotionOptions` 等）。