50 lines
877 B
TypeScript
50 lines
877 B
TypeScript
import React, { useEffect } from 'react';
|
|
import { StyleSheet } from 'react-native';
|
|
import Animated, {
|
|
interpolate,
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withDelay,
|
|
withRepeat,
|
|
withTiming
|
|
} from 'react-native-reanimated';
|
|
|
|
export const AnimatedRinger = ({ delay }: { delay: number }) => {
|
|
const ring = useSharedValue(0);
|
|
|
|
const ringStyle = useAnimatedStyle(() => ({
|
|
opacity: 0.8 - ring.value,
|
|
transform: [
|
|
{
|
|
scale: interpolate(ring.value, [0, 1], [0, 4])
|
|
}
|
|
]
|
|
}));
|
|
|
|
useEffect(() => {
|
|
ring.value = withDelay(
|
|
delay,
|
|
withRepeat(
|
|
withTiming(1, {
|
|
duration: 3000
|
|
}),
|
|
-1,
|
|
false
|
|
)
|
|
);
|
|
}, []);
|
|
|
|
return <Animated.View style={[styles.ring, ringStyle]} />;
|
|
};
|
|
|
|
export const styles = StyleSheet.create({
|
|
ring: {
|
|
position: 'absolute',
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 40,
|
|
borderColor: '#FFF',
|
|
borderWidth: 10
|
|
}
|
|
});
|