JSPM

rc-tween-one

3.0.0-beta.16
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31639
  • Score
    100M100P100Q159269F

tween-one anim component for react

Package Exports

  • rc-tween-one
  • rc-tween-one/es/TweenOneGroup
  • rc-tween-one/es/plugin/SvgMorphPlugin
  • rc-tween-one/lib/TweenOne
  • rc-tween-one/lib/TweenOneGroup
  • rc-tween-one/lib/plugin/ChildrenPlugin
  • rc-tween-one/lib/plugin/SvgDrawPlugin
  • rc-tween-one/lib/plugin/SvgMorphPlugin

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

NPM version build status Codecov node version npm download

Browser Support

IE Chrome Firefox Opera Safari
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

rc-tween-one

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