Teen One - rkaku/udemy-typescript-react GitHub Wiki

$ npm install rc-tween-one --save

import TweenOne from 'rc-tween-one';
ReactDOM.render(<TweenOne animation={{ x:100 }} />, mountNode);
import TweenOne from 'rc-tween-one';
var TweenOneGroup = TweenOne.TweenOneGroup;
React.render(<TweenOneGroup>
  <div key="0">demo</div>
</TweenOneGroup>, container);

Basic

import TweenOne from 'rc-tween-one';
import PropTypes from 'prop-types';

function Demo(props) {
  return (
    <TweenOne
      animation={{ 
        x: 80, 
        scale: 0.5, 
        rotate: 120, 
        yoyo: true, // demo 演示需要
        repeat: -1, // demo 演示需要
        duration: 1000
      }}
      paused={props.paused}
      style={{ transform: 'translateX(-80px)' }}
      className="code-box-shape"
    />
  );
}

Demo.propTypes = {
  children: PropTypes.any,
  className: PropTypes.string,
  paused: PropTypes.bool,
};

ReactDOM.render(<Demo/>, mountNode);
  • animation object / array null animate configure parameters.
  • paused boolean false animate pause.
  • reverse boolean false animate revers.
  • reverseDelay number 0 animate revers start delay.
  • repeat number 0 animation all data repeat, To repeat indefinitely, use -1
  • yoyo boolean false animation all data alternating backward and forward on each repeat.
  • onChange function null when the animation change called, callback({ moment, target, index, mode, timelineMode })
  • moment number null Set the moment at the current animation timeline, please set it back to null after setting.
  • attr string style style or attr, attr is tag attribute. when morph SVG must be.
  • resetStyle boolean false update animation data, reset init style.
  • component React.Element/String div component tag
  • componentProps object null component is React.Element, component tag props, not add style
const path = 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0';
const ease = TweenOne.easing.path(path);
  • rect number 100 Draw the square size of the easing path.
  • lengthPixel number 1500 The entire path is divided into 1500 pixels to take points.
⚠️ **GitHub.com Fallback** ⚠️