rc-tween-one

React TweenOne Component

Browser Support

IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Development

npm install
npm start

Example

http://localhost:8100/examples/

2.x: http://react-component.github.io/tween-one/

3.x: https://tween-one.vercel.app/

install

Usage

`js | pure var TweenOne = require('rc-tween-one'); var React = require('react'); React.render(<TweenOne animation={{x:100}}> demo </TweenOne>, container);

### Plugin

```js | pure
var TweenOne = require('rc-tween-one');
var React = require('react');
var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
TweenOne.plugins.push(SvgDrawPlugin);
React.render(<svg width="600" height="600">
  <TweenOne 
    animation={{ SVGDraw:'50%'}}
    d="M0,0L100,0"
    style={{ fill: 'none', strokeWidth: 20, stroke: '#00000' }}
    component="path"
  />
</svg>, container);

TweenOneGroup

`js | pure var TweenOne = require('rc-tween-one'); var React = require('react'); var TweenOneGroup = TweenOne.TweenOneGroup; React.render(<TweenOneGroup>

## API

<a href='https://motion.ant.design/api/tween-one' target='_blank'>中文文档</a>

### props

| name      | type           | default | description    |
|------------|----------------|---------|----------------|
| animation  | object / array | null    | animate configure parameters |
| paused      | boolean       | false   | animate timeline pause |
| reverse    | boolean        | false   | animate timeline revers |
| delay      | number          | 0       | animate timeline delay |      
| repeat     |  number        | 0       | `animation` all data repeat, To repeat indefinitely, use  -1 |
| repeatDelay | number       | 0       | animate timeline repeat delay |
| yoyo       | boolean        | false   | `animation` all data alternating backward and forward on each repeat. |
| onChange   | func           | null    | when the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat }) |
| onChangeTimeline   | func           | null    | when the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat }) |
| moment     | number         | null    | set the current frame    |
| regionStartTime  | number           | 0       | Set the start time of the animation region  |
| regionEndTime    | number         | null    | Set the end time of the animation region   |
| attr       | boolean         | false | attribute animation is `true`, when morph SVG must be `true`.  |
| resetStyle | boolean    | false   | update animation data, reset init style |
| component  | string / React.Element  | `div`   | component tag  |
| componentProps | object     | null   | component is React.Element, component tag props, not add `style` |


### animation = { }

> Basic animation param. please view [animation terms](https://motion.ant.design/language/animate-term)

| name      | type           | default | description    |
|------------|----------------|---------|----------------|
| [key: string] | `string` `number` `array` | null | All variables based on number, such as left, x, color, shadow  |
| type       | string         | `to`    | play type: `to` `from` `set`|
| duration   |  number        | 450     | animate duration     |
| delay      | number         | 0       | animate delay  |
| repeat     | number         | 0       | animate repeat, To repeat indefinitely, use  -1 |
| repeatDelay| number         | 0       | repeat start delay |
| appearTo   | number         | null    | Add to the specified time |
| yoyo       | boolean        | false   | `true`: alternating backward and forward on each repeat. |
| 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`  |
| bezier     | object         | null    | bezier curve animate |
| onStart    | func           | null    | A function that should be called when the tween begins, callback(e), e: { index, target }  |
| onUpdate   | func           | null    | A function that should be called every time the animate updates, callback(e), e: { index, targets,  ratio }   |
| onComplete | func           | null    | A function that should be called when the animate has completed, callback(e), e: { index, targets }  |
| onRepeat   | func           | null    | A function that should be called each time the animate repeats, callback(e), e: { index, targets }  |

> Cannot be used at the same time `reverse` and `repeat: -1`.

### animation =[ ] is timeline
```js | pure
<TweenOne animation={[{ x: 100 }, { y: 100 }]} />

Plugins

SvgDrawPlugin

`js | pure import { Plugins } from 'rc-tween-one'; import SvgDrawPlugin from 'rc-tween-one/es/plugin/SvgDrawPlugin'; Plugins.push(SvgDrawPlugin);

<TweenOne animation={{ SVGDraw: '10%' }} />

SVGDraw = string or number;

{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be `%`;

### SvgMorphPlugin

```js | pure
import { Plugins } from 'rc-tween-one';
import SvgMorphPlugin from 'rc-tween-one/es/plugin/SvgMorphPlugin';
Plugins.push(SvgMorphPlugin);

<TweenOne animation={{ SVGMorph: { path: '300,10 500,200 120,230 450,220 0,20' }}} />

SvgMorphPlugin API

PathPlugin

`js | pure import { Plugins } from 'rc-tween-one'; import PathMotionPlugin from 'rc-tween-one/es/plugin/PathMotionPlugin'; Plugins.push(PathMotionPlugin);

<TweenOne animation={{ PathMotion: { path: '300,10 500,200 120,230 450,220 0,20' }}} /> `

PathMotion API

IPathVars

ChildrenPlugin

Children = { value:, floatLength, formatMoney };

formatMoney = { thousand, decimal }

TweenOneGroup

History

2.2.0

1. resetStyleBool 改名成 resetStyle;
2. TweenOne 删除 updateReStart, 现在默认是。
3. Group 重构动画逻辑，以队列形式切换，如果在动画时做切换，需将动画完成后再执切换动画。
4. Group 增加 exclusive, 在队列动画时强行执行切换动画。

2.0.0

add repeat and yoyo to tag;

1.8.0

add children plugin.

0.4

1. filter 拆分为 'grayScale', 'sepia', 'hueRotate', 'invert', 'brightness', 'contrast', 'blur', 与transform一致；

2. 忧化时间轴

3. 忧化 yoyo 在数组最后个卡顿的问题。