react-component/tween-one

README

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

README

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

react-component/tween-one(opens in a new tab)

README

rc-tween-one

Browser Support

Development

Example

install

Usage

Plugin

TweenOneGroup

API

props

animation = { }

animation =[ ] is timeline

Plugins

SvgDrawPlugin

SvgMorphPlugin

SvgMorphPlugin API

PathPlugin

PathMotion API

IPathVars

ChildrenPlugin

Children = { value:, floatLength, formatMoney };

formatMoney = { thousand, decimal }

TweenOneGroup

README

rc-tween-one

Browser Support

Development

Example

install

Usage

Plugin

TweenOneGroup

API

props

animation = { }

animation =[ ] is timeline

Plugins

SvgDrawPlugin

SvgMorphPlugin

SvgMorphPlugin API

PathPlugin

PathMotion API

IPathVars

ChildrenPlugin

Children = { value:, floatLength, formatMoney };

formatMoney = { thousand, decimal }

TweenOneGroup