• Stars
    star
    370
  • Rank 112,271 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Animate One React Element

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/

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

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

More Repositories

1

slider

React Slider
JavaScript
2,962
star
2

form

React High Order Form Component(web & react-native)
JavaScript
1,799
star
3

calendar

React Calendar
JavaScript
1,681
star
4

table

React Table
TypeScript
1,183
star
5

tree

React Tree
TypeScript
1,113
star
6

field-form

⚡️ React Performance First Form Component
TypeScript
914
star
7

tooltip

React Tooltip
TypeScript
896
star
8

select

React Select
TypeScript
854
star
9

upload

React Upload
TypeScript
766
star
10

progress

React Progress Bar
TypeScript
678
star
11

animate

anim react element easily
JavaScript
675
star
12

menu

React Menu
TypeScript
655
star
13

virtual-list

🧾 React Virtual List Component which worked with animation
TypeScript
645
star
14

pagination

React Pagination
TypeScript
629
star
15

util

Common Utils For React Component
TypeScript
604
star
16

tabs

React Tabs
TypeScript
540
star
17

queue-anim

Animate React Component in queue
TypeScript
474
star
18

time-picker

React TimePicker
JavaScript
463
star
19

dialog

React Dialog
TypeScript
424
star
20

color-picker

React ColorPicker
TypeScript
419
star
21

m-date-picker

React Mobile DatePicker(web & react-native)
TypeScript
400
star
22

react-component.github.io

docs and site of react-component
HTML
378
star
23

drawer

React Drawer
TypeScript
372
star
24

notification

React Notification
TypeScript
364
star
25

trigger

Abstract React Trigger
TypeScript
345
star
26

collapse

React Collapse / Accordion
TypeScript
319
star
27

steps

React Steps
TypeScript
311
star
28

scroll-anim

Animate Scroll React Component
JavaScript
301
star
29

input-number

React Input Number
TypeScript
296
star
30

tree-select

React Tree Select
TypeScript
272
star
31

picker

📅 All Date Pickers you need.
TypeScript
253
star
32

m-picker

React Mobile Picker(web & react-native)
TypeScript
246
star
33

swipeout

React Swipeout(web & react-native)
TypeScript
213
star
34

rc-tools

Tools For React Component
JavaScript
205
star
35

cascader

cascade select in one box
TypeScript
198
star
36

switch

React Switch
JavaScript
187
star
37

image

🖼 React Image Component
TypeScript
179
star
38

banner-anim

Animate Banner React Component
JavaScript
170
star
39

m-pull-to-refresh

React Mobile Pull To Refresh
TypeScript
166
star
40

dropdown

React Dropdown
TypeScript
163
star
41

texty

React Text Animate
TypeScript
154
star
42

resize-observer

👓 Resize observer for React
JavaScript
153
star
43

m-tabs

React Mobile Tabs Component (web & react-native)
TypeScript
139
star
44

checkbox

React Checkbox
TypeScript
130
star
45

motion

⛷ CSS Animation for React
TypeScript
120
star
46

gesture

Support gesture for react component.
TypeScript
103
star
47

rate

React Rate
JavaScript
91
star
48

form-validation

This project is deprecated, you can try https://github.com/react-component/form
JavaScript
86
star
49

m-list-view

ReactNative ListView Web Port
JavaScript
85
star
50

footer

🐾 Pretty Footer react component used in ant.design
JavaScript
83
star
51

align

Abstract React Align
TypeScript
81
star
52

mentions

React Mentions
TypeScript
67
star
53

rn-packager

Standalone ReactNative Packager
JavaScript
66
star
54

generator-rc

yeoman generator for react component
JavaScript
58
star
55

editor-core

a draft-js based editor
TypeScript
56
star
56

m-drawer

React Drawer
JavaScript
54
star
57

cropping

image cropping
TypeScript
54
star
58

editor-mention

React Mention
JavaScript
53
star
59

m-cascader

React Mobile Cascader Component(web and react-native)
TypeScript
51
star
60

m-dialog

React Mobile Dialog(web & react-native)
TypeScript
45
star
61

spider

React Tree Diagrams
JavaScript
44
star
62

overflow

📦 Auto collapse box util component
TypeScript
42
star
63

css-transition-group

standalone CSSTransitionGroup for React.addons.CSSTransitionGroup
JavaScript
38
star
64

m-calendar

React Mobile Calendar Component (web)
TypeScript
36
star
65

m-feedback

:active pseudo-class with react for mobile
TypeScript
36
star
66

tour

TypeScript
30
star
67

input

React Input Component
TypeScript
29
star
68

pager

React Pager
JavaScript
26
star
69

m-notification

JavaScript
23
star
70

dropzone

React Dropzone
JavaScript
23
star
71

textarea

React Textarea
TypeScript
22
star
72

radio

[DEPRECATED] React Radio
CSS
19
star
73

m-input-number

input-number mobile ui component for react (web & react-native)
TypeScript
17
star
74

portal

TypeScript
16
star
75

touchable

React Touchable Component
TypeScript
16
star
76

rc-server

This project is deprecated, use rc-tools run server
JavaScript
15
star
77

gulp-jsx2example

Compile JSX file to HTML (react demo)
JavaScript
13
star
78

cascade-select

React CascadeSelect
JavaScript
13
star
79

icon-anim

Icon cutover or morph animate React Element
JavaScript
12
star
80

m-select-list

React Mobile Select List Component
JavaScript
12
star
81

segmented

React Segmented Controls
TypeScript
12
star
82

rc-test

test react component
JavaScript
11
star
83

mobile

ant design mobile components
TypeScript
10
star
84

m-tooltip

React Tooltip for mobile
TypeScript
8
star
85

context

TypeScript
7
star
86

rn-tools

tools for react-native
JavaScript
7
star
87

m-trigger

React Trigger Component for mobile
JavaScript
6
star
88

rn-core

Standalone ReactNative Framework
Objective-C
6
star
89

record

Record audio from microphone
JavaScript
5
star
90

.github

5
star
91

RNPlayground

react-native playground container
Objective-C
5
star
92

mutate-observer

TypeScript
5
star
93

editor-plugin-emoji

HTML
4
star
94

m-steps

React Steps for mobile
CSS
4
star
95

editor-plugin-basic-style

TypeScript
3
star
96

mini-decimal

TypeScript
3
star
97

editor-utils

editor utilities
TypeScript
2
star
98

father-plugin

father plugin for all react-component project
TypeScript
1
star
99

editor-plugin-image

TypeScript
1
star