Android 中使用 Jetpack Compose 的动画启动画面

Jetpack Compose 是 Android 的高级工具包，用于以非常简单的形式创建实体 UI。它不需要 Android Studio 中的任何类型的 XML 文件，它也有助于创建本机应用程序。它最近在 Android Studio 北极狐版本中推出。 Jetpack Compose 函数声明为：

@Composable
fun MessageCard(name: String) {
    Text(text = "Hello $name!")
}

预览撰写功能：

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}

启动画面

启动画面通常是通过应用程序的徽标或名称代表您的应用程序的第一个屏幕。它会停留几秒钟，然后会自动引导您进入主屏幕。您可以使用您的徽标或表示您的应用程序的任何类型的信息文本。

动画启动画面

动画启动画面对用户来说看起来很有吸引力，因为徽标或任何类型的文本都可以动画化以使其更有趣。 Jetpack Compose 提供了多种 API 来决定要执行哪些动画。在这个项目中，我们将使用 Animatable API 来实现我们的启动画面。您可以根据自己的喜好自定义动画效果以及延迟时间。

使用 Jetpack Compose 的动画启动画面

下面给出了一个示例视频，以了解我们将在本文中做什么。请注意，我们将使用Jetpack Compose来实现这个项目。

要求：

• 安卓工作室北极狐版
• 科特林
• 图像 (.png)

分步实施

第 1 步：创建一个新项目

使用 Empty Compose Activity 在 Android Studio 中创建一个新项目，并选择语言为Kotlin 。单击完成。

第 2 步：添加依赖项

将 Navigation 依赖项添加到位于 Gradle Scripts 文件夹中的 build.gradle(:app) 文件中。

implementation “androidx.navigation:navigation-compose:2.4.0-alpha06”

第 3 步：将图像添加到 Drawable 文件夹

将图像/徽标 (.png) 添加到 drawable 文件夹中。图像的命名约定应为小写，没有任何符号、数字或空格。

步骤 4：使用 MainActivity.kt 文件

为导航创建可组合函数

Kotlin

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController,
        startDestination = "splash_screen") {
        composable("splash_screen") {
            SplashScreen(navController = navController)
        }
        // Main Screen
        composable("main_screen") {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "Main Screen", color = Color.Black, fontSize = 24.sp)
            }
        }
    }
}

为启动画面创建可组合函数

科特林

@Composable
fun SplashScreen(navController: NavController) {
    val scale = remember {
        androidx.compose.animation.core.Animatable(0f)
    } 
      
    // AnimationEffect
    LaunchedEffect(key1 = true) {
        scale.animateTo(
            targetValue = 0.7f,
            animationSpec = tween(
                durationMillis = 800,
                easing = {
                    OvershootInterpolator(4f).getInterpolation(it)
                })
        )
        delay(3000L)
        navController.navigate("main_screen")
    } 
      
    // Image
    Box(contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()) {
            Image(painter = painterResource(id = R.drawable.gfglogo),
                contentDescription = "Logo",
                modifier = Modifier.scale(scale.value))
    }
}

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的完整代码。代码中添加了注释以更详细地理解代码。

科特林

package com.example.splashscreenjc
  
import android.os.Bundle
import android.view.animation.OvershootInterpolator
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.coroutines.delay
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
                Surface(color = Color.White, modifier = Modifier.fillMaxSize()) {
                    com.example.splashscreenjc.Navigation()
            }
        }
    }
}
@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController,
        startDestination = "splash_screen") {
        composable("splash_screen") {
            SplashScreen(navController = navController)
        }
          
        // Main Screen
        composable("main_screen") {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "Main Screen", color = Color.Black, fontSize = 24.sp)
            }
        }
    }
}
@Composable
fun SplashScreen(navController: NavController) {
    val scale = remember {
        androidx.compose.animation.core.Animatable(0f)
    }
      
    // Animation
    LaunchedEffect(key1 = true) {
        scale.animateTo(
            targetValue = 0.7f,
              // tween Animation
            animationSpec = tween(    
                durationMillis = 800,
                easing = {
                    OvershootInterpolator(4f).getInterpolation(it)
                }))
        // Customize the delay time
        delay(3000L) 
        navController.navigate("main_screen")
    }
      
    // Image
    Box(contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()) {
            // Change the logo
            Image(painter = painterResource(id = R.drawable.gfglogo), 
                contentDescription = "Logo",
                modifier = Modifier.scale(scale.value))
    }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！