基于react native的图片放大旋转效果二

const TaskReceiveModal = ({ onClick }) => {
    const spinValue = useRef(new Animated.Value(0)).current;
    const scaleValue = useRef(new Animated.Value(0)).current;
    const spinAnimation = useRef(null);

    const spin = spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    });
    const animate = () => {
        scaleValue.setValue(0);
        Animated.timing(scaleValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.in(Easing.bounce),
            useNativeDriver: true
        }).start(() => { });
        startSpinAnimation();
    };

    const startSpinAnimation = () => {
        spinValue.setValue(0);
        spinAnimation.current = Animated.timing(spinValue, {
            toValue: 1,
            duration: 1500,
            easing: Easing.linear,
            useNativeDriver: true
        });
        spinAnimation.current.start(({ finished }) => {
            if (finished) {
                spinAnimation.current.stop();
            }
        });
    };


    const coloseHandle = () => {
        onClick && onClick();
    }
    useEffect(() => {
        animate();
        return () => {

        }
    }, []);

    return (
        <>
            
                
                    
                        
                        
                            { width: '100%', height: pxToPd(44) }}>
                            
                                恭喜你获得徽章
                            
                            { width: '100%', height: pxToPd(22) }}>
                            
                                
                            
                            { width: '100%', height: pxToPd(22) }}>
                            
                                
                            
                        
                    
                

            
        
    )
}