39 lines
1015 B
TypeScript
39 lines
1015 B
TypeScript
import React, { useEffect } from 'react';
|
|
import { ViewStyle } from 'react-native';
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withDelay,
|
|
withTiming,
|
|
Easing,
|
|
} from 'react-native-reanimated';
|
|
|
|
interface AnimatedCardProps {
|
|
index?: number;
|
|
delay?: number;
|
|
style?: any;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function AnimatedCard({ index = 0, delay, style, children }: AnimatedCardProps) {
|
|
const opacity = useSharedValue(0);
|
|
const translateY = useSharedValue(20);
|
|
|
|
useEffect(() => {
|
|
const d = delay ?? index * 80;
|
|
opacity.value = withDelay(d, withTiming(1, { duration: 500, easing: Easing.out(Easing.exp) }));
|
|
translateY.value = withDelay(d, withTiming(0, { duration: 500, easing: Easing.out(Easing.exp) }));
|
|
}, []);
|
|
|
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
opacity: opacity.value,
|
|
transform: [{ translateY: translateY.value }],
|
|
}));
|
|
|
|
return (
|
|
<Animated.View style={[animatedStyle, style]}>
|
|
{children}
|
|
</Animated.View>
|
|
);
|
|
}
|