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/

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

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 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
attr	string	`style`	`style` or `attr`, `attr` is tag attribute. when morph SVG must be `attr`.
resetStyleBool	boolean	false	update animation data, reset init style
updateReStart	boolean	true	update animation data, re start animate
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
type	string	`to`	play type: `to` `from`
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	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 / func	`easeInOutQuad`	animate ease. refer
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, target, ratio }
onComplete	func	null	A function that should be called when the animate has completed, callback(e), e: { index, target }
onRepeat	func	null	A function that should be called each time the animate repeats, callback(e), e: { index, target }

Cannot be used at the same time reverse and repeat: -1.

animation =[ ] is timeline

ease: function

path easing;

name	type	default	description
path	string	null	svg path
param	object	`{ rect: 100, lengthPixel: 200 }`	rect is block size, default: 100 * 100; lengthPixel default: curve is divided into 200 sections

const path = 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0';
const ease = Tween.easing.path(path, param = { rect: 100, lengthPixel: 200 });

BezierPlugin

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

SvgDrawPlugin

SVGDraw = string or number;

{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be %;

SvgMorphPlugin

svg polygon or path values: polygon is points, path is d; demo

PathPlugin

path = string or object;

string: animation={{ path: 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0' }}, default: x, y, rotate;

object: animation={{ path: { x: path, y: path, rotate: path } }}, can be controlled from their own needs.

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
resetStyleBool	boolean	true	whether to animation reset the style every time
component	React.Element/String	div	component tag
componentProps	object	-	component tag props

yangtingting02 / tween-one Goto Github PK

tween-one's Introduction

rc-tween-one

Browser Support

Development

Example

install

Usage

Plugin

TweenOneGroup

API

props

animation = { }

animation =[ ] is timeline

ease: function

BezierPlugin

SvgDrawPlugin

SvgMorphPlugin

PathPlugin

TweenOneGroup

tween-one's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org