快速开始 · 4 步

快速开始

安装包，渲染第一个组件，把你的数据交给组件，并选择它的动效方式。任何一步都不需要 Provider 或配置。

1
安装
Chorus 需要 React 19.2 或更高版本。在 React Native 应用中，React Native 是可选的 peer 依赖，同一个包会自动选择原生构建。
$
```
npm install @kkwaenggwari/animated-chorus
```
无需其他配置：不需要添加 Provider、插件或样式表。
2
你的第一个组件
用 state 中的值渲染 MotionNumber。改变 state，数字就会滚动。先按 +1，再按 ×10，看新的位数滚进来。
App.jsx
```
import { useState } from 'react';
import { MotionNumber } from '@kkwaenggwari/animated-chorus';

export default function App() {
  const [count, setCount] = useState(9);
  return (
    <button onClick={() => setCount(count + 1)}>
      <MotionNumber value={count} />
    </button>
  );
}
```
正在准备示例…
在设置中把 mode 切换为 roll：变化的位数会经过中间的数字滚动。

交给它你的数据

显示多项内容的组件接收一个数组。items 是你的数据，getKey 返回稳定的 key（默认为 item.id，字符串和数字则是其本身），renderItem 绘制每一项。组件会替你渲染并测量各项元素。

Tabs.jsx

import { MotionHighlight } from '@kkwaenggwari/animated-chorus';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
];

export function Tabs({ tab, setTab }) {
  // Keys come from item.id; labels from item.label, or renderItem.
  return <MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;
}

key 必须唯一。数组变化时，只有新增、移除或移动的项才会动。

选择动效方式

每个组件都接受 transition：时间曲线或弹簧。motionTokens 提供了几种预设，指定了 duration 的弹簧会被校准为恰好在那一刻结束。

Panel.jsx

import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';

<MotionHeight open={open} transition={motionTokens.spring.gentle}>…</MotionHeight>
<MotionHeight open={open} transition={{ duration: 300, easing: 'easeOut' }}>…</MotionHeight>
<MotionHeight open={open} transition={{ tempo: 'spring', spring: { stiffness: 300, damping: 30 }, duration: 500 }}>…</MotionHeight>

React Native 使用相同的 import 和相同的 props。

配置就这些

剩下的就是挑选组件。每个组件都有工作台，可以先调好再复制代码。

安装

你的第一个组件

交给它你的数据

选择动效方式

配置就这些