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

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

Plugin

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

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 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

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 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

<TweenOne animation={[{ x: 100 }, { y: 100 }]} />

Plugins

SvgDrawPlugin

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

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

name	type	default	description
path	string	null	svg path, ref: `M0,0L100,0`;
attr	string	null	Svg tag attributes, example: `polygon` is `points`, `path` is `d`.
maxSegmentLength	number	0.5	The lower the value, the smoother the generated animation will be, but at the expense of performance;

PathPlugin

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

name	type	default	description
path	string / {x,y}[]	null	svg path, ref: `M0,0L100,0`;
pathVars	IPathVars	null	Only valid if path is array `[{x, y}, {x, y}]`
center	`number \ string[]`	`['50%','50%']`	center point, ref: `[50px, 50px]`;
x	boolean	true	x follow the path.
y	boolean	true	y follow the path.
rotate	boolean	true	rotate follow the path.

IPathVars

name	type	default	description
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]`.
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`.
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`.

ChildrenPlugin

Children = { value:, floatLength, formatMoney };

name	type	default	description
value	number	null	children number to value.
floatLength	number	null	float precision length
formatMoney	`true` \ { thousand, decimal }	null	format number to money.

formatMoney = { thousand, decimal }

name	type	default	description
thousand	string	`,`	no explanation.
decimal	string	`.`	no explanation.

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
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

Current Tags

3.0.0-beta.21 ... beta (3 years ago)
3.0.6 ... latest (3 years ago)

226 Versions

3.0.6 ... 3 years ago
3.0.5 ... 3 years ago
3.0.4 ... 3 years ago
3.0.3 ... 3 years ago
3.0.2 ... 3 years ago
3.0.1 ... 3 years ago
3.0.0 ... 3 years ago
3.0.0-beta.21 ... 3 years ago
3.0.0-beta.19 ... 3 years ago
3.0.0-beta.18 ... 3 years ago
3.0.0-beta.17 ... 3 years ago
3.0.0-beta.16 ... 3 years ago
3.0.0-beta.15 ... 3 years ago
3.0.0-beta.14 ... 3 years ago
3.0.0-beta.13 ... 3 years ago
3.0.0-beta.12 ... 3 years ago
3.0.0-beta.11 ... 3 years ago
3.0.0-beta.10 ... 3 years ago
3.0.0-beta.9 ... 3 years ago
3.0.0-beta.8 ... 4 years ago
3.0.0-beta.7 ... 4 years ago
3.0.0-beta.6 ... 4 years ago
3.0.0-beta.5 ... 4 years ago
3.0.0-beta.4 ... 4 years ago
3.0.0-beta.3 ... 4 years ago
3.0.0-beta.2 ... 4 years ago
2.7.3 ... 4 years ago
2.7.2 ... 4 years ago
2.7.1 ... 4 years ago
2.7.0 ... 4 years ago
2.6.8 ... 5 years ago
2.6.7 ... 5 years ago
2.6.6 ... 5 years ago
2.6.5 ... 5 years ago
2.6.4 ... 5 years ago
2.6.3 ... 5 years ago
2.6.2 ... 5 years ago
2.6.1 ... 5 years ago
2.6.0 ... 5 years ago
2.5.0 ... 5 years ago
2.4.1 ... 6 years ago
2.4.0 ... 6 years ago
2.3.4 ... 6 years ago
2.3.3 ... 6 years ago
2.3.2 ... 6 years ago
2.3.1 ... 6 years ago
2.3.0 ... 6 years ago
2.2.22 ... 6 years ago
2.2.21 ... 6 years ago
2.2.20 ... 6 years ago
2.2.19 ... 6 years ago
2.2.18 ... 6 years ago
2.2.17 ... 6 years ago
2.2.16 ... 6 years ago
2.2.15 ... 6 years ago
2.2.14 ... 6 years ago
2.2.13 ... 6 years ago
2.2.12 ... 6 years ago
2.2.11 ... 6 years ago
2.2.10 ... 6 years ago
2.2.10-beta.0 ... 6 years ago
2.2.9-beta.0 ... 6 years ago
2.2.9 ... 6 years ago
2.2.8 ... 6 years ago
2.2.7 ... 6 years ago
2.2.6 ... 6 years ago
2.2.5 ... 6 years ago
2.2.4 ... 6 years ago
2.2.3 ... 6 years ago
2.2.2 ... 6 years ago
2.2.1 ... 6 years ago
2.2.0 ... 6 years ago
2.1.5 ... 6 years ago
2.1.4 ... 6 years ago
2.1.3 ... 6 years ago
2.1.2 ... 6 years ago
2.1.1 ... 6 years ago
2.1.0 ... 6 years ago
2.0.11 ... 6 years ago
2.0.10 ... 6 years ago
2.0.9 ... 6 years ago
2.0.8 ... 6 years ago
2.0.7 ... 6 years ago
2.0.6 ... 6 years ago
2.0.5 ... 6 years ago
2.0.4 ... 6 years ago
2.0.3 ... 6 years ago
2.0.2 ... 6 years ago
2.0.1 ... 6 years ago
2.0.0 ... 6 years ago
1.8.1 ... 6 years ago
1.8.0 ... 6 years ago
1.7.8 ... 6 years ago
1.7.7 ... 6 years ago
1.7.6 ... 6 years ago
1.7.5 ... 6 years ago
1.7.3 ... 7 years ago
1.7.2 ... 7 years ago
1.7.1 ... 7 years ago
1.7.0 ... 7 years ago
1.6.0 ... 7 years ago
1.5.8 ... 7 years ago
1.5.7 ... 7 years ago
1.5.6 ... 7 years ago
1.5.5 ... 7 years ago
1.5.4 ... 7 years ago
1.5.3 ... 7 years ago
1.5.2 ... 7 years ago
1.5.1 ... 7 years ago
1.5.0 ... 7 years ago
1.4.5 ... 7 years ago
1.4.4 ... 7 years ago
1.4.3 ... 7 years ago
1.4.2 ... 7 years ago
1.4.1 ... 7 years ago
1.4.0 ... 7 years ago
1.3.1 ... 7 years ago
1.3.0 ... 7 years ago
1.2.9 ... 7 years ago
1.2.8 ... 7 years ago
1.2.7 ... 7 years ago
1.2.6 ... 7 years ago
1.2.5 ... 8 years ago
1.2.4 ... 8 years ago
1.2.3 ... 8 years ago
1.2.2 ... 8 years ago
1.2.1 ... 8 years ago
1.2.0 ... 8 years ago
1.1.5 ... 8 years ago
1.1.4 ... 8 years ago
1.1.3 ... 8 years ago
1.1.2 ... 8 years ago
1.1.1 ... 8 years ago
1.1.0 ... 8 years ago
1.0.4 ... 8 years ago
1.0.3 ... 8 years ago
1.0.2 ... 8 years ago
1.0.1 ... 8 years ago
1.0.0 ... 8 years ago
0.11.12 ... 8 years ago
0.11.11 ... 8 years ago
0.11.10 ... 8 years ago
0.11.9 ... 8 years ago
0.11.8 ... 8 years ago
0.11.7 ... 8 years ago
0.11.6 ... 8 years ago
0.11.5 ... 8 years ago
0.11.4 ... 8 years ago
0.11.3 ... 8 years ago
0.11.2 ... 8 years ago
0.11.1 ... 8 years ago
0.11.0 ... 8 years ago
0.10.1 ... 8 years ago
0.10.0 ... 8 years ago
0.9.5 ... 8 years ago
0.9.4 ... 8 years ago
0.9.3 ... 8 years ago
0.9.2 ... 8 years ago
0.9.1 ... 8 years ago
0.9.0 ... 8 years ago
0.8.5 ... 8 years ago
0.8.4 ... 8 years ago
0.8.3 ... 8 years ago
0.8.2 ... 8 years ago
0.8.1 ... 8 years ago
0.8.0 ... 8 years ago
0.7.3 ... 8 years ago
0.7.2 ... 8 years ago
0.7.1 ... 8 years ago
0.7.0 ... 8 years ago
0.6.25 ... 8 years ago
0.6.24 ... 8 years ago
0.6.23 ... 8 years ago
0.6.22 ... 8 years ago
0.6.21 ... 8 years ago
0.6.20 ... 8 years ago
0.6.19 ... 8 years ago
0.6.17 ... 8 years ago
0.6.16 ... 8 years ago
0.6.15 ... 8 years ago
0.6.14 ... 8 years ago
0.6.13 ... 8 years ago
0.6.12 ... 8 years ago
0.6.11 ... 8 years ago
0.6.10 ... 8 years ago
0.6.9 ... 8 years ago
0.6.8 ... 8 years ago
0.6.7 ... 8 years ago
0.6.6 ... 8 years ago
0.6.5 ... 8 years ago
0.6.4 ... 8 years ago
0.6.3 ... 8 years ago
0.6.2 ... 8 years ago
0.6.1 ... 8 years ago
0.6.0 ... 8 years ago
0.5.5 ... 8 years ago
0.5.4 ... 8 years ago
0.5.3 ... 8 years ago
0.5.2 ... 8 years ago
0.5.1 ... 8 years ago
0.5.0 ... 8 years ago
0.4.3 ... 9 years ago
0.4.2 ... 9 years ago
0.4.1 ... 9 years ago
0.4.0 ... 9 years ago
0.3.0 ... 9 years ago
0.2.11 ... 9 years ago
0.2.10 ... 9 years ago
0.2.8 ... 9 years ago
0.2.7 ... 9 years ago
0.2.6 ... 9 years ago
0.2.5 ... 9 years ago
0.2.4 ... 9 years ago
0.2.3 ... 9 years ago
0.2.2 ... 9 years ago
0.2.1 ... 9 years ago
0.2.0 ... 9 years ago
0.1.8 ... 9 years ago
0.1.7 ... 9 years ago
0.1.6 ... 9 years ago
0.1.5 ... 9 years ago
0.1.4 ... 9 years ago
0.1.3 ... 9 years ago
0.1.2 ... 9 years ago
0.1.1 ... 9 years ago
0.1.0 ... 9 years ago