diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index c80353f..ac7cdaf 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,9 +1,8 @@ -import IP from '@/assets/icons/svg/ip.svg'; import { checkAuthStatus } from '@/lib/auth'; import { useRouter } from 'expo-router'; import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { Animated, Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { useSafeAreaInsets } from "react-native-safe-area-context"; export default function HomeScreen() { @@ -12,6 +11,9 @@ export default function HomeScreen() { const insets = useSafeAreaInsets(); const [isLoading, setIsLoading] = useState(false); + // 获取屏幕宽度 + const screenWidth = Dimensions.get('window').width; + // 动画值 const fadeAnim = useRef(new Animated.Value(0)).current; // IP图标的淡入动画 const shakeAnim = useRef(new Animated.Value(0)).current; // IP图标的摇晃动画 @@ -20,6 +22,7 @@ export default function HomeScreen() { const buttonAnim = useRef(new Animated.Value(0)).current; // 按钮的淡入动画 const buttonShakeAnim = useRef(new Animated.Value(0)).current; // 按钮的摇晃动画 const buttonLoopAnim = useRef(null); // 按钮循环动画引用 + const fadeInAnim = useRef(new Animated.Value(0)).current; // 文本行动画值 const [textAnimations] = useState(() => ({ @@ -121,6 +124,20 @@ export default function HomeScreen() { ]).start(() => resolve()); }); }; + // 启动欢迎语动画 + const startWelcomeAnimation = () => { + // IP图标显示后淡入描述文本 + return new Promise((resolve) => { + Animated.sequence([ + Animated.delay(200), // IP图标显示后延迟200ms + Animated.timing(fadeInAnim, { + toValue: 1, + duration: 800, + useNativeDriver: true, + }) + ]).start(() => resolve()); + }); + }; // 启动按钮动画 const startButtonAnimation = () => { @@ -224,6 +241,7 @@ export default function HomeScreen() { startShaking(); // IP显示后开始文本动画 startTextAnimations() + .then(() => startWelcomeAnimation()) .then(() => startDescriptionAnimation()) .then(() => startButtonAnimation()) .catch(console.error); @@ -240,6 +258,7 @@ export default function HomeScreen() { animationRef.current.stop(); } }; + }, []); // 动画样式 @@ -342,11 +361,40 @@ export default function HomeScreen() { {t('auth.welcomeAwaken.slogan', { ns: 'login' })} + {/* 欢迎语 */} + + + + + {/* Animated IP */} - + @@ -373,6 +421,7 @@ export default function HomeScreen() { {/* 唤醒按钮 */}