Skip to content

Commit a5dab5b

Browse files
jljsj33jljsj33
committed
re demo
1 parent df48416 commit a5dab5b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1135
-0
lines changed

‎examples/bezier.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/bezier.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import Tween from 'rc-tween-one';
2+
import React from 'react';
3+
import ReactDom from 'react-dom';
4+
import BezierPlugin from '../src/plugin/BezierPlugin';
5+
6+
Tween.plugins.push(BezierPlugin);
7+
function Demo() {
8+
return (
9+
<div style={{ position: 'relative', height: 300 }}>
10+
<Tween
11+
animation={{
12+
bezier: {
13+
type: 'thru', autoRotate: true,
14+
vars: [{ x: 200, y: 200 }, { x: 400, y: 0 }, { x: 600, y: 200 }, { x: 800, y: 0 }],
15+
},
16+
duration: 5000,
17+
}}
18+
style={{ width: 100 }}
19+
>
20+
<div>执行动效</div>
21+
</Tween>
22+
<div
23+
style={{
24+
width: 5, height: 5, background: '#000',
25+
position: 'absolute', top: 0, transform: 'translate(200px,200px)',
26+
}}
27+
/>
28+
<div
29+
style={{
30+
width: 5, height: 5, background: '#000', position: 'absolute',
31+
top: 0, transform: 'translate(400px,0px)',
32+
}}
33+
/>
34+
<div
35+
style={{
36+
width: 5, height: 5, background: '#000', position: 'absolute',
37+
top: 0, transform: 'translate(600px,200px)',
38+
}}
39+
/>
40+
<div
41+
style={{
42+
width: 5, height: 5, background: '#000', position: 'absolute',
43+
top: 0, transform: 'translate(800px,0px)',
44+
}}
45+
/>
46+
</div>);
47+
}
48+
49+
ReactDom.render(<Demo />, document.getElementById('__react-content'));

‎examples/blur.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/blur.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Tween from 'rc-tween-one';
2+
import React from 'react';
3+
import ReactDom from 'react-dom';
4+
5+
function Demo() {
6+
return (
7+
<div>
8+
<div>
9+
filter 里的滤镜，&apos;grayScale&apos;, &apos;sepia&apos;, &apos;hueRotate&apos;,
10+
&apos;invert&apos;, &apos;brightness&apos;, &apos;contrast&apos;, &apos;blur&apos;
11+
</div>
12+
<Tween animation={{ blur: '10px', sepia: '100%', duration: 2000 }}
13+
style={{ filter: 'blur(30px)' }}
14+
>
15+
<img
16+
width="500"
17+
src="https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg"
18+
alt="img"
19+
/>
20+
</Tween>
21+
</div>);
22+
}
23+
24+
ReactDom.render(<Demo />, document.getElementById('__react-content'));

‎examples/children.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/children.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import Tween from 'rc-tween-one';
2+
import React from 'react';
3+
import ReactDom from 'react-dom';
4+
import ChildrenPlugin from '../src/plugin/ChildrenPlugin';
5+
6+
import '../assets/index.less';
7+
8+
Tween.plugins.push(ChildrenPlugin);
9+
function Demo() {
10+
return (
11+
<div>
12+
<h2>子级的数值变化的动画 - children plugin</h2>
13+
<div style={{ marginBottom: 20 }}>
14+
<span>基本数字：</span>
15+
<Tween
16+
animation={{ Children: { value: 10000 } }}
17+
/>
18+
</div>
19+
<div style={{ marginBottom: 20 }}>
20+
<span>设置开始数字：</span>
21+
<Tween
22+
animation={{ Children: { value: 10000 } }}
23+
>
24+
9990
25+
</Tween>
26+
</div>
27+
<div style={{ marginBottom: 20 }}>
28+
<span>只取整数：</span>
29+
<Tween
30+
animation={{ Children: { value: 10000, floatLength: 0 } }}
31+
/>
32+
</div>
33+
<div style={{ marginBottom: 20 }}>
34+
<span>基本数字, 小数后取两位, float length 2：</span>
35+
<Tween
36+
animation={{ Children: { value: 10000, floatLength: 2 } }}
37+
/>
38+
</div>
39+
<div style={{ marginBottom: 20 }}>
40+
<span>格式化钱符：</span>
41+
<div>
42+
<span>¥</span>
43+
<Tween
44+
animation={{ Children: { value: 10000, floatLength: 2, formatMoney: true } }}
45+
component="span"
46+
>
47+
20,000.12
48+
</Tween>
49+
</div>
50+
</div>
51+
<div style={{ marginBottom: 20 }}>
52+
<span>自定义钱符格式：</span>
53+
<div>
54+
<span>¥</span>
55+
<Tween
56+
animation={{
57+
Children: {
58+
value: 10000,
59+
floatLength: 2,
60+
formatMoney: { thousand: '.', decimal: ',' },
61+
},
62+
}}
63+
component="span"
64+
>
65+
20.000,12
66+
</Tween>
67+
</div>
68+
</div>
69+
</div>);
70+
}
71+
72+
ReactDom.render(<Demo />, document.getElementById('__react-content'));

‎examples/childrenNullChange.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/childrenNullChange.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Tween from 'rc-tween-one';
2+
import React from 'react';
3+
import ReactDom from 'react-dom';
4+
import PropTypes from 'prop-types';
5+
import '../assets/index.less';
6+
7+
function Div({ show, children }) {
8+
return show ? <div>{children}</div> : null;
9+
}
10+
11+
Div.propTypes = {
12+
show: PropTypes.bool,
13+
children: PropTypes.any,
14+
}
15+
16+
class Demo extends React.Component {
17+
state = {
18+
show: false,
19+
}
20+
componentDidMount() {
21+
setTimeout(() => {
22+
this.setState({
23+
show: true,
24+
});
25+
}, 1000);
26+
}
27+
render() {
28+
return (
29+
<Tween
30+
animation={{ x: 300 }}
31+
component={Div}
32+
componentProps={{ show: this.state.show }}
33+
>
34+
test
35+
</Tween>);
36+
}
37+
}
38+
ReactDom.render(<Demo />, document.getElementById('__react-content'));

‎examples/childrenUpdate.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/childrenUpdate.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Tween from 'rc-tween-one';
2+
import React from 'react';
3+
import ReactDom from 'react-dom';
4+
5+
class Demo extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
tweenData: { translateX: '100px', duration: 3000 },
10+
childTweenData: { translateY: 200, duration: 1000 },
11+
};
12+
}
13+
14+
componentDidMount() {
15+
setTimeout(() => {
16+
this.setState({
17+
tweenData: { opacity: 0.5, marginTop: 100, duration: 1000 },
18+
});
19+
}, 1000);
20+
setTimeout(() => {
21+
this.setState({
22+
childTweenData: [
23+
{ translateY: 100 },
24+
{ rotateY: 180, duration: 1000 },
25+
{ rotateY: 0, duration: 1000 },
26+
{ delay: -800, translateY: 0 },
27+
],
28+
});
29+
}, 2000);
30+
}
31+
32+
render() {
33+
return (
34+
<Tween animation={this.state.tweenData}
35+
style={{ height: 300, width: 60, textAlign: 'center' }}
36+
>
37+
<div>大面包</div>
38+
<Tween animation={this.state.childTweenData} key="tween">小馒头</Tween>
39+
</Tween>);
40+
}
41+
}
42+
ReactDom.render(<Demo />, document.getElementById('__react-content'));

0 commit comments

Comments
 (0)