re demo

examples/bezier.html

@@ -0,0 +1 @@
+placeholder

examples/bezier.js

@@ -0,0 +1,49 @@
+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'));

examples/blur.html

@@ -0,0 +1 @@
+placeholder

examples/blur.js

@@ -0,0 +1,24 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+function Demo() {
+  return (
+    <div>
+      <div>
+        filter 里的滤镜，&apos;grayScale&apos;, &apos;sepia&apos;, &apos;hueRotate&apos;,
+        &apos;invert&apos;, &apos;brightness&apos;, &apos;contrast&apos;, &apos;blur&apos;
+      </div>
+      <Tween animation={{ blur: '10px', sepia: '100%', duration: 2000 }}
+        style={{ filter: 'blur(30px)' }}
+      >
+        <img
+          width="500"
+          src="https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg"
+          alt="img"
+        />
+      </Tween>
+    </div>);
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/children.html

@@ -0,0 +1 @@
+placeholder

examples/children.js

@@ -0,0 +1,72 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+import ChildrenPlugin from '../src/plugin/ChildrenPlugin';
+
+import '../assets/index.less';
+
+Tween.plugins.push(ChildrenPlugin);
+function Demo() {
+  return (
+    <div>
+      <h2>子级的数值变化的动画 - children plugin</h2>
+      <div style={{ marginBottom: 20 }}>
+        <span>基本数字：</span>
+        <Tween
+          animation={{ Children: { value: 10000 } }}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <span>设置开始数字：</span>
+        <Tween
+          animation={{ Children: { value: 10000 } }}
+        >
+          9990
+        </Tween>
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <span>只取整数：</span>
+        <Tween
+          animation={{ Children: { value: 10000, floatLength: 0 } }}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <span>基本数字, 小数后取两位, float length 2：</span>
+        <Tween
+          animation={{ Children: { value: 10000, floatLength: 2 } }}
+        />
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <span>格式化钱符：</span>
+        <div>
+          <span>¥</span>
+          <Tween
+            animation={{ Children: { value: 10000, floatLength: 2, formatMoney: true } }}
+            component="span"
+          >
+            20,000.12
+          </Tween>
+        </div>
+      </div>
+      <div style={{ marginBottom: 20 }}>
+        <span>自定义钱符格式：</span>
+        <div>
+          <span>¥</span>
+          <Tween
+            animation={{
+              Children: {
+                value: 10000,
+                floatLength: 2,
+                formatMoney: { thousand: '.', decimal: ',' },
+              },
+            }}
+            component="span"
+          >
+          20.000,12
+          </Tween>
+        </div>
+      </div>
+    </div>);
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/childrenNullChange.html

@@ -0,0 +1 @@
+placeholder

examples/childrenNullChange.js

@@ -0,0 +1,38 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+import PropTypes from 'prop-types';
+import '../assets/index.less';
+
+function Div({ show, children }) {
+  return show ? <div>{children}</div> : null;
+}
+
+Div.propTypes = {
+  show: PropTypes.bool,
+  children: PropTypes.any,
+}
+
+class Demo extends React.Component {
+  state = {
+    show: false,
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        show: true,
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Tween
+        animation={{ x: 300 }}
+        component={Div}
+        componentProps={{ show: this.state.show }}
+      >
+        test
+      </Tween>);
+  }
+}
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/childrenUpdate.html

@@ -0,0 +1 @@
+placeholder

examples/childrenUpdate.js

@@ -0,0 +1,42 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tweenData: { translateX: '100px', duration: 3000 },
+      childTweenData: { translateY: 200, duration: 1000 },
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        tweenData: { opacity: 0.5, marginTop: 100, duration: 1000 },
+      });
+    }, 1000);
+    setTimeout(() => {
+      this.setState({
+        childTweenData: [
+          { translateY: 100 },
+          { rotateY: 180, duration: 1000 },
+          { rotateY: 0, duration: 1000 },
+          { delay: -800, translateY: 0 },
+        ],
+      });
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <Tween animation={this.state.tweenData}
+        style={{ height: 300, width: 60, textAlign: 'center' }}
+      >
+        <div>大面包</div>
+        <Tween animation={this.state.childTweenData} key="tween">小馒头</Tween>
+      </Tween>);
+  }
+}
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/color.html

@@ -0,0 +1 @@
+placeholder

examples/color.js

@@ -0,0 +1,18 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+function Demo() {
+  return (
+    <Tween
+      animation={[
+        { height: 300, backgroundColor: 'hsla(360,50%,50%,0.5)' },
+        { color: 'white' }, { borderColor: 'red' },
+      ]}
+      style={{ border: '1px solid #000' }}
+    >
+      <div>执行动效</div>
+    </Tween>);
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/control.html

@@ -0,0 +1 @@
+placeholder

examples/control.js

@@ -0,0 +1,89 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      paused: true,
+      reverse: false,
+      reverseDelay: 0,
+    };
+  }
+
+  onPlay = () => {
+    this.setState({
+      paused: false,
+      reverse: false,
+      moment: null,
+    });
+  }
+
+  onPause = () => {
+    this.setState({
+      paused: true,
+      moment: null,
+    });
+  }
+
+  onReverse = () => {
+    this.setState({
+      reverse: true,
+      reverseDelay: 0,
+      paused: false,
+      moment: null,
+    });
+  }
+
+  onReverseDelay = () => {
+    this.setState({
+      reverse: true,
+      reverseDelay: 1000,
+      paused: false,
+      moment: null,
+    });
+  }
+
+  onRestart = () => {
+    this.setState({
+      moment: 0,
+      paused: false,
+      reverse: false,
+    });
+  }
+
+  onMoment = () => {
+    this.setState({
+      moment: 500,
+    }, () => {
+      this.setState({
+        moment: null,
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={{ height: 200 }}>
+          <Tween animation={[{ translateX: '500px', duration: 1000 }, { y: 100 }, { x: 100 }]}
+            paused={this.state.paused}
+            reverse={this.state.reverse}
+            reverseDelay={this.state.reverseDelay}
+            moment={this.state.moment}
+            style={{ opacity: 1, width: 100, transform: 'translate(50px,30px)' }}
+          >
+            <div>执行动效</div>
+          </Tween>
+        </div>
+        <button onClick={this.onPlay}>play</button>
+        <button onClick={this.onPause}>pause</button>
+        <button onClick={this.onReverse}>reverse</button>
+        <button onClick={this.onReverseDelay}>reverse Delay 1000</button>
+        <button onClick={this.onRestart}>restart</button>
+        <button onClick={this.onMoment}>moment to 500</button>
+      </div>);
+  }
+}
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/delay.html

@@ -0,0 +1 @@
+placeholder

examples/delay.js

@@ -0,0 +1,14 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+function Demo() {
+  return (
+    <Tween animation={[{ translateX: '500px', delay: 1000 }, { delay: -350, y: 150 }]}
+      style={{ opacity: 1, height: 300, transform: 'translate(50px,30px)' }}
+    >
+      <div>执行动效</div>
+    </Tween>);
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/easingPath.html

@@ -0,0 +1 @@
+placeholder