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

在 Android 应用程序中，启动画面是第一印象，可以给用户留下深刻的印象。Jetpack Compose 是 Android 中最新的界面开发工具包，它提供了一种简单的方式来创建用户交互界面。本文将介绍如何使用 Jetpack Compose 创建一个动画启动画面。

前置条件

在开始之前，你需要以下工具：

1. Android Studio Arctic Fox 或更高版本
2. Android 5.0（API 级别 21）或更高版本的设备或模拟器

步骤

步骤 1：创建项目

在 Android Studio 中创建一个新的项目，并选择 Empty Compose Activity 模板。通过此模板，你将得到一个拥有基本结构的旧版 Compose 应用程序。你可以自定义此模板，将其转化为拥有启动画面的应用。

步骤 2：添加资源

在 res 目录下创建一个名为 drawable 的新目录，并在其中创建一个名为 splash_screen.xml 的新文件。此文件将用于显示启动图像。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher_foreground"
    android:targetSdkVersion="31">

    <target
        android:name="app_logo"
        android:animation="@anim/pulse"/>

</animated-vector>

此处我们采用了闪烁效果的动画效果。

步骤 3：创建启动图像布局

在 res 目录下创建一个名为 layout 的新目录，并在其中创建一个名为 splash_screen.xml 的新文件。该文件将保存启动图像的 Compose 布局。

@Composable
fun SplashScreen() {
    Surface(color = Color.White) {
        Image(
            painter = painterResource(R.drawable.splash_screen),
            contentDescription = "Splash Screen Image",
            modifier = Modifier
                .fillMaxSize()
        )
    }
}

此布局包含一个 Surface，它指定了背景颜色。然后，它包含了包含图像的 Image 组件。

步骤 4：创建启动 Activity

在 MainActivity.kt 中，修改代码来显示启动图像，并在 onCreate 方法中设置 setContent。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SplashScreen()
        }
    }
}

步骤 5：创建动画效果

在 res 目录下创建一个新的名为 anim 的目录，并在其中创建一个名为 pulse.xml 的新文件。该文件包含我们的动画效果。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher_foreground"
    android:targetSdkVersion="31">

    <target
        android:name="app_logo"
        android:animation="@animator/pulse_anim" />

</animated-vector>

对应的我们在animator目录中新建一个名为pulse_anim.xml的新文件来定义我们的动画。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1000"
        android:propertyName="alpha"
        android:valueFrom="0f"
        android:valueTo="1f"
        android:valueType="floatType"/>
    <objectAnimator
        android:duration="1000"
        android:propertyName="scaleX"
        android:valueFrom="1f"
        android:valueTo="1.2f"
        android:valueType="floatType"/>
    <objectAnimator
        android:duration="1000"
        android:propertyName="scaleY"
        android:valueFrom="1f"
        android:valueTo="1.2f"
        android:valueType="floatType"/>
</set>

此处我们使用了android:propertyName(属性名)和android:valueType(值类型)来指定动画效果。

步骤 6：启动动画效果

在 MainActivity.kt 中，可以添加以下代码来启动动画。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SplashScreen()
        }

        Handler(Looper.getMainLooper()).postDelayed({
            startActivity(Intent(this@MainActivity, HomeActivity::class.java))
            finish()
        }, 3000)
    }
}

此处我们使用了Handler类和postDelayed()方法来启动动画效果和开始另一项任务。

现在，运行应用，并在执行启动操作后验证动画效果是否工作。启动后，动画应持续几秒钟，然后跳转到应用的主页。

结论

以上是使用 Jetpack Compose 创建动画启动画面的步骤。这为你的 Android 应用程序增加了第一印象，并为用户带来了更好的体验和交互。如果你想让你的 Android 应用程序更加吸引人，并向用户展示你的品牌，Jetpack Compose 是实现这个目标的的理想工具。