rc-tween-one@2.7.3

tween-one anim component for react

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

Tween.plugins.push(PathPlugin);

function Demo() {
  const p = `M50.952,85.619C31.729,84.841,23.557,73.62,24.095,42.952
    c0.381-21.714,6.667-33.714,30.286-34.476
    c36.572-1.18,59.81,77.714,102.667,76.381c30.108-0.937,34.268-32.381,34.095-41.714
    C190.762,22.571,180.493,6.786,159.524,6C113.81,4.286,98,87.524,50.952,85.619z`;

  const p2 = "M0,0,L100, 0L100, 100L0, 100Z";
  return (
    <div style={{ position: 'relative', width: 200, margin: 'auto' }}>
      <Tween
        animation={{ duration: 3000, path: p, repeat: -1, ease: 'linear' }}
        style={{
          opacity: 1,
          position: 'absolute',
          width: '30px',
          height: '30px',
          left: '-15px',
          top: '-15px',
          background: '#fff000',
        }}
      />
      <Tween
        animation={{ duration: 3000, path: p2, repeat: -1, ease: 'linear' }}
        style={{
          opacity: 1,
          position: 'absolute',
          width: '30px',
          height: '30px',
          left: '-15px',
          top: '-15px',
          background: '#fff000',
        }}
      />
      <svg>
        <path fill="none" stroke="#000" d={p} />
        <path fill="none" stroke="#000" d={p2} />
      </svg>
    </div>);
}

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