react-native-indicator
Advanced tools
Comparing version 1.0.0 to 1.1.0
@@ -25,3 +25,3 @@ import Breathing from './lib/loader/BreathingLoader'; | ||
export const ColorDotsLoader = ColorDots; | ||
export const DotsLoader = Dots; | ||
export const DotsLoader = Dots; | ||
export const DoubleCircleLoader = DoubleCircle; | ||
@@ -28,0 +28,0 @@ export const EatBeanLoader = EatBean; |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class BreathingLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
strokeWidth: PropTypes.number, | ||
frequency: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
strokeWidth: PropTypes.number, | ||
frequency: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 30, | ||
strokeWidth: 3, | ||
frequency: 800 | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 30, | ||
strokeWidth: 3, | ||
frequency: 800, | ||
}; | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
scale: new Animated.Value(0.1) | ||
}; | ||
} | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
scale: new Animated.Value(0.1), | ||
}; | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.scale, { toValue: 1, duration: this.props.frequency }), | ||
Animated.timing(this.state.scale, { toValue: 0.1, duration: this.props.frequency }) | ||
]).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
}; | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.scale, { | ||
toValue: 1, | ||
duration: this.props.frequency, | ||
}), | ||
Animated.timing(this.state.scale, { | ||
toValue: 0.1, | ||
duration: this.props.frequency, | ||
}), | ||
]).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
}; | ||
render() { | ||
const { color, size, strokeWidth } = this.props; | ||
return ( | ||
<Surface width={size + strokeWidth} height={size + strokeWidth}> | ||
<AnimatedCircle | ||
radius={size} | ||
stroke={color} | ||
strokeWidth={strokeWidth} | ||
scale={this.state.scale} | ||
x={(size + strokeWidth) / 2} | ||
y={(size + strokeWidth) / 2} | ||
/> | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, size, strokeWidth } = this.props; | ||
return ( | ||
<Surface width={size + strokeWidth} height={size + strokeWidth}> | ||
<AnimatedCircle | ||
radius={size} | ||
stroke={color} | ||
strokeWidth={strokeWidth} | ||
scale={this.state.scale} | ||
x={(size + strokeWidth) / 2} | ||
y={(size + strokeWidth) / 2} | ||
/> | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class BubblesLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
dotRadius: PropTypes.number, | ||
size: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
dotRadius: PropTypes.number, | ||
size: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
dotRadius: 10, | ||
size: 40 | ||
}; | ||
static defaultProps = { | ||
color, | ||
dotRadius: 10, | ||
size: 40, | ||
}; | ||
state = { | ||
opacities: [ | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1) | ||
] | ||
}; | ||
eachDegree = 360 / this.state.opacities.length; | ||
timers = []; | ||
state = { | ||
opacities: [ | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
], | ||
}; | ||
eachDegree = 360 / this.state.opacities.length; | ||
timers = []; | ||
componentDidMount() { | ||
this.state.opacities.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i) | ||
}, i * 150); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentDidMount() { | ||
this.state.opacities.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i); | ||
}, i * 150); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.opacities[i], { toValue: 0.2, duration: 600 }), | ||
Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 }) | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.opacities[i], { toValue: 0.2, duration: 600 }), | ||
Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 }), | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
render() { | ||
const { size, dotRadius, color } = this.props; | ||
const { opacities } = this.state; | ||
return ( | ||
<Surface width={size + dotRadius} height={size + dotRadius}> | ||
{opacities.map((item, i) => { | ||
let radian = (i * this.eachDegree) * Math.PI / 180; | ||
let x = Math.round(size / 2 * Math.cos(radian)) + size / 2 + dotRadius / 2; | ||
let y = Math.round(size / 2 * Math.sin(radian)) + size / 2 + dotRadius / 2; | ||
return ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={dotRadius} | ||
fill={color} | ||
x={x} | ||
y={y} | ||
scale={opacities[i]} | ||
/> | ||
) | ||
})} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { size, dotRadius, color } = this.props; | ||
const { opacities } = this.state; | ||
return ( | ||
<Surface width={size + dotRadius} height={size + dotRadius}> | ||
{opacities.map((item, i) => { | ||
let radian = (i * this.eachDegree * Math.PI) / 180; | ||
let x = Math.round((size / 2) * Math.cos(radian)) + size / 2 + dotRadius / 2; | ||
let y = Math.round((size / 2) * Math.sin(radian)) + size / 2 + dotRadius / 2; | ||
return ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={dotRadius} | ||
fill={color} | ||
x={x} | ||
y={y} | ||
scale={opacities[i]} | ||
/> | ||
); | ||
})} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class CirclesLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
dotRadius: PropTypes.number, | ||
size: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
dotRadius: PropTypes.number, | ||
size: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
dotRadius: 8, | ||
size: 40 | ||
}; | ||
static defaultProps = { | ||
color, | ||
dotRadius: 8, | ||
size: 40, | ||
}; | ||
state = { | ||
opacities: [ | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1) | ||
] | ||
}; | ||
eachDegree = 360 / this.state.opacities.length; | ||
timers = []; | ||
state = { | ||
opacities: [ | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
new Animated.Value(1), | ||
], | ||
}; | ||
eachDegree = 360 / this.state.opacities.length; | ||
timers = []; | ||
componentDidMount() { | ||
this.state.opacities.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i) | ||
}, i * 150); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentDidMount() { | ||
this.state.opacities.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i); | ||
}, i * 150); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.opacities[i], { toValue: 0.1, duration: 600 }), | ||
Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 }) | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.opacities[i], { toValue: 0.1, duration: 600 }), | ||
Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 }), | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
render() { | ||
const { size, dotRadius, color } = this.props; | ||
const { opacities } = this.state; | ||
return ( | ||
<Surface width={size + dotRadius} height={size + dotRadius}> | ||
{opacities.map((item, i) => { | ||
let radian = (i * this.eachDegree) * Math.PI / 180; | ||
let x = Math.round(size / 2 * Math.cos(radian)) + size / 2 + dotRadius / 2; | ||
let y = Math.round(size / 2 * Math.sin(radian)) + size / 2 + dotRadius / 2; | ||
return ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={dotRadius} | ||
fill={color} | ||
x={x} | ||
y={y} | ||
opacity={opacities[i]} | ||
/> | ||
) | ||
})} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { size, dotRadius, color } = this.props; | ||
const { opacities } = this.state; | ||
return ( | ||
<Surface width={size + dotRadius} height={size + dotRadius}> | ||
{opacities.map((item, i) => { | ||
let radian = (i * this.eachDegree * Math.PI) / 180; | ||
let x = Math.round((size / 2) * Math.cos(radian)) + size / 2 + dotRadius / 2; | ||
let y = Math.round((size / 2) * Math.sin(radian)) + size / 2 + dotRadius / 2; | ||
return ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={dotRadius} | ||
fill={color} | ||
x={x} | ||
y={y} | ||
opacity={opacities[i]} | ||
/> | ||
); | ||
})} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { ART, Animated, Easing } from 'react-native'; | ||
import { Animated, Easing } from 'react-native'; | ||
import { Surface, Group } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface, Group } = ART; | ||
export default class RotationCircleLoader extends React.PureComponent { | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
}; | ||
static defaultProps = { | ||
size: 50, | ||
color, | ||
}; | ||
static defaultProps = { | ||
size: 50, | ||
color, | ||
}; | ||
state = { | ||
degree: new Animated.Value(0), | ||
scales: [new Animated.Value(0), new Animated.Value(0)] | ||
}; | ||
timers = []; | ||
state = { | ||
degree: new Animated.Value(0), | ||
scales: [new Animated.Value(0), new Animated.Value(0)], | ||
}; | ||
timers = []; | ||
componentDidMount() { | ||
this._animation(); | ||
this.state.scales.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animationCircles(i) | ||
}, i * 500); | ||
this.timers.push(id); | ||
}); | ||
componentDidMount() { | ||
this._animation(); | ||
this.state.scales.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animationCircles(i); | ||
}, i * 500); | ||
this.timers.push(id); | ||
}); | ||
} | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.degree, { | ||
toValue: 360, | ||
duration: 2000, | ||
easing: Easing.linear, | ||
}), | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.degree.setValue(0); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.degree, { | ||
toValue: 360, | ||
duration: 2000, | ||
easing: Easing.linear | ||
}) | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.degree.setValue(0); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
_animationCircles = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000 }), | ||
Animated.timing(this.state.scales[i], { toValue: 0.05, duration: 1000 }), | ||
]).start(() => { | ||
!this.unmounted && this._animationCircles(i); | ||
}); | ||
}; | ||
_animationCircles = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000 }), | ||
Animated.timing(this.state.scales[i], { toValue: 0.05, duration: 1000 }), | ||
]).start(() => { | ||
!this.unmounted && this._animationCircles(i); | ||
}); | ||
}; | ||
render() { | ||
const { size, color } = this.props; | ||
const degree = this.state.degree.interpolate({ | ||
inputRange: [0, 360], | ||
outputRange: ['0deg', '360deg'] | ||
}); | ||
return ( | ||
<Animated.View | ||
style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
<Surface width={size} height={size}> | ||
<Group> | ||
<AnimatedCircle | ||
fill={color} | ||
radius={size / 2} | ||
x={size / 2} | ||
y={size / 4} | ||
scale={this.state.scales[0]} | ||
/> | ||
<AnimatedCircle | ||
fill={color} | ||
radius={size / 2} | ||
x={size / 2} | ||
y={size / 4 * 3} | ||
scale={this.state.scales[1]} | ||
/> | ||
</Group> | ||
</Surface> | ||
</Animated.View> | ||
); | ||
} | ||
render() { | ||
const { size, color } = this.props; | ||
const degree = this.state.degree.interpolate({ | ||
inputRange: [0, 360], | ||
outputRange: ['0deg', '360deg'], | ||
}); | ||
return ( | ||
<Animated.View | ||
style={{ | ||
transform: [{ rotate: degree }], | ||
backgroundColor: 'rgba(0,0,0,0)', | ||
}} | ||
> | ||
<Surface width={size} height={size}> | ||
<Group> | ||
<AnimatedCircle | ||
fill={color} | ||
radius={size / 2} | ||
x={size / 2} | ||
y={size / 4} | ||
scale={this.state.scales[0]} | ||
/> | ||
<AnimatedCircle | ||
fill={color} | ||
radius={size / 2} | ||
x={size / 2} | ||
y={(size / 4) * 3} | ||
scale={this.state.scales[1]} | ||
/> | ||
</Group> | ||
</Surface> | ||
</Animated.View> | ||
); | ||
} | ||
} |
import React, { Component } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART, Easing } from 'react-native'; | ||
import { Animated, Easing } from 'react-native'; | ||
import { Surface, Group } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
const { Surface, Group } = ART; | ||
export default class ColorDotsLoader extends Component { | ||
static propTypes = { | ||
size: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
color1: PropTypes.string, | ||
color2: PropTypes.string, | ||
color3: PropTypes.string | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
color1: PropTypes.string, | ||
color2: PropTypes.string, | ||
color3: PropTypes.string, | ||
}; | ||
static defaultProps = { | ||
size: 15, | ||
betweenSpace: 7, | ||
color1: '#ff4500', | ||
color2: '#ffd700', | ||
color3: '#9acd32' | ||
}; | ||
static defaultProps = { | ||
size: 15, | ||
betweenSpace: 7, | ||
color1: '#ff4500', | ||
color2: '#ffd700', | ||
color3: '#9acd32', | ||
}; | ||
constructor(props) { | ||
super(props); | ||
const red = this.props.color1; | ||
const yellow = this.props.color2; | ||
const green = this.props.color3; | ||
this.state = { | ||
colors: [red, red, red], | ||
color: yellow, | ||
x: new Animated.Value(-this.props.size / 2) | ||
}; | ||
this.patterns = [ | ||
[yellow, red, red], | ||
[yellow, yellow, red], | ||
[yellow, yellow, yellow], | ||
[green, yellow, yellow], | ||
[green, green, yellow], | ||
[green, green, green], | ||
[red, green, green], | ||
[red, red, green], | ||
[red, red, red], | ||
]; | ||
this.timers = []; | ||
} | ||
constructor(props) { | ||
super(props); | ||
const red = this.props.color1; | ||
const yellow = this.props.color2; | ||
const green = this.props.color3; | ||
this.state = { | ||
colors: [red, red, red], | ||
color: yellow, | ||
x: new Animated.Value(-this.props.size / 2), | ||
}; | ||
this.patterns = [ | ||
[yellow, red, red], | ||
[yellow, yellow, red], | ||
[yellow, yellow, yellow], | ||
[green, yellow, yellow], | ||
[green, green, yellow], | ||
[green, green, green], | ||
[red, green, green], | ||
[red, red, green], | ||
[red, red, red], | ||
]; | ||
this.timers = []; | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = () => { | ||
const { size, betweenSpace, color1, color2, color3 } = this.props; | ||
const id1 = setTimeout(() => { | ||
this.setState({ color: color3 }) | ||
}, 600); | ||
const id2 = setTimeout(() => { | ||
this.setState({ color: color1 }) | ||
}, 1200); | ||
this.timers.push(id1); | ||
this.timers.push(id2); | ||
this.patterns.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this.setState({ colors: this.patterns[i] }); | ||
}, i * 200 + 100); | ||
this.timers.push(id); | ||
}); | ||
_animation = () => { | ||
const { size, betweenSpace, color1, color2, color3 } = this.props; | ||
const id1 = setTimeout(() => { | ||
this.setState({ color: color3 }); | ||
}, 600); | ||
const id2 = setTimeout(() => { | ||
this.setState({ color: color1 }); | ||
}, 1200); | ||
this.timers.push(id1); | ||
this.timers.push(id2); | ||
this.patterns.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this.setState({ colors: this.patterns[i] }); | ||
}, i * 200 + 100); | ||
this.timers.push(id); | ||
}); | ||
Animated.sequence([ | ||
Animated.timing(this.state.x, { | ||
toValue: size * 3 + betweenSpace * 2 + size / 2, | ||
duration: 600, | ||
easing: Easing.linear | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: -size / 2, | ||
duration: 0 | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: size * 3 + betweenSpace * 2 + size / 2, | ||
duration: 600, | ||
easing: Easing.linear | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: -size / 2, | ||
duration: 0 | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: size * 3 + betweenSpace * 2 + size / 2, | ||
duration: 600, | ||
easing: Easing.linear | ||
}) | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.x.setValue(-size / 2); | ||
this.setState({ color: color2 }); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
Animated.sequence([ | ||
Animated.timing(this.state.x, { | ||
toValue: size * 3 + betweenSpace * 2 + size / 2, | ||
duration: 600, | ||
easing: Easing.linear, | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: -size / 2, | ||
duration: 0, | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: size * 3 + betweenSpace * 2 + size / 2, | ||
duration: 600, | ||
easing: Easing.linear, | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: -size / 2, | ||
duration: 0, | ||
}), | ||
Animated.timing(this.state.x, { | ||
toValue: size * 3 + betweenSpace * 2 + size / 2, | ||
duration: 600, | ||
easing: Easing.linear, | ||
}), | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.x.setValue(-size / 2); | ||
this.setState({ color: color2 }); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
render() { | ||
const { size, betweenSpace } = this.props; | ||
const { color, colors } = this.state; | ||
return ( | ||
<Surface width={size * 3 + betweenSpace * 2} height={size}> | ||
<Group> | ||
{colors.map((item, i) => ( | ||
<AnimatedCircle | ||
key={i} | ||
fill={item} | ||
radius={size} | ||
x={size / 2 + i * (size + betweenSpace)} | ||
y={size / 2} | ||
/> | ||
))} | ||
<AnimatedCircle | ||
fill={color} | ||
radius={size} | ||
x={this.state.x} | ||
y={size / 2} | ||
/> | ||
</Group> | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { size, betweenSpace } = this.props; | ||
const { color, colors } = this.state; | ||
return ( | ||
<Surface width={size * 3 + betweenSpace * 2} height={size}> | ||
<Group> | ||
{colors.map((item, i) => ( | ||
<AnimatedCircle | ||
key={i} | ||
fill={item} | ||
radius={size} | ||
x={size / 2 + i * (size + betweenSpace)} | ||
y={size / 2} | ||
/> | ||
))} | ||
<AnimatedCircle fill={color} radius={size} x={this.state.x} y={size / 2} /> | ||
</Group> | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class DotsLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
betweenSpace: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 10, | ||
betweenSpace: 5 | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 10, | ||
betweenSpace: 5, | ||
}; | ||
state = { | ||
scales: [new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)] | ||
}; | ||
state = { | ||
scales: [new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)], | ||
}; | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.scales[i], { | ||
toValue: 1, | ||
duration: 300, | ||
delay: (i + 1) * 200 | ||
}), | ||
Animated.timing(self.state.scales[i], { toValue: 0, duration: 300, delay: 50 }) | ||
]) | ||
} | ||
_animation = () => { | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.scales[i], { | ||
toValue: 1, | ||
duration: 300, | ||
delay: (i + 1) * 200, | ||
}), | ||
Animated.timing(self.state.scales[i], { | ||
toValue: 0, | ||
duration: 300, | ||
delay: 50, | ||
}), | ||
]); | ||
} | ||
Animated.parallel([ | ||
seq(this, 0), seq(this, 1), seq(this, 2) | ||
]).start(() => { | ||
if (!this.unmounted) | ||
this._animation(); | ||
}); | ||
}; | ||
Animated.parallel([seq(this, 0), seq(this, 1), seq(this, 2)]).start(() => { | ||
if (!this.unmounted) this._animation(); | ||
}); | ||
}; | ||
_renderCircle = (i) => { | ||
const { color, size, betweenSpace } = this.props; | ||
return ( | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
x={size / 2 + i * (size + betweenSpace)} | ||
y={size / 2} | ||
scale={this.state.scales[i]} | ||
/> | ||
); | ||
}; | ||
_renderCircle = (i) => { | ||
const { color, size, betweenSpace } = this.props; | ||
return ( | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
x={size / 2 + i * (size + betweenSpace)} | ||
y={size / 2} | ||
scale={this.state.scales[i]} | ||
/> | ||
); | ||
}; | ||
render() { | ||
const { size, betweenSpace } = this.props; | ||
return ( | ||
<Surface width={size * 3 + betweenSpace * 2} height={size}> | ||
{this._renderCircle(0)} | ||
{this._renderCircle(1)} | ||
{this._renderCircle(2)} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { size, betweenSpace } = this.props; | ||
return ( | ||
<Surface width={size * 3 + betweenSpace * 2} height={size}> | ||
{this._renderCircle(0)} | ||
{this._renderCircle(1)} | ||
{this._renderCircle(2)} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class DoubleCircleLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 30 | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 30, | ||
}; | ||
state = { | ||
scales: [new Animated.Value(0), new Animated.Value(0)] | ||
}; | ||
timers = []; | ||
state = { | ||
scales: [new Animated.Value(0), new Animated.Value(0)], | ||
}; | ||
timers = []; | ||
componentDidMount() { | ||
this.state.scales.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i); | ||
}, i * 1000); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentDidMount() { | ||
this.state.scales.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i); | ||
}, i * 1000); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000 }), | ||
Animated.timing(this.state.scales[i], { toValue: 0, duration: 1000 }) | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000 }), | ||
Animated.timing(this.state.scales[i], { toValue: 0, duration: 1000 }), | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
render() { | ||
const { color, size } = this.props; | ||
const { scales } = this.state; | ||
return ( | ||
<Surface width={size} height={size}> | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
opacity={0.5} | ||
scale={scales[0]} | ||
x={size / 2} | ||
y={size / 2} | ||
/> | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
opacity={0.5} | ||
scale={scales[1]} | ||
x={size / 2} | ||
y={size / 2} | ||
/> | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, size } = this.props; | ||
const { scales } = this.state; | ||
return ( | ||
<Surface width={size} height={size}> | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
opacity={0.5} | ||
scale={scales[0]} | ||
x={size / 2} | ||
y={size / 2} | ||
/> | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
opacity={0.5} | ||
scale={scales[1]} | ||
x={size / 2} | ||
y={size / 2} | ||
/> | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface, Shape } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface, Shape } = ART; | ||
export default class EatBeanLoader extends React.PureComponent { | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
}; | ||
static defaultProps = { | ||
size: 30, | ||
color, | ||
}; | ||
static defaultProps = { | ||
size: 30, | ||
color, | ||
}; | ||
state = { | ||
dotsY: [ | ||
new Animated.Value(this.props.size * 2.2), | ||
new Animated.Value(this.props.size * 2.2), | ||
new Animated.Value(this.props.size * 2.2), | ||
new Animated.Value(this.props.size * 2.2) | ||
] | ||
}; | ||
timers = []; | ||
state = { | ||
dotsY: [ | ||
new Animated.Value(this.props.size * 2.2), | ||
new Animated.Value(this.props.size * 2.2), | ||
new Animated.Value(this.props.size * 2.2), | ||
new Animated.Value(this.props.size * 2.2), | ||
], | ||
}; | ||
timers = []; | ||
componentDidMount() { | ||
this.state.dotsY.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i) | ||
}, i * 300); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentDidMount() { | ||
this.state.dotsY.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i); | ||
}, i * 300); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = (i) => { | ||
Animated.timing(this.state.dotsY[i], { | ||
toValue: this.props.size / 2, | ||
duration: 1200 | ||
}).start(() => { | ||
if (!this.unmounted) { | ||
this.state.dotsY[i].setValue(this.props.size * 2.2); | ||
this._animation(i); | ||
} | ||
}); | ||
}; | ||
_animation = (i) => { | ||
Animated.timing(this.state.dotsY[i], { | ||
toValue: this.props.size / 2, | ||
duration: 1200, | ||
}).start(() => { | ||
if (!this.unmounted) { | ||
this.state.dotsY[i].setValue(this.props.size * 2.2); | ||
this._animation(i); | ||
} | ||
}); | ||
}; | ||
render() { | ||
const { size, color } = this.props; | ||
render() { | ||
const { size, color } = this.props; | ||
const sinValue = Math.sqrt(2) / 2; | ||
const x = Math.floor(size / 2 * sinValue) + size / 2; | ||
const startY = Math.floor(size / 2 * sinValue) + size / 2; | ||
const endY = size / 2 - Math.floor(size / 2 * sinValue); | ||
const d = `M${x} ${startY} A ${size / 2} ${size / 2}, 0, 1, 1, ${x} ${endY} L ${size / 2} ${size / 2} Z`; | ||
return ( | ||
<Surface width={size * 2} height={size}> | ||
<Shape d={d} fill={color} x={size / 5}/> | ||
{this.state.dotsY.map((item, i) => ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={size / 5} | ||
fill={color} | ||
x={item} | ||
y={size / 2} | ||
/> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
const sinValue = Math.sqrt(2) / 2; | ||
const x = Math.floor((size / 2) * sinValue) + size / 2; | ||
const startY = Math.floor((size / 2) * sinValue) + size / 2; | ||
const endY = size / 2 - Math.floor((size / 2) * sinValue); | ||
const d = `M${x} ${startY} A ${size / 2} ${size / 2}, 0, 1, 1, ${x} ${endY} L ${size / | ||
2} ${size / 2} Z`; | ||
return ( | ||
<Surface width={size * 2} height={size}> | ||
<Shape d={d} fill={color} x={size / 5} /> | ||
{this.state.dotsY.map((item, i) => ( | ||
<AnimatedCircle key={i} radius={size / 5} fill={color} x={item} y={size / 2} /> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { ART, Animated, Dimensions } from 'react-native'; | ||
import { Animated, Dimensions } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class LineDotsLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
dotsNumber: PropTypes.number, | ||
betweenSpace: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
dotsNumber: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 10, | ||
dotsNumber: 5, | ||
betweenSpace: 5 | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 10, | ||
dotsNumber: 5, | ||
betweenSpace: 5, | ||
}; | ||
constructor(props) { | ||
super(props); | ||
this.screenWidth = Dimensions.get('window').width; | ||
const { size, dotsNumber, betweenSpace } = this.props; | ||
const midX = this.screenWidth / 2 + (size * dotsNumber + betweenSpace * (dotsNumber - 1)) / 2 - size / 2; | ||
let circlesX = []; | ||
this.beginX = []; | ||
this.centerX = []; | ||
this.destX = []; | ||
for (let i = 0; i < dotsNumber; i++) { | ||
let beginX = -size / 2 - (size + betweenSpace) * i; | ||
circlesX.push(new Animated.Value(beginX)); | ||
this.beginX.push(beginX); | ||
this.centerX.push(midX - i * (size + betweenSpace)); | ||
this.destX.push(this.screenWidth + size / 2 + i * (size + betweenSpace)); | ||
} | ||
constructor(props) { | ||
super(props); | ||
this.screenWidth = Dimensions.get('window').width; | ||
const { size, dotsNumber, betweenSpace } = this.props; | ||
const midX = | ||
this.screenWidth / 2 + (size * dotsNumber + betweenSpace * (dotsNumber - 1)) / 2 - size / 2; | ||
let circlesX = []; | ||
this.beginX = []; | ||
this.centerX = []; | ||
this.destX = []; | ||
for (let i = 0; i < dotsNumber; i++) { | ||
let beginX = -size / 2 - (size + betweenSpace) * i; | ||
circlesX.push(new Animated.Value(beginX)); | ||
this.beginX.push(beginX); | ||
this.centerX.push(midX - i * (size + betweenSpace)); | ||
this.destX.push(this.screenWidth + size / 2 + i * (size + betweenSpace)); | ||
} | ||
this.state = { | ||
x: circlesX | ||
}; | ||
} | ||
this.state = { | ||
x: circlesX, | ||
}; | ||
} | ||
render() { | ||
const { color, size } = this.props; | ||
return ( | ||
<Surface width={this.screenWidth} height={size}> | ||
{this.state.x.map((item, i) => ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={size} | ||
fill={color} | ||
x={item} | ||
y={size / 2} | ||
/> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, size } = this.props; | ||
return ( | ||
<Surface width={this.screenWidth} height={size}> | ||
{this.state.x.map((item, i) => ( | ||
<AnimatedCircle key={i} radius={size} fill={color} x={item} y={size / 2} /> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
this.state.x.forEach((item, i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.x[i], { | ||
toValue: this.centerX[i], | ||
duration: 600, | ||
delay: i * 50 | ||
}), | ||
Animated.timing(this.state.x[i], { | ||
toValue: this.centerX[i], | ||
duration: 600, | ||
delay: 300 | ||
}), | ||
Animated.timing(this.state.x[i], { | ||
toValue: this.destX[i], | ||
duration: 600, | ||
delay: i * 50 | ||
}) | ||
]).start(() => { | ||
if (i === this.props.dotsNumber - 1) { | ||
for (let idx in this.state.x) { | ||
this.state.x[idx].setValue(this.beginX[idx]); | ||
} | ||
!this.unmounted && this._animation(); | ||
} | ||
}); | ||
}); | ||
} | ||
_animation = () => { | ||
this.state.x.forEach((item, i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.x[i], { | ||
toValue: this.centerX[i], | ||
duration: 600, | ||
delay: i * 50, | ||
}), | ||
Animated.timing(this.state.x[i], { | ||
toValue: this.centerX[i], | ||
duration: 600, | ||
delay: 300, | ||
}), | ||
Animated.timing(this.state.x[i], { | ||
toValue: this.destX[i], | ||
duration: 600, | ||
delay: i * 50, | ||
}), | ||
]).start(() => { | ||
if (i === this.props.dotsNumber - 1) { | ||
for (let idx in this.state.x) { | ||
this.state.x[idx].setValue(this.beginX[idx]); | ||
} | ||
!this.unmounted && this._animation(); | ||
} | ||
}); | ||
}); | ||
}; | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedBar from '../animated/AnimatedBar'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class LinesLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
barWidth: PropTypes.number, | ||
barHeight: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
barNumber: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
barWidth: PropTypes.number, | ||
barHeight: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
barNumber: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
betweenSpace: 2, | ||
barNumber: 5, | ||
barWidth: 5, | ||
barHeight: 40 | ||
}; | ||
static defaultProps = { | ||
color, | ||
betweenSpace: 2, | ||
barNumber: 5, | ||
barWidth: 5, | ||
barHeight: 40, | ||
}; | ||
constructor(props) { | ||
super(props); | ||
const heights = []; | ||
for (let i = 0; i < this.props.barNumber; i++) { | ||
heights.push(new Animated.Value(this.props.barHeight / 3)); | ||
} | ||
constructor(props) { | ||
super(props); | ||
const heights = []; | ||
for (let i = 0; i < this.props.barNumber; i++) { | ||
heights.push(new Animated.Value(this.props.barHeight / 3)); | ||
} | ||
this.state = { | ||
heights, | ||
}; | ||
} | ||
this.state = { | ||
heights, | ||
}; | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.heights[i], { | ||
toValue: self.props.barHeight, | ||
duration: 400, | ||
delay: i * 200 | ||
}), | ||
Animated.timing(self.state.heights[i], { | ||
toValue: self.props.barHeight / 3, | ||
duration: 400 | ||
}) | ||
]) | ||
} | ||
_animation = () => { | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.heights[i], { | ||
toValue: self.props.barHeight, | ||
duration: 400, | ||
delay: i * 200, | ||
}), | ||
Animated.timing(self.state.heights[i], { | ||
toValue: self.props.barHeight / 3, | ||
duration: 400, | ||
}), | ||
]); | ||
} | ||
const anim = []; | ||
for (let i = 0; i < this.props.barNumber; i++) | ||
anim.push(seq(this, i)); | ||
const anim = []; | ||
for (let i = 0; i < this.props.barNumber; i++) anim.push(seq(this, i)); | ||
Animated.parallel(anim).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
}; | ||
Animated.parallel(anim).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
}; | ||
render() { | ||
const { color, betweenSpace, barWidth, barHeight, barNumber } = this.props; | ||
return ( | ||
<Surface | ||
width={barWidth * barNumber + betweenSpace * (barNumber - 1)} | ||
height={barHeight}> | ||
{this.state.heights.map((item, i) => ( | ||
<AnimatedBar | ||
key={i} | ||
fill={color} | ||
width={barWidth} | ||
height={this.state.heights[i]} | ||
x={i * (betweenSpace + barWidth)} | ||
y={barHeight / 2} | ||
/> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, betweenSpace, barWidth, barHeight, barNumber } = this.props; | ||
return ( | ||
<Surface width={barWidth * barNumber + betweenSpace * (barNumber - 1)} height={barHeight}> | ||
{this.state.heights.map((item, i) => ( | ||
<AnimatedBar | ||
key={i} | ||
fill={color} | ||
width={barWidth} | ||
height={this.state.heights[i]} | ||
x={i * (betweenSpace + barWidth)} | ||
y={barHeight / 2} | ||
/> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import Bar from '../shape/Bar2'; | ||
@@ -8,81 +9,87 @@ import { color } from '../const'; | ||
const AnimatedBar = Animated.createAnimatedComponent(Bar); | ||
const { Surface } = ART; | ||
export default class LinesLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
barWidth: PropTypes.number, | ||
barHeight: PropTypes.number, | ||
betweenSpace: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
barWidth: PropTypes.number, | ||
barHeight: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
betweenSpace: 5, | ||
barWidth: 3, | ||
barHeight: 30 | ||
}; | ||
static defaultProps = { | ||
color, | ||
betweenSpace: 5, | ||
barWidth: 3, | ||
barHeight: 30, | ||
}; | ||
constructor(props) { | ||
super(props); | ||
this.fixedMaxValue = [ | ||
this.props.barHeight * 0.8, | ||
this.props.barHeight * 0.4, | ||
this.props.barHeight, | ||
this.props.barHeight * 0.2, | ||
]; | ||
this.fixedMinValue = [ | ||
this.props.barHeight * 0.3, | ||
this.props.barHeight, | ||
this.props.barHeight * 0.5, | ||
this.props.barHeight * 0.8, | ||
]; | ||
constructor(props) { | ||
super(props); | ||
this.fixedMaxValue = [ | ||
this.props.barHeight * 0.8, | ||
this.props.barHeight * 0.4, | ||
this.props.barHeight, | ||
this.props.barHeight * 0.2, | ||
]; | ||
this.fixedMinValue = [ | ||
this.props.barHeight * 0.3, | ||
this.props.barHeight, | ||
this.props.barHeight * 0.5, | ||
this.props.barHeight * 0.8, | ||
]; | ||
this.state = { | ||
heights: [ | ||
new Animated.Value(this.fixedMinValue[0]), | ||
new Animated.Value(this.fixedMinValue[1]), | ||
new Animated.Value(this.fixedMinValue[2]), | ||
new Animated.Value(this.fixedMinValue[3]) | ||
] | ||
}; | ||
} | ||
this.state = { | ||
heights: [ | ||
new Animated.Value(this.fixedMinValue[0]), | ||
new Animated.Value(this.fixedMinValue[1]), | ||
new Animated.Value(this.fixedMinValue[2]), | ||
new Animated.Value(this.fixedMinValue[3]), | ||
], | ||
}; | ||
} | ||
componentDidMount() { | ||
this.state.heights.forEach((item, i) => { | ||
this._animation(i); | ||
}); | ||
} | ||
componentDidMount() { | ||
this.state.heights.forEach((item, i) => { | ||
this._animation(i); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.heights[i], { | ||
toValue: this.fixedMaxValue[i], | ||
duration: 500 | ||
}), | ||
Animated.timing(this.state.heights[i], { | ||
toValue: this.fixedMinValue[i], | ||
duration: 500 | ||
}), | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
_animation = (i) => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.heights[i], { | ||
toValue: this.fixedMaxValue[i], | ||
duration: 500, | ||
}), | ||
Animated.timing(this.state.heights[i], { | ||
toValue: this.fixedMinValue[i], | ||
duration: 500, | ||
}), | ||
]).start(() => { | ||
!this.unmounted && this._animation(i); | ||
}); | ||
}; | ||
render() { | ||
const { color, betweenSpace, barWidth, barHeight, barNumber } = this.props; | ||
return ( | ||
<Surface width={barWidth * 4 + betweenSpace * 3} height={barHeight}> | ||
{this.state.heights.map((item, i) => { | ||
return <AnimatedBar key={i} fill={color} width={barWidth} | ||
height={this.state.heights[i]} | ||
x={i * (betweenSpace + barWidth)} y={barHeight}/> | ||
})} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, betweenSpace, barWidth, barHeight, barNumber } = this.props; | ||
return ( | ||
<Surface width={barWidth * 4 + betweenSpace * 3} height={barHeight}> | ||
{this.state.heights.map((item, i) => { | ||
return ( | ||
<AnimatedBar | ||
key={i} | ||
fill={color} | ||
width={barWidth} | ||
height={this.state.heights[i]} | ||
x={i * (betweenSpace + barWidth)} | ||
y={barHeight} | ||
/> | ||
); | ||
})} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import Bar3 from '../shape/Bar3'; | ||
@@ -8,83 +9,81 @@ import { color } from '../const'; | ||
const AnimatedBar = Animated.createAnimatedComponent(Bar3); | ||
const { Surface } = ART; | ||
export default class NineCubesLoader extends React.PureComponent { | ||
state = { | ||
scales: [ | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
], | ||
}; | ||
state = { | ||
scales: [ | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
new Animated.Value(0), | ||
new Animated.Value(0) | ||
] | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string | ||
}; | ||
static defaultProps = { | ||
size: 20, | ||
color, | ||
}; | ||
static defaultProps = { | ||
size: 20, | ||
color, | ||
}; | ||
_renderCube(i, j, scaleID) { | ||
const { size, color } = this.props; | ||
return ( | ||
<AnimatedBar | ||
fill={color} | ||
width={size} | ||
height={size} | ||
x={(size / 2) * (i * 2 + 1)} | ||
y={(size / 2) * (j * 2 + 1)} | ||
scale={this.state.scales[scaleID]} | ||
/> | ||
); | ||
} | ||
_renderCube(i, j, scaleID) { | ||
const { size, color } = this.props; | ||
return ( | ||
<AnimatedBar | ||
fill={color} | ||
width={size} | ||
height={size} | ||
x={(size / 2) * (i * 2 + 1)} | ||
y={(size / 2) * (j * 2 + 1)} | ||
scale={this.state.scales[scaleID]} | ||
/> | ||
); | ||
} | ||
render() { | ||
const { size, color } = this.props; | ||
return ( | ||
<Surface width={size * 3} height={size * 3}> | ||
{this._renderCube(0, 0, 2)} | ||
{this._renderCube(0, 1, 1)} | ||
{this._renderCube(0, 2, 0)} | ||
{this._renderCube(1, 0, 3)} | ||
{this._renderCube(1, 1, 2)} | ||
{this._renderCube(1, 2, 1)} | ||
{this._renderCube(2, 0, 4)} | ||
{this._renderCube(2, 1, 3)} | ||
{this._renderCube(2, 2, 2)} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { size, color } = this.props; | ||
return ( | ||
<Surface width={size * 3} height={size * 3}> | ||
{this._renderCube(0, 0, 2)} | ||
{this._renderCube(0, 1, 1)} | ||
{this._renderCube(0, 2, 0)} | ||
{this._renderCube(1, 0, 3)} | ||
{this._renderCube(1, 1, 2)} | ||
{this._renderCube(1, 2, 1)} | ||
{this._renderCube(2, 0, 4)} | ||
{this._renderCube(2, 1, 3)} | ||
{this._renderCube(2, 2, 2)} | ||
</Surface> | ||
); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.scales[i], { | ||
toValue: 1, | ||
duration: 300, | ||
delay: (i + 1) * 100, | ||
}), | ||
Animated.timing(self.state.scales[i], { toValue: 0, duration: 300, delay: 200 }), | ||
]); | ||
} | ||
_animation = () => { | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.scales[i], { | ||
toValue: 1, | ||
duration: 300, | ||
delay: (i + 1) * 100 | ||
}), | ||
Animated.timing(self.state.scales[i], { toValue: 0, duration: 300, delay: 200 }) | ||
]) | ||
} | ||
Animated.parallel([ | ||
seq(this, 0), seq(this, 1), seq(this, 2), seq(this, 3), seq(this, 4), | ||
]).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
} | ||
Animated.parallel([seq(this, 0), seq(this, 1), seq(this, 2), seq(this, 3), seq(this, 4)]).start( | ||
() => { | ||
!this.unmounted && this._animation(); | ||
}, | ||
); | ||
}; | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class OpacityDotsLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
speed: PropTypes.number, | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
betweenSpace: PropTypes.number, | ||
speed: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 10, | ||
betweenSpace: 5, | ||
speed: 200, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 10, | ||
betweenSpace: 5, | ||
speed: 200, | ||
}; | ||
state = { | ||
opacity: [new Animated.Value(0.5), new Animated.Value(0.5), new Animated.Value(0.5)] | ||
}; | ||
state = { | ||
opacity: [new Animated.Value(0.5), new Animated.Value(0.5), new Animated.Value(0.5)], | ||
}; | ||
_renderCircle(i) { | ||
const { color, size, betweenSpace } = this.props; | ||
return ( | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
x={size / 2 + i * (size + betweenSpace)} | ||
y={size / 2} | ||
opacity={this.state.opacity[i]} | ||
scale={1} | ||
/> | ||
); | ||
} | ||
_renderCircle(i) { | ||
const { color, size, betweenSpace } = this.props; | ||
return ( | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
x={size / 2 + i * (size + betweenSpace)} | ||
y={size / 2} | ||
opacity={this.state.opacity[i]} | ||
scale={1} | ||
/> | ||
); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
const { speed } = this.props; | ||
_animation = () => { | ||
const { speed } = this.props; | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.opacity[i], { | ||
toValue: 1, | ||
duration: speed, | ||
delay: i * speed | ||
}), | ||
Animated.timing(self.state.opacity[i], { | ||
toValue: 0.3, | ||
duration: speed, | ||
delay: speed | ||
}) | ||
]) | ||
} | ||
function seq(self, i) { | ||
return Animated.sequence([ | ||
Animated.timing(self.state.opacity[i], { | ||
toValue: 1, | ||
duration: speed, | ||
delay: i * speed, | ||
}), | ||
Animated.timing(self.state.opacity[i], { | ||
toValue: 0.3, | ||
duration: speed, | ||
delay: speed, | ||
}), | ||
]); | ||
} | ||
Animated.parallel([ | ||
seq(this, 0), seq(this, 1), seq(this, 2) | ||
]).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
}; | ||
Animated.parallel([seq(this, 0), seq(this, 1), seq(this, 2)]).start(() => { | ||
!this.unmounted && this._animation(); | ||
}); | ||
}; | ||
render() { | ||
const { size, betweenSpace } = this.props; | ||
return ( | ||
<Surface width={size * 3 + betweenSpace * 2} height={size}> | ||
{this._renderCircle(0)} | ||
{this._renderCircle(1)} | ||
{this._renderCircle(2)} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { size, betweenSpace } = this.props; | ||
return ( | ||
<Surface width={size * 3 + betweenSpace * 2} height={size}> | ||
{this._renderCircle(0)} | ||
{this._renderCircle(1)} | ||
{this._renderCircle(2)} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class PulseLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
frequency: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
frequency: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 30, | ||
frequency: 1000 | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 30, | ||
frequency: 1000, | ||
}; | ||
state = { | ||
effect: new Animated.ValueXY({ x: 0, y: 1 }) | ||
}; | ||
state = { | ||
effect: new Animated.ValueXY({ x: 0, y: 1 }), | ||
}; | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
Animated.parallel([ | ||
Animated.timing(this.state.effect.x, { toValue: 1, duration: this.props.frequency }), | ||
Animated.timing(this.state.effect.y, { toValue: 0.05, duration: this.props.frequency }) | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.effect.setValue({ x: 0, y: 1 }); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
_animation = () => { | ||
Animated.parallel([ | ||
Animated.timing(this.state.effect.x, { toValue: 1, duration: this.props.frequency }), | ||
Animated.timing(this.state.effect.y, { toValue: 0.05, duration: this.props.frequency }), | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.effect.setValue({ x: 0, y: 1 }); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
render() { | ||
const { color, size } = this.props; | ||
return ( | ||
<Surface width={size} height={size}> | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
scale={this.state.effect.x} | ||
opacity={this.state.effect.y} | ||
x={size / 2} | ||
y={size / 2} | ||
/> | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, size } = this.props; | ||
return ( | ||
<Surface width={size} height={size}> | ||
<AnimatedCircle | ||
radius={size} | ||
fill={color} | ||
scale={this.state.effect.x} | ||
opacity={this.state.effect.y} | ||
x={size / 2} | ||
y={size / 2} | ||
/> | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Animated, ART } from 'react-native'; | ||
import { Animated } from 'react-native'; | ||
import { Surface } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface } = ART; | ||
export default class RippleLoader extends React.PureComponent { | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
strokeWidth: PropTypes.number | ||
}; | ||
static propTypes = { | ||
color: PropTypes.string, | ||
size: PropTypes.number, | ||
strokeWidth: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 40, | ||
strokeWidth: 3 | ||
}; | ||
static defaultProps = { | ||
color, | ||
size: 40, | ||
strokeWidth: 3, | ||
}; | ||
state = { | ||
scales: [new Animated.Value(0.1), new Animated.Value(0.1)], | ||
opacities: [new Animated.Value(1), new Animated.Value(1)] | ||
}; | ||
timers = []; | ||
state = { | ||
scales: [new Animated.Value(0.1), new Animated.Value(0.1)], | ||
opacities: [new Animated.Value(1), new Animated.Value(1)], | ||
}; | ||
timers = []; | ||
componentDidMount() { | ||
this.state.scales.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i) | ||
}, i * 1200); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentDidMount() { | ||
this.state.scales.forEach((item, i) => { | ||
const id = setTimeout(() => { | ||
this._animation(i); | ||
}, i * 1200); | ||
this.timers.push(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = (i) => { | ||
Animated.parallel([ | ||
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1600 }), | ||
Animated.timing(this.state.opacities[i], { toValue: 0, duration: 1600, delay: 800 }) | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.scales[i].setValue(0.1); | ||
this.state.opacities[i].setValue(1); | ||
this._animation(i); | ||
} | ||
}); | ||
}; | ||
_animation = (i) => { | ||
Animated.parallel([ | ||
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1600 }), | ||
Animated.timing(this.state.opacities[i], { toValue: 0, duration: 1600, delay: 800 }), | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.scales[i].setValue(0.1); | ||
this.state.opacities[i].setValue(1); | ||
this._animation(i); | ||
} | ||
}); | ||
}; | ||
render() { | ||
const { color, size, strokeWidth } = this.props; | ||
const { scales, opacities } = this.state; | ||
return ( | ||
<Surface width={size + strokeWidth} height={size + strokeWidth}> | ||
{scales.map((item, i) => ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={size} | ||
stroke={color} | ||
strokeWidth={strokeWidth} | ||
scale={scales[i]} | ||
opacity={opacities[i]} | ||
x={(size + strokeWidth) / 2} | ||
y={(size + strokeWidth) / 2} | ||
/> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
render() { | ||
const { color, size, strokeWidth } = this.props; | ||
const { scales, opacities } = this.state; | ||
return ( | ||
<Surface width={size + strokeWidth} height={size + strokeWidth}> | ||
{scales.map((item, i) => ( | ||
<AnimatedCircle | ||
key={i} | ||
radius={size} | ||
stroke={color} | ||
strokeWidth={strokeWidth} | ||
scale={scales[i]} | ||
opacity={opacities[i]} | ||
x={(size + strokeWidth) / 2} | ||
y={(size + strokeWidth) / 2} | ||
/> | ||
))} | ||
</Surface> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { ART, Animated, Easing } from 'react-native'; | ||
import { Animated, Easing } from 'react-native'; | ||
import { Surface, Group } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface, Group } = ART; | ||
export default class RotationCircleLoader extends React.PureComponent { | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
rotationSpeed: PropTypes.number | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
rotationSpeed: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
size: 40, | ||
color, | ||
rotationSpeed: 800 | ||
}; | ||
static defaultProps = { | ||
size: 40, | ||
color, | ||
rotationSpeed: 800, | ||
}; | ||
state = { | ||
degree: new Animated.Value(0) | ||
}; | ||
state = { | ||
degree: new Animated.Value(0), | ||
}; | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.degree, { | ||
toValue: 360, | ||
duration: this.props.rotationSpeed, | ||
easing: Easing.linear | ||
}) | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.degree.setValue(0); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.degree, { | ||
toValue: 360, | ||
duration: this.props.rotationSpeed, | ||
easing: Easing.linear, | ||
}), | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.degree.setValue(0); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
render() { | ||
const { size, color } = this.props; | ||
const degree = this.state.degree.interpolate({ | ||
inputRange: [0, 360], | ||
outputRange: ['0deg', '360deg'] | ||
}); | ||
return ( | ||
<Animated.View | ||
style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
<Surface width={size} height={size}> | ||
<Group> | ||
<AnimatedCircle fill={color} radius={size} x={size / 2} y={size / 2}/> | ||
<AnimatedCircle fill="#fff" radius={size / 4} x={size / 2} y={size / 8}/> | ||
</Group> | ||
</Surface> | ||
</Animated.View> | ||
); | ||
} | ||
render() { | ||
const { size, color } = this.props; | ||
const degree = this.state.degree.interpolate({ | ||
inputRange: [0, 360], | ||
outputRange: ['0deg', '360deg'], | ||
}); | ||
return ( | ||
<Animated.View style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
<Surface width={size} height={size}> | ||
<Group> | ||
<AnimatedCircle fill={color} radius={size} x={size / 2} y={size / 2} /> | ||
<AnimatedCircle fill="#fff" radius={size / 4} x={size / 2} y={size / 8} /> | ||
</Group> | ||
</Surface> | ||
</Animated.View> | ||
); | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { ART, Animated, Easing } from 'react-native'; | ||
import { Animated, Easing } from 'react-native'; | ||
import { Surface, Group } from '@react-native-community/art'; | ||
import AnimatedCircle from '../animated/AnimatedCircle'; | ||
import { color } from '../const'; | ||
const { Surface, Group } = ART; | ||
export default class RotationHoleLoader extends React.PureComponent { | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
strokeWith: PropTypes.number, | ||
rotationSpeed: PropTypes.number | ||
}; | ||
static propTypes = { | ||
size: PropTypes.number, | ||
color: PropTypes.string, | ||
strokeWith: PropTypes.number, | ||
rotationSpeed: PropTypes.number, | ||
}; | ||
static defaultProps = { | ||
size: 40, | ||
color, | ||
rotationSpeed: 800, | ||
strokeWith: 8 | ||
}; | ||
static defaultProps = { | ||
size: 40, | ||
color, | ||
rotationSpeed: 800, | ||
strokeWith: 8, | ||
}; | ||
state = { | ||
degree: new Animated.Value(0) | ||
}; | ||
state = { | ||
degree: new Animated.Value(0), | ||
}; | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentDidMount() { | ||
this._animation(); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
} | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.degree, { | ||
toValue: 360, | ||
duration: this.props.rotationSpeed, | ||
easing: Easing.linear | ||
}) | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.degree.setValue(0); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
_animation = () => { | ||
Animated.sequence([ | ||
Animated.timing(this.state.degree, { | ||
toValue: 360, | ||
duration: this.props.rotationSpeed, | ||
easing: Easing.linear, | ||
}), | ||
]).start(() => { | ||
if (!this.unmounted) { | ||
this.state.degree.setValue(0); | ||
this._animation(); | ||
} | ||
}); | ||
}; | ||
render() { | ||
const { size, color, strokeWith } = this.props; | ||
const degree = this.state.degree.interpolate({ | ||
inputRange: [0, 360], | ||
outputRange: ['0deg', '360deg'] | ||
}); | ||
return ( | ||
<Animated.View | ||
style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
<Surface width={size + strokeWith * 2} height={size + strokeWith * 2}> | ||
<Group> | ||
<AnimatedCircle | ||
stroke={color} | ||
opacity={0.3} | ||
strokeWidth={strokeWith} | ||
radius={size} | ||
x={size / 2 + strokeWith} | ||
y={size / 2 + strokeWith} | ||
/> | ||
<AnimatedCircle | ||
fill={color} | ||
radius={strokeWith} | ||
x={size / 2 + strokeWith} | ||
y={strokeWith} | ||
/> | ||
</Group> | ||
</Surface> | ||
</Animated.View> | ||
); | ||
} | ||
render() { | ||
const { size, color, strokeWith } = this.props; | ||
const degree = this.state.degree.interpolate({ | ||
inputRange: [0, 360], | ||
outputRange: ['0deg', '360deg'], | ||
}); | ||
return ( | ||
<Animated.View style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
<Surface width={size + strokeWith * 2} height={size + strokeWith * 2}> | ||
<Group> | ||
<AnimatedCircle | ||
stroke={color} | ||
opacity={0.3} | ||
strokeWidth={strokeWith} | ||
radius={size} | ||
x={size / 2 + strokeWith} | ||
y={size / 2 + strokeWith} | ||
/> | ||
<AnimatedCircle | ||
fill={color} | ||
radius={strokeWith} | ||
x={size / 2 + strokeWith} | ||
y={strokeWith} | ||
/> | ||
</Group> | ||
</Surface> | ||
</Animated.View> | ||
); | ||
} | ||
} |
@@ -6,52 +6,58 @@ import React from 'react'; | ||
export default class TextLoader extends React.PureComponent { | ||
static propTypes = { | ||
text: PropTypes.string, | ||
textStyle: Text.propTypes.style | ||
}; | ||
static propTypes = { | ||
text: PropTypes.string, | ||
textStyle: Text.propTypes.style, | ||
}; | ||
static defaultProps = { | ||
text: 'Loading' | ||
}; | ||
static defaultProps = { | ||
text: 'Loading', | ||
}; | ||
state = { | ||
opacities: [0, 0, 0] | ||
}; | ||
patterns = [[0, 0, 0], [1, 0, 0], [1, 1, 0], [1, 1, 1]]; | ||
timers = []; | ||
state = { | ||
opacities: [0, 0, 0], | ||
}; | ||
patterns = [ | ||
[0, 0, 0], | ||
[1, 0, 0], | ||
[1, 1, 0], | ||
[1, 1, 1], | ||
]; | ||
timers = []; | ||
componentDidMount() { | ||
this._animation(1); | ||
} | ||
componentDidMount() { | ||
this._animation(1); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
componentWillUnmount() { | ||
this.unmounted = true; | ||
this.timers.forEach((id) => { | ||
clearTimeout(id); | ||
}); | ||
} | ||
_animation = (index) => { | ||
if (!this.unmounted) { | ||
const id = setTimeout(() => { | ||
this.setState({ opacities: this.patterns[index] }); | ||
index++; | ||
if (index >= this.patterns.length) | ||
index = 0; | ||
this._animation(index); | ||
}, 500); | ||
this.timers.push(id); | ||
} | ||
}; | ||
_animation = (index) => { | ||
if (!this.unmounted) { | ||
const id = setTimeout(() => { | ||
this.setState({ opacities: this.patterns[index] }); | ||
index++; | ||
if (index >= this.patterns.length) index = 0; | ||
this._animation(index); | ||
}, 500); | ||
this.timers.push(id); | ||
} | ||
}; | ||
render() { | ||
const { text, textStyle } = this.props; | ||
return ( | ||
<View style={{ flexDirection: 'row' }}> | ||
<Text style={textStyle}>{text}</Text> | ||
{this.state.opacities.map((item, i) => ( | ||
<Text key={i} style={[{ opacity: item }, textStyle]}>.</Text> | ||
))} | ||
</View> | ||
); | ||
} | ||
render() { | ||
const { text, textStyle } = this.props; | ||
return ( | ||
<View style={{ flexDirection: 'row' }}> | ||
<Text style={textStyle}>{text}</Text> | ||
{this.state.opacities.map((item, i) => ( | ||
<Text key={i} style={[{ opacity: item }, textStyle]}> | ||
. | ||
</Text> | ||
))} | ||
</View> | ||
); | ||
} | ||
} |
@@ -6,24 +6,22 @@ /** | ||
import PropTypes from 'prop-types'; | ||
import { ART } from 'react-native'; | ||
import { Shape, Path } from '@react-native-community/art'; | ||
const { Shape, Path } = ART; | ||
export default class Bar extends React.PureComponent { | ||
static propTypes = { | ||
width: PropTypes.number.isRequired, | ||
height: PropTypes.number.isRequired | ||
}; | ||
static propTypes = { | ||
width: PropTypes.number.isRequired, | ||
height: PropTypes.number.isRequired, | ||
}; | ||
render() { | ||
const { width, height } = this.props; | ||
render() { | ||
const { width, height } = this.props; | ||
const path = Path() | ||
.moveTo(width, height / 2) | ||
.lineTo(0, height / 2) | ||
.lineTo(0, -height / 2) | ||
.lineTo(width, -height / 2) | ||
.close(); | ||
const path = Path() | ||
.moveTo(width, height / 2) | ||
.lineTo(0, height / 2) | ||
.lineTo(0, -height / 2) | ||
.lineTo(width, -height / 2) | ||
.close(); | ||
return <Shape {...this.props} d={path}/>; | ||
} | ||
return <Shape {...this.props} d={path} />; | ||
} | ||
} |
@@ -6,24 +6,22 @@ /** | ||
import PropTypes from 'prop-types'; | ||
import { ART } from 'react-native'; | ||
import { Shape, Path } from '@react-native-community/art'; | ||
const { Shape, Path } = ART; | ||
export default class Bar2 extends React.PureComponent { | ||
static propTypes = { | ||
width: PropTypes.number.isRequired, | ||
height: PropTypes.number.isRequired | ||
}; | ||
static propTypes = { | ||
width: PropTypes.number.isRequired, | ||
height: PropTypes.number.isRequired, | ||
}; | ||
render() { | ||
const { width, height } = this.props; | ||
render() { | ||
const { width, height } = this.props; | ||
const path = Path() | ||
.moveTo(0, 0) | ||
.lineTo(0, -height) | ||
.lineTo(width, -height) | ||
.lineTo(width, 0) | ||
.close(); | ||
const path = Path() | ||
.moveTo(0, 0) | ||
.lineTo(0, -height) | ||
.lineTo(width, -height) | ||
.lineTo(width, 0) | ||
.close(); | ||
return <Shape {...this.props} d={path}/>; | ||
} | ||
return <Shape {...this.props} d={path} />; | ||
} | ||
} |
@@ -6,24 +6,22 @@ /** | ||
import PropTypes from 'prop-types'; | ||
import { ART } from 'react-native'; | ||
import { Shape, Path } from '@react-native-community/art'; | ||
const { Shape, Path } = ART; | ||
export default class Bar3 extends React.PureComponent { | ||
static propTypes = { | ||
width: PropTypes.number.isRequired, | ||
height: PropTypes.number.isRequired | ||
}; | ||
static propTypes = { | ||
width: PropTypes.number.isRequired, | ||
height: PropTypes.number.isRequired, | ||
}; | ||
render() { | ||
const { width, height } = this.props; | ||
render() { | ||
const { width, height } = this.props; | ||
const path = Path() | ||
.moveTo(width / 2, height / 2) | ||
.lineTo(-width / 2, height / 2) | ||
.lineTo(-width / 2, -height / 2) | ||
.lineTo(width / 2, -height / 2) | ||
.close(); | ||
const path = Path() | ||
.moveTo(width / 2, height / 2) | ||
.lineTo(-width / 2, height / 2) | ||
.lineTo(-width / 2, -height / 2) | ||
.lineTo(width / 2, -height / 2) | ||
.close(); | ||
return <Shape {...this.props} d={path}/>; | ||
} | ||
return <Shape {...this.props} d={path} />; | ||
} | ||
} |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import {ART} from 'react-native'; | ||
const {Shape, Path} = ART; | ||
import { Shape, Path } from '@react-native-community/art'; | ||
export default class Circle extends React.PureComponent { | ||
static propTypes = { | ||
radius: PropTypes.number.isRequired, | ||
opacity: PropTypes.number | ||
}; | ||
static propTypes = { | ||
radius: PropTypes.number.isRequired, | ||
opacity: PropTypes.number, | ||
}; | ||
render() { | ||
const { radius } = this.props; | ||
render() { | ||
const { radius } = this.props; | ||
const path = Path() | ||
.moveTo(0, -radius/2) | ||
.arc(0, radius, 1) | ||
.arc(0, -radius, 1) | ||
.close(); | ||
const path = Path() | ||
.moveTo(0, -radius / 2) | ||
.arc(0, radius, 1) | ||
.arc(0, -radius, 1) | ||
.close(); | ||
return <Shape {...this.props} d={path}/>; | ||
} | ||
return <Shape {...this.props} d={path} />; | ||
} | ||
} |
{ | ||
"name": "react-native-indicator", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "React Native Indicator Component", | ||
"main": "index.js", | ||
"scripts": { | ||
"lint": "./node_modules/.bin/prettier --config .prettierrc --write lib/**/*.js", | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
@@ -27,3 +28,6 @@ }, | ||
"prop-types": "^15.6.0" | ||
}, | ||
"devDependencies": { | ||
"prettier": "^1.19.1" | ||
} | ||
} |
@@ -25,3 +25,3 @@ # react-native-indicator | ||
Add ```ART.xcodeproj``` from ```node_modules/react-native/Libraries/ART``` to your Libraries then link ```libART.a```. To see more details about **Linking Libraries**, jump to [this](https://facebook.github.io/react-native/docs/linking-libraries-ios.html). | ||
Following the [Art module](https://github.com/react-native-community/art) instruction to configure. | ||
@@ -28,0 +28,0 @@ ## Usage |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 2 instances in 1 package
0
50006
1
29
1458