基于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 (<><View style={styles.taskReceive}><Animated.View style={[{transform: [{ scale: scaleValue }]}]}><View style={styles.receiveBlock}><ImageBackground style={styles.receiveBg} source={require('../../../common/images/dressup_pupop_bg.png')} /><View style={styles.receiveContent}><View style={{ width: '100%', height: pxToPd(44) }}></View><View style={styles.receiveTitile}><Text style={styles.receiveTitileTxt}>恭喜你获得徽章</Text></View><View style={{ width: '100%', height: pxToPd(22) }}></View><View style={styles.receiveBox}><Animated.Image style={[styles.taskReceiveIcon, {transform: [{ rotateY: spin },]}]} source={require('../../../common/images/badge_temp_logo.png')}></Animated.Image></View><View style={{ width: '100%', height: pxToPd(22) }}></View><View style={styles.receiveFooter}><CustomeBtn name={'确认'} width={500} onClick={coloseHandle} /></View></View></View></Animated.View></View></>)
}