Skip to content

Commit ffd4de4

Browse files
jljsj33jljsj33
committed
update README
1 parent 9f17c16 commit ffd4de4

File tree

2 files changed

+233
-231
lines changed

2 files changed

+233
-231
lines changed

‎README.md

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
2+
# rc-tween-one
3+
---
4+
5+
React TweenOne Component
6+
7+
8+
[![NPM version][npm-image]][npm-url]
9+
[![build status][github-actions-image]][github-actions-url]
10+
[![Codecov][codecov-image]][codecov-url]
11+
[![node version][node-image]][node-url]
12+
[![npm download][download-image]][download-url]
13+
14+
[npm-image]: http://img.shields.io/npm/v/rc-tween-one.svg?style=flat-square
15+
[npm-url]: http://npmjs.org/package/rc-tween-one
16+
[github-actions-image]: https://github.com/react-component/tween-one/workflows/CI/badge.svg
17+
[github-actions-url]: https://github.com/react-component/tween-one/actions
18+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tween-one/master.svg?style=flat-square
19+
[codecov-url]: https://codecov.io/gh/react-component/tween-one/branch/master
20+
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
21+
[node-url]: http://nodejs.org/download/
22+
[download-image]: https://img.shields.io/npm/dm/rc-tween-one.svg?style=flat-square
23+
[download-url]: https://npmjs.org/package/rc-tween-one
24+
25+
26+
## Browser Support
27+
28+
|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|
29+
| --- | --- | --- | --- | --- |
30+
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
31+
32+
## Development
33+
34+
```
35+
npm install
36+
npm start
37+
```
38+
39+
## Example
40+
41+
http://localhost:8100/examples/
42+
43+
http://react-component.github.io/tween-one/
44+
45+
46+
## install
47+
48+
49+
[![rc-tween-one](https://nodei.co/npm/rc-tween-one.png)](https://npmjs.org/package/rc-tween-one)
50+
51+
52+
## Usage
53+
54+
```js | pure
55+
var TweenOne = require('rc-tween-one');
56+
var React = require('react');
57+
React.render(<TweenOne animation={{x:100}}>
58+
demo
59+
</TweenOne>, container);
60+
```
61+
62+
### Plugin
63+
64+
```js | pure
65+
var TweenOne = require('rc-tween-one');
66+
var React = require('react');
67+
var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
68+
TweenOne.plugins.push(SvgDrawPlugin);
69+
React.render(<svg width="600" height="600">
70+
<TweenOne
71+
animation={{ SVGDraw:'50%'}}
72+
d="M0,0L100,0"
73+
style={{ fill: 'none', strokeWidth: 20, stroke: '#00000' }}
74+
component="path"
75+
/>
76+
</svg>, container);
77+
```
78+
79+
### TweenOneGroup
80+
```js | pure
81+
var TweenOne = require('rc-tween-one');
82+
var React = require('react');
83+
var TweenOneGroup = TweenOne.TweenOneGroup;
84+
React.render(<TweenOneGroup>
85+
<div key="0">demo</div>
86+
<div key="1">demo</div>
87+
</TweenOneGroup>, container);
88+
```
89+
90+
## API
91+
92+
<a href='https://motion.ant.design/api/tween-one' target='_blank'>中文文档</a>
93+
94+
### props
95+
96+
| name | type | default | description |
97+
|------------|----------------|---------|----------------|
98+
| animation | object / array | null | animate configure parameters |
99+
| paused | boolean | false | animate timeline pause |
100+
| reverse | boolean | false | animate timeline revers |
101+
| delay number | 0 | animate timeline delay |
102+
| repeat | number | 0 | `animation` all data repeat, To repeat indefinitely, use -1 |
103+
| repeatDelay | number | 0 | animate timeline repeat delay |
104+
| yoyo | boolean | false | `animation` all data alternating backward and forward on each repeat. |
105+
| onChange | func | null | when the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat }) |
106+
| onChangeTimeline | func | null | when the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat }) |
107+
| moment | number | null | set the current frame |
108+
| regionStartTime | number | 0 | Set the start time of the animation region |
109+
| regionEndTime | number | null | Set the end time of the animation region |
110+
| attr | boolean | false | attribute animation is `true`, when morph SVG must be `true`. |
111+
| resetStyle | boolean | false | update animation data, reset init style |
112+
| component | string / React.Element | `div` | component tag |
113+
| componentProps | object | null | component is React.Element, component tag props, not add `style` |
114+
115+
116+
### animation = { }
117+
118+
> Basic animation param. please view [animation terms](https://motion.ant.design/language/animate-term)
119+
120+
| name | type | default | description |
121+
|------------|----------------|---------|----------------|
122+
| [key: string] | `string` `number` `array` | null | All variables based on number, such as left, x, color, shadow |
123+
| type | string | `to` | play type: `to` `from` `set`|
124+
| duration | number | 450 | animate duration |
125+
| delay | number | 0 | animate delay |
126+
| repeat | number | 0 | animate repeat, To repeat indefinitely, use -1 |
127+
| repeatDelay| number | 0 | repeat start delay |
128+
| appearTo | number | null | Add to the specified time |
129+
| yoyo | boolean | false | `true`: alternating backward and forward on each repeat. |
130+
| 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` |
131+
| bezier | object | null | bezier curve animate |
132+
| onStart | func | null | A function that should be called when the tween begins, callback(e), e: { index, target } |
133+
| onUpdate | func | null | A function that should be called every time the animate updates, callback(e), e: { index, targets, ratio } |
134+
| onComplete | func | null | A function that should be called when the animate has completed, callback(e), e: { index, targets } |
135+
| onRepeat | func | null | A function that should be called each time the animate repeats, callback(e), e: { index, targets } |
136+
137+
> Cannot be used at the same time `reverse` and `repeat: -1`.
138+
139+
### animation =[ ] is timeline
140+
```js | pure
141+
<TweenOne animation={[{ x: 100 }, { y: 100 }]} />
142+
```
143+
## Plugins
144+
### SvgDrawPlugin
145+
146+
```js | pure
147+
import { Plugins } from 'rc-tween-one';
148+
import SvgDrawPlugin from 'rc-tween-one/es/plugin/SvgDrawPlugin';
149+
Plugins.push(SvgDrawPlugin);
150+
151+
<TweenOne animation={{ SVGDraw: '10%' }} />
152+
```
153+
154+
SVGDraw = string or number;
155+
156+
{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be `%`;
157+
158+
### SvgMorphPlugin
159+
160+
```js | pure
161+
import { Plugins } from 'rc-tween-one';
162+
import SvgMorphPlugin from 'rc-tween-one/es/plugin/SvgMorphPlugin';
163+
Plugins.push(SvgMorphPlugin);
164+
165+
<TweenOne animation={{ SVGMorph: { path: '300,10 500,200 120,230 450,220 0,20' }}} />
166+
```
167+
#### SvgMorphPlugin API
168+
169+
| name | type | default | description |
170+
|------------------|--------|---------|----------------|
171+
| path | string | null | svg path, ref: `M0,0L100,0`;|
172+
| attr | string | null | Svg tag attributes, example: `polygon` is ` points`, `path` is `d`. |
173+
| maxSegmentLength | number | 0.5 | The lower the value, the smoother the generated animation will be, but at the expense of performance;|
174+
175+
176+
### PathPlugin
177+
178+
```js | pure
179+
import { Plugins } from 'rc-tween-one';
180+
import PathMotionPlugin from 'rc-tween-one/es/plugin/PathMotionPlugin';
181+
Plugins.push(PathMotionPlugin);
182+
183+
<TweenOne animation={{ PathMotion: { path: '300,10 500,200 120,230 450,220 0,20' }}} />
184+
```
185+
#### PathMotion API
186+
187+
| name | type | default | description |
188+
| ------ | ------------------- | --------------- | ----------------------------- |
189+
| path | string / {x,y}[] | null | svg path, ref: `M0,0L100,0`; |
190+
| pathVars | IPathVars | null | Only valid if path is array `[{x, y}, {x, y}]` |
191+
| center | `number \ string[]` | `['50%','50%']` | center point, ref: `[50px, 50px]`; |
192+
| x | boolean | true | x follow the path. |
193+
| y | boolean | true | y follow the path. |
194+
| rotate | boolean | true | rotate follow the path. |
195+
196+
##### IPathVars
197+
| name | type | default | description |
198+
| ------ | ------------------- | --------------- | ----------------------------- |
199+
| 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]`. |
200+
| 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`. |
201+
| 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`. |
202+
203+
### ChildrenPlugin
204+
205+
#### Children = { value:, floatLength, formatMoney };
206+
207+
| name | type | default | description |
208+
|---|---|---|---|
209+
| value | number | null | children number to value. |
210+
| floatLength | number | null | float precision length |
211+
| formatMoney | `true` \ { thousand, decimal } | null | format number to money. |
212+
213+
#### formatMoney = { thousand, decimal }
214+
215+
| name | type | default | description |
216+
|---|---|---|---|
217+
| thousand | string | `,` | no explanation. |
218+
| decimal | string | `.` | no explanation. |
219+
220+
## TweenOneGroup
221+
222+
| name | type | default | description |
223+
|------------|----------------|---------|----------------|
224+
| appear | boolean | true | whether support appear anim |
225+
| 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 |
226+
| leave | object / array / func | `{ x: 30, opacity: 0 }` | leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim |
227+
| onEnd | func | - | one animation end callback |
228+
| animatingClassName | array | `['tween-one-entering', 'tween-one-leaving']` | className to every element of animating |
229+
| resetStyle | boolean | true | TweenOne resetStyle, reset the initial style when changing animation. |
230+
| exclusive | boolean | false | Whether to allow a new animate to execute immediately when switching. `enter => leave`: execute immediately leave |
231+
| component | React.Element/String | div | component tag |
232+
| componentProps | object | - | component tag props |

0 commit comments

Comments
 (0)