rc-tween-one
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.3 • Public • Published

    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

    Install

    npm i rc-tween-one

    DownloadsWeekly Downloads

    28,996

    Version

    3.0.3

    License

    none

    Unpacked Size

    76.1 kB

    Total Files

    45

    Last publish

    Collaborators

    • afc163
    • jljsj33