3.0.6 • Published 3 years ago

rc-tween-one v3.0.6

Weekly downloads
31,319
License
-
Repository
github
Last release
3 years ago

rc-tween-one

React TweenOne Component

NPM version build status Codecov node version npm download

Browser Support

IEChromeFirefoxOperaSafari
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

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

nametypedefaultdescription
animationobject / arraynullanimate configure parameters
pausedbooleanfalseanimate timeline pause
reversebooleanfalseanimate timeline revers
delaynumber0animate timeline delay
repeatnumber0animation all data repeat, To repeat indefinitely, use -1
repeatDelaynumber0animate timeline repeat delay
yoyobooleanfalseanimation all data alternating backward and forward on each repeat.
onChangefuncnullwhen the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat })
onChangeTimelinefuncnullwhen the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat })
momentnumbernullset the current frame
regionStartTimenumber0Set the start time of the animation region
regionEndTimenumbernullSet the end time of the animation region
attrbooleanfalseattribute animation is true, when morph SVG must be true.
resetStylebooleanfalseupdate animation data, reset init style
componentstring / React.Elementdivcomponent tag
componentPropsobjectnullcomponent is React.Element, component tag props, not add style

animation = { }

Basic animation param. please view animation terms

nametypedefaultdescription
key: stringstring number arraynullAll variables based on number, such as left, x, color, shadow
typestringtoplay type: to from set
durationnumber450animate duration
delaynumber0animate delay
repeatnumber0animate repeat, To repeat indefinitely, use -1
repeatDelaynumber0repeat start delay
appearTonumbernullAdd to the specified time
yoyobooleanfalsetrue: alternating backward and forward on each repeat.
easestringeaseInOutQuadanimate ease refer or svg path M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0
bezierobjectnullbezier curve animate
onStartfuncnullA function that should be called when the tween begins, callback(e), e: { index, target }
onUpdatefuncnullA function that should be called every time the animate updates, callback(e), e: { index, targets, ratio }
onCompletefuncnullA function that should be called when the animate has completed, callback(e), e: { index, targets }
onRepeatfuncnullA 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

nametypedefaultdescription
pathstringnullsvg path, ref: M0,0L100,0;
attrstringnullSvg tag attributes, example: polygon is points, path is d.
maxSegmentLengthnumber0.5The 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

nametypedefaultdescription
pathstring / {x,y}[]nullsvg path, ref: M0,0L100,0;
pathVarsIPathVarsnullOnly valid if path is array [{x, y}, {x, y}]
centernumber \ string[]['50%','50%']center point, ref: [50px, 50px];
xbooleantruex follow the path.
ybooleantruey follow the path.
rotatebooleantruerotate follow the path.
IPathVars
nametypedefaultdescription
typethru \ soft \ cubicthrupath 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].
curviness0-21This 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.
relativebooleanfalseIncrease 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 };

nametypedefaultdescription
valuenumbernullchildren number to value.
floatLengthnumbernullfloat precision length
formatMoneytrue \ { thousand, decimal }nullformat number to money.

formatMoney = { thousand, decimal }

nametypedefaultdescription
thousandstring,no explanation.
decimalstring.no explanation.

TweenOneGroup

nametypedefaultdescription
appearbooleantruewhether support appear anim
enterobject / array / func{ x: 30, opacity: 0, type: 'from' }enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim
leaveobject / array / func{ x: 30, opacity: 0 }leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim
onEndfunc-one animation end callback
animatingClassNamearray['tween-one-entering', 'tween-one-leaving']className to every element of animating
resetStylebooleantrueTweenOne resetStyle, reset the initial style when changing animation.
exclusivebooleanfalseWhether to allow a new animate to execute immediately when switching. enter => leave: execute immediately leave
componentReact.Element/Stringdivcomponent tag
componentPropsobject-component tag props
reactreact-componentcomponentreact-tween-onetweenreact-tweentween-oneanimationanimaterc-animationreact-animationrc-animatereact-animatemotionrc-motionant-motion
@babel/runtimestyle-utilstween-one
banner-anim-autoplay-fixrc-banner-anim-autoplay-fixrc-banner-anim-autoplay-fixedvib-library@ucraft/uimoves-componentsooxx_uidemosimple-antd-management-fast-frameworkzcx-uicognitiveleap-corecognitiveleap-core-us@everything-registry/sub-chunk-2535sysu-xgui-for-reactwofulewolf-uiwetrial-docz-theme-antdxao-mindmap-reactx2d3-uiwhite-fast-web-sdkxgui-for-reactwxbtestgzr2@deepmala0410/using-emilus-library@deepmala0410/using-emilus-library-package@deepmala0410/using-emilus-library-package-1joywok-webkidstories-frontkenstartkenshinkms-layoutsl-count-up@vteam_components/cloudufc-host-app@21epub/epub-app-lib@deepmala0410/emilus@deepmala0410/emilus-app@deepmala0410/emilus-library@deepmala0410/emilus-temp@deepmala0410/emilus-template@deepmala0410/emilus-template1@deepmala0410/emilus-template2@deepmala0410/emilus-template3@deepmala0410/emilus-template4@deepmala0410/emilus-temporary@deepmala0410/emiluslibrary@deepmala0410/emiluslibrary1@deepmala0410/emiluslibrary2zbuizc-react-demoyunjiwong-slideryoumipikachuyylm-csh-webzerodzfdzvvn-mod-uiwebpack-trial-mobi@hanwenbo/web-editor@hocgin/ui@iced/skeleton@icedesign/scroll-screen-homepage-scaffold@gdin/pro-process@gedit/timeline@fw7/styleguide@infinitebrahmanuniverse/nolb-rc-@kzlib/kcomponents@lingxiteam/factory@lingxiteam/pcfactory@lcpcode/fold@luban-h5/landing-page@macrow/white-fast-web-sdk@netless/react-tool-box@netless/loading-bar@netless/react-agora@netless/react-loading-bar@netless/react-mb-tool-box@netless/react-scale-controller@netless/white-fast-web-sdk@nicecode/meta@kaishen/galaxy@omniumretail/component-library@sakitam-gis/react-map@quarks/catalogo-extension@rmchen-12/components@openapplus/markdown-cms@polaristeam/factory@seayona/antd-stone@senswap/sen-uimhc-adminmhc-antd-adminnumbers-scrollop-h5nsc-componentreact-chat-timothyrc-textyrc-banner-animrc-banner-anim-fixrc-banner-anim-strict-moderc-scroll-animrc-editor-listrc-editor-jsonschema
3.0.4

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.3

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

3.0.0-beta.21

4 years ago

3.0.0-beta.19

4 years ago

3.0.0-beta.15

4 years ago

3.0.0-beta.16

4 years ago

3.0.0-beta.17

4 years ago

3.0.0-beta.18

4 years ago

3.0.0-beta.14

4 years ago

3.0.0-beta.13

4 years ago

3.0.0-beta.12

4 years ago

3.0.0-beta.11

4 years ago

3.0.0-beta.9

4 years ago

3.0.0-beta.8

4 years ago

3.0.0-beta.10

4 years ago

3.0.0-beta.7

4 years ago

3.0.0-beta.6

5 years ago

3.0.0-beta.5

5 years ago

3.0.0-beta.3

5 years ago

3.0.0-beta.4

5 years ago

3.0.0-beta.2

5 years ago

2.7.3

5 years ago

2.7.2

5 years ago

2.7.1

5 years ago

2.7.0

5 years ago

2.6.8

6 years ago

2.6.7

6 years ago

2.6.6

6 years ago

2.6.5

6 years ago

2.6.4

6 years ago

2.6.3

6 years ago

2.6.2

6 years ago

2.6.1

6 years ago

2.6.0

6 years ago

2.5.0

6 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

7 years ago

2.3.1

7 years ago

2.3.0

7 years ago

2.2.22

7 years ago

2.2.21

7 years ago

2.2.20

7 years ago

2.2.19

7 years ago

2.2.18

7 years ago

2.2.17

7 years ago

2.2.16

7 years ago

2.2.15

7 years ago

2.2.14

7 years ago

2.2.13

7 years ago

2.2.12

7 years ago

2.2.11

7 years ago

2.2.10

7 years ago

2.2.10-beta.0

7 years ago

2.2.9-beta.0

7 years ago

2.2.9

7 years ago

2.2.8

7 years ago

2.2.7

7 years ago

2.2.6

7 years ago

2.2.5

7 years ago

2.2.4

7 years ago

2.2.3

7 years ago

2.2.2

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.5

7 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.11

7 years ago

2.0.10

7 years ago

2.0.9

7 years ago

2.0.8

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.5

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.8.1

7 years ago

1.8.0

7 years ago

1.7.8

7 years ago

1.7.7

7 years ago

1.7.6

7 years ago

1.7.5

7 years ago

1.7.3

8 years ago

1.7.2

8 years ago

1.7.1

8 years ago

1.7.0

8 years ago

1.6.0

8 years ago

1.5.8

8 years ago

1.5.7

8 years ago

1.5.6

8 years ago

1.5.5

8 years ago

1.5.4

8 years ago

1.5.3

8 years ago

1.5.2

8 years ago

1.5.1

8 years ago

1.5.0

8 years ago

1.4.5

8 years ago

1.4.4

8 years ago

1.4.3

8 years ago

1.4.2

8 years ago

1.4.1

8 years ago

1.4.0

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.9

8 years ago

1.2.8

8 years ago

1.2.7

8 years ago

1.2.6

8 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

9 years ago

0.11.12

9 years ago

0.11.11

9 years ago

0.11.10

9 years ago

0.11.9

9 years ago

0.11.8

9 years ago

0.11.7

9 years ago

0.11.6

9 years ago

0.11.5

9 years ago

0.11.4

9 years ago

0.11.3

9 years ago

0.11.2

9 years ago

0.11.1

9 years ago

0.11.0

9 years ago

0.10.1

9 years ago

0.10.0

9 years ago

0.9.5

9 years ago

0.9.4

9 years ago

0.9.3

9 years ago

0.9.2

9 years ago

0.9.1

9 years ago

0.9.0

9 years ago

0.8.5

9 years ago

0.8.4

9 years ago

0.8.3

9 years ago

0.8.2

9 years ago

0.8.1

9 years ago

0.8.0

9 years ago

0.7.3

9 years ago

0.7.2

9 years ago

0.7.1

9 years ago

0.7.0

9 years ago

0.6.25

9 years ago

0.6.24

9 years ago

0.6.23

9 years ago

0.6.22

9 years ago

0.6.21

9 years ago

0.6.20

9 years ago

0.6.19

9 years ago

0.6.17

9 years ago

0.6.16

9 years ago

0.6.15

9 years ago

0.6.14

9 years ago

0.6.13

9 years ago

0.6.12

9 years ago

0.6.11

9 years ago

0.6.10

9 years ago

0.6.9

9 years ago

0.6.8

9 years ago

0.6.7

9 years ago

0.6.6

9 years ago

0.6.5

9 years ago

0.6.4

9 years ago

0.6.3

9 years ago

0.6.2

9 years ago

0.6.1

9 years ago

0.6.0

9 years ago

0.5.5

9 years ago

0.5.4

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.1

9 years ago

0.5.0

9 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

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago