Package Exports
- rc-tween-one
- rc-tween-one/lib/TimeLine
- rc-tween-one/lib/TweenOne
- rc-tween-one/lib/ticker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-tween-one) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-tween-one
React TweenOne Component
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Development
npm install
npm startExample
http://localhost:8100/examples/
http://react-component.github.io/tween-one/
install
Usage
var TweenOne = require('rc-tween-one');
var React = require('react');
React.render(<TweenOne animation={{x:100}}>
demo
</TweenOne>, container);TweenOneGroup
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);API
props
| 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 |
| onChange | func | null | when the animation change called, callback({ moment, item, tween, index, mode}) |
| moment | number | null | set the current frame |
| component | string | div |
component tag |
animation = { }
transform need to set the initial value, must be set in the style; 0.4 filter =>
grayScale,sepia,hueRotate,invert,brightness,contrast,blur; { blur: '5px' } Unit must bring.
| name | type | default | description |
|---|---|---|---|
| type | string | to |
play type: to from |
| in style | string / number | null | CSS style value: translateX rotateX color marginTop or grayScale, sepia, hueRotate, invert, brightness, contrast, blur or gsap: x y... |
| 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 |
| yoyo | boolean | false | if true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). |
| ease | string | easeInOutQuad |
animate ease |
| bezier | object | null | bezier curve animate |
| onStart | func | null | A function that should be called when the tween begins |
| onUpdate | func | null | A function that should be called every time the animate updates |
| onComplete | func | null | A function that should be called when the animate has completed |
| onRepeat | func | null | A function that should be called each time the animate repeats |
animation =[ ] is timeline
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
TweenOneGroup
| 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 |
| component | React.Element/String | div | component tag |