JesuisTong/tween-one

Animate One React Element

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