Package Exports

rc-tween-one
rc-tween-one/lib/TimeLine
rc-tween-one/lib/TweenOne

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 start

Example

http://localhost:8100/examples/

install

Usage

var TweenOne = require('rc-tween-one');
var React = require('react');
React.render(<TweenOne animation={{x:100}}>
               文案示例
             </TweenOne>, container);

API

props

name	type	default	description
animation	object / array	null	需要执行动画的参数
pause	boolean	false	暂停
reverse	boolean	false	倒放
onChange	func	null	全局变动回调
moment	number	null	设置当前时间轴上的时间
component	string	`div`	标签

animation = { }

transform 需要设定初始值, 必需在 style 里设定;

name	type	default	description
type	string	`to`	播放类型，`to` `from`
style里的样式	string / number	null	样式里能执行动画的，如 `translateX` `rotateX` `color` `marginTop` 或 `x` `y`等
duration	number	450	动画时间
delay	number	0	延时
repeat	number	0	重复,-1为无限重复
repeatDelay	number	0	重复开始时的延时
yoyo	boolean	false	重复时是否倒放
ease	string	'easeInOutQuad'	缓动参数
bezier	object	null	贝赛尔曲线动画
onStart	func	null	动画开始时调用
onUpdate	func	null	更新时调用
onComplete	func	null	结束时调用
onRepeat	func	null	重复时调用

animation =[ ] 时为timeline

bezier = { }

name	type	default	description
type	string	'soft'	`thru`, `soft`, `quadratic`, `cubic`
autoRotate	boolean	false	跟随位置旋转
vars	array	null	贝赛尔点的位置，如 `{x:100,y:100}`

贝赛尔曲线API参照 gsap BezierPlugin