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