Skip to content

Commit a733fad

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent edb905c commit a733fad

2 files changed

Lines changed: 264 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<p>Tween animation primitives for React, maintained in the Ant Design ecosystem.</p>
66
</div>
77

8+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
9+
810

911
<div align="center">
1012

‎README.zh-CN.md‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
<div align="center">
2+
<h1>@rc-component/tween-one</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
5+
<p>🎬 React 补间动画基础组件。</p>
6+
</div>
7+
8+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
9+
10+
11+
<div align="center">
12+
13+
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
14+
15+
</div>
16+
17+
## 特性
18+
19+
- Declarative tween animation component for React elements and SVG.
20+
- Timeline, repeat, yoyo, path motion, SVG draw/morph, number animation, and group transition support.
21+
- 被 Ant Design 使用 motion examples and legacy animation demos.
22+
23+
## 安装
24+
25+
```bash
26+
npm install @rc-component/tween-one
27+
```
28+
29+
`rc-tween-one` is the legacy package name. New releases should use the scoped `@rc-component/tween-one` package.
30+
31+
## 使用
32+
33+
```tsx
34+
import TweenOne from '@rc-component/tween-one';
35+
36+
export default () => (
37+
<TweenOne animation={{ x: 100, opacity: 1 }} style={{ opacity: 0 }}>
38+
demo
39+
</TweenOne>
40+
);
41+
```
42+
43+
## Plugin APIs
44+
45+
```tsx
46+
import TweenOne, { Plugins } from '@rc-component/tween-one';
47+
import SvgDrawPlugin from '@rc-component/tween-one/es/plugin/SvgDrawPlugin';
48+
49+
Plugins.push(SvgDrawPlugin);
50+
51+
export default () => (
52+
<svg width="160" height="80">
53+
<TweenOne
54+
animation={{ SVGDraw: '100%' }}
55+
component="path"
56+
d="M0,40L160,40"
57+
style={{ fill: 'none', stroke: '#1677ff', strokeWidth: 8 }}
58+
/>
59+
</svg>
60+
);
61+
```
62+
63+
## 示例
64+
65+
- 本地文档：运行 `npm start`，并打开终端输出的 dumi 地址。
66+
- Pull Request 预览由 Vercel 和 Surge 发布。
67+
- Motion API docs: https://motion.ant.design/api/tween-one
68+
69+
## 浏览器支持
70+
71+
| Edge | Chrome | Firefox | Opera | Safari |
72+
| ------ | ---------- | ----------- | --------- | --------- |
73+
| IE 10+ | Chrome 31+ | Firefox 31+ | Opera 30+ | Safari 7+ |
74+
75+
## 本地开发
76+
77+
```bash
78+
npm install --legacy-peer-deps
79+
npm start
80+
```
81+
82+
Useful checks:
83+
84+
```bash
85+
npm run lint
86+
npm run tsc
87+
npm test
88+
npm run build
89+
npm run compile
90+
```
91+
92+
## 发布
93+
94+
```bash
95+
npm run prepublishOnly
96+
```
97+
98+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
99+
## API
100+
101+
<a href='https://motion.ant.design/api/tween-one' target='_blank'>中文文档</a>
102+
103+
### props
104+
105+
| name | type | default | description |
106+
| ---------------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
107+
| animation | object / array | null | animate configure parameters |
108+
| paused | boolean | false | animate timeline pause |
109+
| reverse | boolean | false | animate timeline revers |
110+
| delay | number | 0 | animate timeline delay |
111+
| repeat | number | 0 | `animation` all data repeat, To repeat indefinitely, use -1 |
112+
| repeatDelay | number | 0 | animate timeline repeat delay |
113+
| yoyo | boolean | false | `animation` all data alternating backward and forward on each repeat. |
114+
| onChange | func | null | when the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat }) |
115+
| onChangeTimeline | func | null | when the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat }) |
116+
| moment | number | null | set the current frame |
117+
| regionStartTime | number | 0 | Set the start time of the animation region |
118+
| regionEndTime | number | null | Set the end time of the animation region |
119+
| attr | boolean | false | attribute animation is `true`, when morph SVG must be `true`. |
120+
| resetStyle | boolean | false | update animation data, reset init style |
121+
| component | string / React.Element | `div` | component tag |
122+
| componentProps | object | null | component is React.Element, component tag props, not add `style` |
123+
124+
### animation = { }
125+
126+
> Basic animation param. please view [animation terms](https://motion.ant.design/language/animate-term)
127+
128+
| name | type | default | description |
129+
| ------------- | ------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------- |
130+
| [key: string] | `string` `number` `array` | null | All variables based on number, such as left, x, color, shadow |
131+
| type | string | `to` | play type: `to` `from` `set` |
132+
| duration | number | 450 | animate duration |
133+
| delay | number | 0 | animate delay |
134+
| repeat | number | 0 | animate repeat, To repeat indefinitely, use -1 |
135+
| repeatDelay | number | 0 | repeat start delay |
136+
| appearTo | number | null | Add to the specified time |
137+
| yoyo | boolean | false | `true`: alternating backward and forward on each repeat. |
138+
| ease | string | `easeInOutQuad` | animate ease [refer](http://easings.net/en) or svg path `M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0` |
139+
| bezier | object | null | bezier curve animate |
140+
| onStart | func | null | A function that should be called when the tween begins, callback(e), e: { index, target } |
141+
| onUpdate | func | null | A function that should be called every time the animate updates, callback(e), e: { index, targets, ratio } |
142+
| onComplete | func | null | A function that should be called when the animate has completed, callback(e), e: { index, targets } |
143+
| onRepeat | func | null | A function that should be called each time the animate repeats, callback(e), e: { index, targets } |
144+
145+
> Cannot be used at the same time `reverse` and `repeat: -1`.
146+
147+
### animation =[ ] is timeline
148+
149+
```js | pure
150+
<TweenOne animation={[{ x: 100 }, { y: 100 }]} />
151+
```
152+
153+
## Plugins
154+
155+
### SvgDrawPlugin
156+
157+
```js | pure
158+
import { Plugins } from '@rc-component/tween-one';
159+
import SvgDrawPlugin from '@rc-component/tween-one/es/plugin/SvgDrawPlugin';
160+
Plugins.push(SvgDrawPlugin);
161+
162+
<TweenOne animation={{ SVGDraw: '10%' }} />;
163+
```
164+
165+
SVGDraw = string or number;
166+
167+
{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be `%`;
168+
169+
### SvgMorphPlugin
170+
171+
```js | pure
172+
import { Plugins } from '@rc-component/tween-one';
173+
import SvgMorphPlugin from '@rc-component/tween-one/es/plugin/SvgMorphPlugin';
174+
Plugins.push(SvgMorphPlugin);
175+
176+
<TweenOne animation={{ SVGMorph: { path: '300,10 500,200 120,230 450,220 0,20' } }} />;
177+
```
178+
179+
#### SvgMorphPlugin API
180+
181+
| name | type | default | description |
182+
| ---------------- | ------ | ------- | ----------------------------------------------------------------------------------------------------- |
183+
| path | string | null | svg path, ref: `M0,0L100,0`; |
184+
| attr | string | null | Svg tag attributes, example: `polygon` is ` points`, `path` is `d`. |
185+
| maxSegmentLength | number | 0.5 | The lower the value, the smoother the generated animation will be, but at the expense of performance; |
186+
187+
### PathMotionPlugin
188+
189+
```js | pure
190+
import { Plugins } from '@rc-component/tween-one';
191+
import PathMotionPlugin from '@rc-component/tween-one/es/plugin/PathMotionPlugin';
192+
Plugins.push(PathMotionPlugin);
193+
194+
<TweenOne animation={{ PathMotion: { path: '300,10 500,200 120,230 450,220 0,20' } }} />;
195+
```
196+
197+
#### PathMotion API
198+
199+
| name | type | default | description |
200+
| -------- | ------------------- | --------------- | ---------------------------------------------- |
201+
| path | string / {x,y}[] | null | svg path, ref: `M0,0L100,0`; |
202+
| pathVars | IPathVars | null | Only valid if path is array `[{x, y}, {x, y}]` |
203+
| center | `number \ string[]` | `['50%','50%']` | center point, ref: `[50px, 50px]`; |
204+
| x | boolean | true | x follow the path. |
205+
| y | boolean | true | y follow the path. |
206+
| rotate | boolean | true | rotate follow the path. |
207+
208+
##### IPathVars
209+
210+
| name | type | default | description |
211+
| --------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
212+
| type | `thru \ soft \ cubic` | `thru` | path type. `thru` same as the path; `soft` with the curve of attraction facing them, but not through the point; `cubic` allows you to define standard Cubic Bezier, example: `[start, control, control, end]`. |
213+
| curviness | 0-2 | 1 | This determines how "curvy" the resulting path is. `0` is lines, `1` is curved path, `2` would make it much more curvy. It can be `1.5`. |
214+
| relative | boolean | false | Increase relative to current value. example: if the target's x starts at 100 and the path is `[{x:5}, {x:10}, {x:-2}]` , it would first move to `105`, then `115`, and finally end at `113`. |
215+
216+
### ChildrenPlugin
217+
218+
#### Children = { value:, floatLength, formatMoney };
219+
220+
| name | type | default | description |
221+
| ----------- | ------------------------------ | ------- | ------------------------- |
222+
| value | number | null | children number to value. |
223+
| floatLength | number | null | float precision length |
224+
| formatMoney | `true` \ { thousand, decimal } | null | format number to money. |
225+
226+
#### formatMoney = { thousand, decimal }
227+
228+
| name | type | default | description |
229+
| -------- | ------ | ------- | --------------- |
230+
| thousand | string | `,` | no explanation. |
231+
| decimal | string | `.` | no explanation. |
232+
233+
## TweenOneGroup
234+
235+
| name | type | default | description |
236+
| ------------------ | --------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
237+
| appear | boolean | true | whether support appear anim |
238+
| enter | object / array / func | `{ x: 30, opacity: 0, type: 'from' }` | enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim |
239+
| leave | object / array / func | `{ x: 30, opacity: 0 }` | leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim |
240+
| onEnd | func | - | one animation end callback |
241+
| animatingClassName | array | `['tween-one-entering', 'tween-one-leaving']` | className to every element of animating |
242+
| resetStyle | boolean | true | TweenOne resetStyle, reset the initial style when changing animation. |
243+
| exclusive | boolean | false | Whether to allow a new animate to execute immediately when switching. `enter => leave`: execute immediately leave |
244+
| component | React.Element/String | div | component tag |
245+
| componentProps | object | - | component tag props |
246+
247+
## 许可证
248+
249+
@rc-component/tween-one is released under the [MIT](./LICENSE) license.
250+
251+
[npm-image]: https://img.shields.io/npm/v/@rc-component/tween-one.svg?style=flat-square
252+
[npm-url]: https://www.npmjs.com/package/@rc-component/tween-one
253+
[github-actions-image]: https://github.com/react-component/tween-one/actions/workflows/main.yml/badge.svg
254+
[github-actions-url]: https://github.com/react-component/tween-one/actions/workflows/main.yml
255+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tween-one/master.svg?style=flat-square
256+
[codecov-url]: https://codecov.io/gh/react-component/tween-one/branch/master
257+
[download-image]: https://img.shields.io/npm/dm/@rc-component/tween-one.svg?style=flat-square
258+
[download-url]: https://www.npmjs.com/package/@rc-component/tween-one
259+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/tween-one
260+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/tween-one
261+
[dumi-url]: https://github.com/umijs/dumi
262+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

0 commit comments

Comments
 (0)