rc-tween-one@2.7.3

import Tween from 'rc-tween-one';
import React from 'react';
import ReactDom from 'react-dom';
import BezierPlugin from '../src/plugin/BezierPlugin';

Tween.plugins.push(BezierPlugin);
function Demo() {
  return (
    <div style={{ position: 'relative', height: 300 }}>
      <Tween
        animation={{
          bezier: {
            type: 'thru', autoRotate: true,
            vars: [{ x: 200, y: 200 }, { x: 400, y: 0 }, { x: 600, y: 200 }, { x: 800, y: 0 }],
          },
          duration: 5000,
        }}
        style={{ width: 100 }}
      >
        <div>执行动效</div>
      </Tween>
      <div
        style={{
          width: 5, height: 5, background: '#000',
          position: 'absolute', top: 0, transform: 'translate(200px,200px)',
        }}
      />
      <div
        style={{
          width: 5, height: 5, background: '#000', position: 'absolute',
          top: 0, transform: 'translate(400px,0px)',
        }}
      />
      <div
        style={{
          width: 5, height: 5, background: '#000', position: 'absolute',
          top: 0, transform: 'translate(600px,200px)',
        }}
      />
      <div
        style={{
          width: 5, height: 5, background: '#000', position: 'absolute',
          top: 0, transform: 'translate(800px,0px)',
        }}
      />
    </div>);
}

ReactDom.render(<Demo />, document.getElementById('__react-content'));