transform

src/pages/navigations/home.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable */
 import React, { useEffect, useState, useRef } from 'react';
-import { Text, StyleSheet, Image, View, ImageBackground, Pressable, Animated } from 'react-native';
+import { Text, StyleSheet, Image, View, Pressable, Animated } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 import { postRequest } from '@/netWork/';
@@ -11,7 +12,8 @@ interface Props {
 }
 
 const Home = (props: Props) => {
-	const fadeAnim = useRef(new Animated.Value(0)).current;
+	const timerId = useRef(0);
+	const [ rollNum, setRollNum ] = useState(0);
 	const { isLogin, goTwitterAuthorize } = useLoginCom(props);
 	const [nftData, setNftData] = useState([]);
 	const goTwitter = () => {
@@ -22,6 +24,17 @@ const Home = (props: Props) => {
 		}
 	};
 
+	useEffect(() => {
+		clearInterval(timerId.current)
+		timerId.current = setInterval(() => {
+			if (rollNum <= -820) {
+				setRollNum(0)
+			} else {
+				setRollNum(rollNum - 1)
+			}
+		}, 100)
+	})
+
 	useEffect(() => {
 		if (isLogin) {
 			postRequest('/denet/nft/group/listJoinNftGroup', {
@@ -44,10 +57,17 @@ const Home = (props: Props) => {
 						style={styles.denet}
 						source={ require('../../static/img/home/welcome.png') }
 					/>
-					<ImageBackground
-						style={styles.goods}
-						source={ require('../../static/img/home/goods.png') }>
-					</ImageBackground>
+					<View style={styles.goods}>
+						<Image
+							style={[
+								styles.goodsImg,
+								{
+									top: rollNum
+								}
+							]}
+							source={ require('../../static/img/home/goods.png') }>
+						</Image>
+					</View>
 				</View>
 				<Pressable style={styles.TwitterBtnWrap} onPress={goTwitter}>
 					<View style={styles.TwitterLayer}>
@@ -82,8 +102,16 @@ const styles = StyleSheet.create({
 		height: 120,
 	},
 	goods: {
+		position: 'relative',
 		width: 180,
 		height: 280,
+		overflow: 'hidden',
+	},
+	goodsImg: {
+		position: 'absolute',
+		width: 180,
+		height: 1000,
+		top: 0,
 	},
 	TwitterBtnWrap: {
 		paddingLeft: 16,