前言

昨天的元件動畫打開了我(水文)的思路，說到APP，有一個相關的動畫也是隨處可見，那就是啟動app時的動畫，大家一定都有用過FB、LINE、DC、MOMO、巴哈等APP軟體，每當你點開APP時都會出現啟動時的動畫，有時候是圖片，有時候是ICON。今天我們要使用之前製作翻頁鐘元件動畫用到的animateFloatAsState來做我們的啟動動畫

啟動動畫

其實自Android 12起，Android有提供一個叫SplashScreen的API可讓應用程式啟動包含動畫，按理來說只要使用這個API我應該就可以輕鬆水完文章了，但有個小小小小的問題，我的舊手機只能升到Android 11......
好的今天的內容就到這邊....(並沒有)

1.NavHost

NavHost可以看做是Jetpack Compose的導航系統用於在應用中管理不同頁面之間的切換，它取代了傳統的 Fragment和Activity導航方法。NavHost 提供了一個宣告式的方式來定義應用的導航結構，使得頁面之間的切換更簡單直觀，我們今天要透過這個方法來模擬一下啟動動畫的效果。
我們用下面的程式碼做例子

• kotlin

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "splash_screen") {
        composable("splash_screen") {
            SplashScreen(navController)
        }
        composable("main_screen") {
            MainScreen()
        }
    }
}

MyApp 是應用的主要介面，它使用NavHost來管理不同頁面之間的切換。它包含兩個composable，splash_screen負責啟動畫面，顯示動畫效果；main_screen哲是則是動畫完成後跳轉的頁面。

2.SplashScreen(navController)

下面是我們用來呈現啟動畫面的程式碼

• kotlin

@Composable
fun SplashScreen(navController: NavController) {
    var startAnimation by remember { mutableStateOf(false) }

    // 開始動畫並在1.5秒後跳轉
    LaunchedEffect(Unit) {
        startAnimation = true
        delay(1500)  // 等待1.5秒後跳轉到主畫面
        navController.navigate("main_screen") {
            popUpTo("splash_screen") { inclusive = true }  // 移除啟動畫面
        }
    }

    // 設置動畫過程
    val scale by animateFloatAsState(
        targetValue = if (startAnimation) 1.5f else 0.8f,
        animationSpec = tween(durationMillis = 1000)  // 1秒內完成放大動畫
    )

    val alpha by animateFloatAsState(
        targetValue = if (startAnimation) 0f else 1f,
        animationSpec = tween(durationMillis = 1000)  // 逐漸淡出動畫
    )

    // 畫面展示
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "2024鐵人賽",
            style = TextStyle(
                fontSize = 40.sp,  // 字體大小
                fontWeight = FontWeight.Bold,
                color = Color.Black
            ),
            modifier = Modifier
                .scale(scale)  // 放大效果
                .alpha(alpha)  // 淡化效果
        )
    }
}

startAnimatio使用remember和mutableStateOf來記錄動畫是否開始，並透過startAnimation的值控制動畫啟動。
LaunchedEffect(Unit)用於處理動畫的延遲邏輯，使用 navController.navigate 切換頁面至 "main_screen"，並使用popUpTo("splash_screen") { inclusive = true }將啟動畫面從回退堆疊中移除，這樣使用者無法按返回鍵回到啟動畫面。

呈現的效果應該會和上面一樣

後話

今天完了一下啟動動畫的功能，本來是想直接用官方的API的，但我的舊手機沒辦法支援，只能換個方法實現了，明天可能考慮把這兩天的東西加入原本的專案，或是去研究一下天氣的API，好的今天的內容就到這邊了，讓我們明天再見。