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'));