feat: wake页面优化

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<Animated.CompositeAnimation | null>(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<void>((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.Text>
                 </View>
+                {/* 欢迎语 */}
+                <View style={{ alignItems: 'flex-end' }}>
+                    <Animated.View
+                        style={[{
+                            height: screenWidth * 0.3,
+                            width: screenWidth * 0.3,
+                            marginTop: -screenWidth * 0.08,
+                            opacity: fadeInAnim,
+                            transform: [{
+                                translateY: fadeInAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0]
+                                })
+                            }]
+                        }]}
+                    >
+                        <Image
+                            source={require('@/assets/images/png/icon/think.png')}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                resizeMode: 'contain'
+                            }}
+                        />
+                    </Animated.View>
+                </View>
 
                 {/* Animated IP */}
                 <View style={styles.ipContainer}>
                     <Animated.View style={[styles.ipWrapper, { transform: [{ rotate }] }]}>
-                        <IP />
+                        <Image
+                            source={require('@/assets/images/png/icon/ip.png')}
+                            style={{ width: screenWidth * 0.9, marginBottom: - screenWidth * 0.18, marginTop: -screenWidth * 0.22 }}
+                        />
                     </Animated.View>
                 </View>
 
@@ -373,6 +421,7 @@ export default function HomeScreen() {
                 {/* 唤醒按钮 */}
                 <Animated.View
                     style={{
+                        alignItems: "center",
                         opacity: buttonAnim,
                         transform: [
                             {
@@ -469,13 +518,12 @@ const styles = StyleSheet.create({
         backgroundColor: '#FFFFFF',
         borderRadius: 28,
         paddingVertical: 16,
-        paddingHorizontal: 40,
         shadowColor: '#000',
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.1,
         shadowRadius: 4,
         elevation: 2,
-        width: '100%',
+        width: '86%',
         alignItems: 'center',
         marginTop: 24,
     },