Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9a9e806

Browse files
add 9cubes loader
1 parent da836e3 commit 9a9e806

File tree

9 files changed

+226
-25
lines changed

9 files changed

+226
-25
lines changed

‎README.md

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,21 @@ import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, ...} from 'react-nat
3232

3333
Here is currently available types:
3434

35-
- PulseLoader
36-
- DotsLoader
37-
- TextLoader
38-
- BubblesLoader
39-
- CirclesLoader
40-
- BreathingLoader
41-
- RippleLoader
42-
- LinesLoader
43-
- MusicBarLoader
44-
- EatBeanLoader
45-
- DoubleCircleLoader
46-
- RotationCircleLoader
47-
- RotationHoleLoader
35+
- [PulseLoader](#PulseLoader)
36+
- [DotsLoader](#DotsLoader)
37+
- [TextLoader](#TextLoader)
38+
- [BubblesLoader](#BubblesLoader)
39+
- [CirclesLoader](#CirclesLoader)
40+
- [BreathingLoader](#BreathingLoader)
41+
- [RippleLoader](#RippleLoader)
42+
- [LinesLoader](#LinesLoader)
43+
- [MusicBarLoader](#MusicBarLoader)
44+
- [EatBeanLoader](#EatBeanLoader)
45+
- [DoubleCircleLoader](#DoubleCircleLoader)
46+
- [RotationCircleLoader](#RotationCircleLoader)
47+
- [RotationHoleLoader](#RotationHoleLoader)
48+
- [CirclesRotationScaleLoader](#CirclesRotationScaleLoader)
49+
- [NineCubesLoader](#NineCubesLoader)
4850

4951
```
5052
render(){
@@ -186,6 +188,14 @@ render(){
186188
| color | string | '#1e90ff' | indicator's color |
187189

188190

191+
##### NineCubesLoader
192+
193+
| prop | type | default | description |
194+
| ---- | ---- | ---- | ---- |
195+
| size | number | 20 | each cube's size |
196+
| color | string | '#1e90ff' | indicator's color |
197+
198+
189199
## License
190200

191201
MIT

‎index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import DoubleCircle from './lib/loader/DoubleCircleLoader';
1717
import RotationCircle from './lib/loader/RotationCircleLoader';
1818
import RotationHole from './lib/loader/RotationHoleLoader';
1919
import CirclesRotationScale from './lib/loader/CirclesRotationScaleLoader';
20+
//import Square from './lib/loader/SquareLoader';
21+
import NineCubes from './lib/loader/NineCubesLoader';
2022

2123
export const PulseLoader = Pulse;
2224
export const DotsLoader = Dots;
@@ -31,4 +33,6 @@ export const EatBeanLoader = EatBean;
3133
export const DoubleCircleLoader = DoubleCircle;
3234
export const RotationCircleLoader = RotationCircle;
3335
export const RotationHoleLoader = RotationHole;
34-
export const CirclesRotationScaleLoader = CirclesRotationScale;
36+
export const CirclesRotationScaleLoader = CirclesRotationScale;
37+
//export const SquareLoader = Square;
38+
export const NineCubesLoader = NineCubes;

‎lib/loader/DotsLoader.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,23 @@ export default class DotsLoader extends Component {
2424
constructor(props) {
2525
super(props);
2626
this.state = {
27-
opacities: [new Animated.Value(1), new Animated.Value(1), new Animated.Value(1)]
27+
scales: [new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)]
2828
};
29-
this.timers = [];
3029
this._animation = this._animation.bind(this);
3130
}
3231

3332
_renderCircle(i) {
3433
const {color, size, betweenSpace} = this.props;
3534
return (
36-
<AnimatedCircle radius={size} fill={color} x={size + i * (size+betweenSpace)} y={size}
37-
scale={this.state.opacities[i]}/>
35+
<AnimatedCircle radius={size} fill={color} x={size/2 + i * (size+betweenSpace)} y={size/2}
36+
scale={this.state.scales[i]}/>
3837
);
3938
}
4039

4140
render() {
4241
const {size, betweenSpace} = this.props;
4342
return (
44-
<Surface width={size*3 + (size+betweenSpace)*2} height={size*2}>
43+
<Surface width={size*3 + betweenSpace*2} height={size}>
4544
{this._renderCircle(0)}
4645
{this._renderCircle(1)}
4746
{this._renderCircle(2)}
@@ -60,8 +59,8 @@ export default class DotsLoader extends Component {
6059
_animation() {
6160
function seq(self, i) {
6261
return Animated.sequence([
63-
Animated.timing(self.state.opacities[i], {toValue: 0.2, duration: 300, delay: i*200}),
64-
Animated.timing(self.state.opacities[i], {toValue: 1, duration: 300})
62+
Animated.timing(self.state.scales[i], {toValue: 1, duration: 300, delay: (i+1)*200}),
63+
Animated.timing(self.state.scales[i], {toValue: 0, duration: 300,delay: 50})
6564
])
6665
}
6766

‎lib/loader/NineCubesLoader.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/**
2+
* Created by wangdi on 19/12/16.
3+
*/
4+
'use strict';
5+
6+
import React, {Component, PropTypes} from 'react';
7+
import {Animated, ART} from 'react-native';
8+
const {Surface} = ART;
9+
import Bar3 from '../shape/Bar3';
10+
const AnimatedBar = Animated.createAnimatedComponent(Bar3);
11+
12+
export default class NineCubesLoader extends Component{
13+
constructor(props) {
14+
super(props);
15+
this.state = {
16+
scales: [
17+
new Animated.Value(0),
18+
new Animated.Value(0),
19+
new Animated.Value(0),
20+
new Animated.Value(0),
21+
new Animated.Value(0)
22+
]
23+
};
24+
this._animation = this._animation.bind(this);
25+
}
26+
27+
static propTypes = {
28+
size: PropTypes.number,
29+
color: PropTypes.string
30+
};
31+
32+
static defaultProps = {
33+
size: 20,
34+
color: '#1e90ff'
35+
};
36+
37+
_renderCube(i, j, scaleID){
38+
const {size, color} = this.props;
39+
return (
40+
<AnimatedBar
41+
fill={color}
42+
width={size}
43+
height={size}
44+
x={(size/2)*(i*2+1)}
45+
y={(size/2)*(j*2+1)}
46+
scale={this.state.scales[scaleID]}
47+
/>
48+
);
49+
}
50+
51+
render(){
52+
const {size, color} = this.props;
53+
return (
54+
<Surface width={size*3} height={size*3}>
55+
{this._renderCube(0,0,2)}
56+
{this._renderCube(0,1,1)}
57+
{this._renderCube(0,2,0)}
58+
{this._renderCube(1,0,3)}
59+
{this._renderCube(1,1,2)}
60+
{this._renderCube(1,2,1)}
61+
{this._renderCube(2,0,4)}
62+
{this._renderCube(2,1,3)}
63+
{this._renderCube(2,2,2)}
64+
</Surface>
65+
);
66+
}
67+
68+
componentDidMount(){
69+
this._animation();
70+
}
71+
72+
componentWillUnmount(){
73+
this.unmounted = true;
74+
}
75+
76+
_animation(){
77+
function seq(self, i) {
78+
return Animated.sequence([
79+
Animated.timing(self.state.scales[i], {toValue: 1, duration: 300, delay: (i+1)*100}),
80+
Animated.timing(self.state.scales[i], {toValue: 0, duration: 300, delay: 200})
81+
])
82+
}
83+
84+
Animated.parallel([
85+
seq(this,0),seq(this,1),seq(this,2),seq(this,3),seq(this,4),
86+
]).start(()=>{
87+
if(!this.unmounted)
88+
this._animation();
89+
});
90+
}
91+
}

‎lib/loader/SquareLoader.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/**
2+
* Created by wangdi on 19/12/16.
3+
*/
4+
'use strict';
5+
6+
import React, {Component, PropTypes} from 'react';
7+
import {ART, Animated, View, Easing} from 'react-native';
8+
const {Surface, Transform, Path, Shape} = ART;
9+
import AnimatedBar from '../animated/AnimatedBar';
10+
11+
export default class SquareLoader extends Component {
12+
constructor(props) {
13+
super(props);
14+
this.state = {
15+
rotate: new Animated.ValueXY({x: 0, y: 0})
16+
};
17+
this._animation = this._animation.bind(this);
18+
}
19+
20+
static propTypes = {
21+
size: PropTypes.number,
22+
color: PropTypes.string
23+
};
24+
25+
static defaultProps = {
26+
size: 50,
27+
color: '#1e90ff'
28+
};
29+
30+
render() {
31+
const {size, color} = this.props;
32+
return (
33+
34+
<Animated.View style={{
35+
transform: [{
36+
rotateX: this.state.rotate.x.interpolate({
37+
inputRange: [0, 180],
38+
outputRange: ['0deg', '180deg']
39+
}),
40+
rotateY: this.state.rotate.y.interpolate({
41+
inputRange: [0, 180],
42+
outputRange: ['0deg', '180deg']
43+
}),
44+
}], backgroundColor: color, width: size, height: size}}/>
45+
);
46+
}
47+
48+
componentDidMount() {
49+
this._animation();
50+
}
51+
52+
componentWillUnmount() {
53+
54+
}
55+
56+
_animation() {
57+
Animated.sequence([
58+
Animated.timing(this.state.rotate, {toValue: {x: 0, y: 180}, duration: 1000, delay: 100}),
59+
Animated.timing(this.state.rotate, {toValue: {x: 180, y: 0}, duration: 1000, delay: 100}),
60+
61+
]).start(() => {
62+
if (!this.unmounted) {
63+
this.state.rotate.setValue({x: 0, y: 0});
64+
this._animation();
65+
}
66+
});
67+
}
68+
}

‎lib/shape/Bar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Created by wangdi on 10/12/16.
3-
* the scale center of this bar is center
3+
* the scale center of this bar is left-center
44
*/
55
'use strict';
66

‎lib/shape/Bar2.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/**
22
* Created by wangdi on 10/12/16.
3-
* the scale center of this bar is bottom
3+
* the scale center of this bar is bottom-center
44
*/
55
'use strict';
66

77
import React, {Component, PropTypes} from 'react';
88
import {ART} from 'react-native';
99
const {Shape, Path} = ART;
1010

11-
export default class Bar extends Component {
11+
export default class Bar2 extends Component {
1212
static propTypes = {
1313
width: PropTypes.number.isRequired,
1414
height: PropTypes.number.isRequired

‎lib/shape/Bar3.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Created by wangdi on 19/12/16.
3+
* the scale center of this bar is center
4+
*/
5+
'use strict';
6+
7+
import React, {Component, PropTypes} from 'react';
8+
import {ART} from 'react-native';
9+
const {Shape, Path} = ART;
10+
11+
export default class Bar3 extends Component {
12+
static propTypes = {
13+
width: PropTypes.number.isRequired,
14+
height: PropTypes.number.isRequired
15+
};
16+
17+
render() {
18+
const {width, height} = this.props;
19+
20+
const path = Path()
21+
.moveTo(width/2, height / 2)
22+
.lineTo(-width/2, height / 2)
23+
.lineTo(-width/2, -height / 2)
24+
.lineTo(width/2, -height / 2)
25+
.close();
26+
27+
return <Shape {...this.props} d={path}/>;
28+
}
29+
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-indicator",
3-
"version": "0.5.7",
3+
"version": "0.6.0",
44
"description": "React Native Indicator Component",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /