78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import React from "react"
|
|
import { View, Animated, Easing } from "react-native"
|
|
import PropTypes from "prop-types"
|
|
|
|
export class BubbleLoader extends React.Component {
|
|
static propTypes = {
|
|
size: PropTypes.number,
|
|
}
|
|
|
|
static defaultProps = {
|
|
size: 50,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.animatedScales = [0, 1, 2].map((i) => new Animated.Value(1.0))
|
|
|
|
Animated.loop(
|
|
Animated.parallel(
|
|
this.animatedScales.map((value, i) =>
|
|
Animated.sequence([
|
|
Animated.timing(value, {
|
|
toValue: 0.2,
|
|
duration: 800,
|
|
delay: 200 * i,
|
|
easing: Easing.out(Easing.sin),
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(value, {
|
|
toValue: 1.0,
|
|
duration: 800,
|
|
easing: Easing.out(Easing.sin),
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.delay(200 * (2 - i)),
|
|
])
|
|
)
|
|
)
|
|
).start()
|
|
}
|
|
|
|
render() {
|
|
const { size } = this.props
|
|
const spacing = size / 5
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
height: size,
|
|
width: size * 3 + spacing * 2,
|
|
}}>
|
|
{[0, 1, 2].map((i) => (
|
|
<Animated.View
|
|
key={i}
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
backgroundColor: "#dddddd",
|
|
borderWidth: 0,
|
|
borderRadius: size / 2,
|
|
transform: [
|
|
{
|
|
scaleX: this.animatedScales[i],
|
|
},
|
|
{
|
|
scaleY: this.animatedScales[i],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
)
|
|
}
|
|
}
|