React TweenOne Component
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
npm install
npm start
http://localhost:8100/examples/
http://react-component.github.io/tween-one/
var TweenOne = require('rc-tween-one');
var React = require('react');
React.render(<TweenOne animation={{x:100}}>
demo
</TweenOne>, container);
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);
var TweenOne = require('rc-tween-one');
var React = require('react');
var TweenOneGroup = TweenOne.TweenOneGroup;
React.render(<TweenOneGroup>
<div key="0">demo</div>
<div key="1">demo</div>
</TweenOneGroup>, container);
name | type | default | description |
---|---|---|---|
animation | object / array | null | animate configure parameters |
paused | boolean | false | animate pause |
reverse | boolean | false | animate revers |
reverseDelay | number | 0 | animate revers start delay |
repeat | number | 0 | animation all data repeat, To repeat indefinitely, use -1 |
yoyo | boolean | false | animation all data alternating backward and forward on each repeat. |
onChange | func | null | when the animation change called, callback({ moment, target, index, mode, timelineMode }) |
moment | number | null | set the current frame |
attr | string | style |
style or attr , attr is tag attribute. when morph SVG must be attr . |
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 |
Basic animation param. please view animation terms
name | type | default | description |
---|---|---|---|
type | string | to |
play type: to from |
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 / func | easeInOutQuad |
animate ease. refer |
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, target, ratio } |
onComplete | func | null | A function that should be called when the animate has completed, callback(e), e: { index, target } |
onRepeat | func | null | A function that should be called each time the animate repeats, callback(e), e: { index, target } |
Cannot be used at the same time
reverse
andrepeat: -1
.
path easing;
name | type | default | description |
---|---|---|---|
path | string | null | svg path |
param | object | { rect: 100, lengthPixel: 200 } |
rect is block size, default: 100 * 100; lengthPixel default: curve is divided into 200 sections |
const path = 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0';
const ease = Tween.easing.path(path, param = { rect: 100, lengthPixel: 200 });
React.render(<TweenOne animation={{ x: 100, ease }}>
demo
</TweenOne>, container);
bezier = { }
name | type | default | description |
---|---|---|---|
type | string | soft |
thru , soft , quadratic , cubic |
autoRotate | boolean | false | to automatically rotate the target according to its position on the Bezier path |
vars | array | null | bezier point data,as: {x:100,y:100} |
bezier API refer to gsap BezierPlugin
SVGDraw = string or number;
{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be %
;
svg polygon or path values: polygon is points, path is d; demo
path = string or object;
string: animation={{ path: 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0' }}
, default: x, y, rotate;
object: animation={{ path: { x: path, y: path, rotate: path } }}
, can be controlled from their own needs.
name | type | default | description |
---|---|---|---|
value | number | null | children number to value. |
floatLength | number | null | float precision length |
formatMoney | boolean or { thousand, decimal } | false | format number to money. |
name | type | default | description |
---|---|---|---|
thousand | string | , |
no explanation. |
decimal | string | . |
no explanation. |
name | type | default | description |
---|---|---|---|
appear | boolean | true | whether support appear anim |
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 |
leave | object / array / func | { x: 30, opacity: 0 } |
leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim |
onEnd | func | - | one animation end callback |
animatingClassName | array | ['tween-one-entering', 'tween-one-leaving'] |
className to every element of animating |
resetStyle | boolean | true | TweenOne resetStyle, reset the initial style when changing animation. |
exclusive | boolean | false | Whether to allow a new animate to execute immediately when switching. enter => leave : execute immediately leave |
component | React.Element/String | div | component tag |
componentProps | object | - | component tag props |