如何在Kotlin Jetpack Compose中通过导航实现Activity间Flutter式缩放转场动画？

1. 定义缩放转场动画资源 #

首先在res/anim目录下创建两个动画文件，分别对应进入和退出的缩放效果：

进入动画（zoom_in.xml） #

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXScale="0.8"
    android:fromYScale="0.8"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0" />

退出动画（zoom_out.xml） #

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.8"
    android:toYScale="0.8" />

2. 配置导航组件的转场规则 #

在导航图（res/navigation/nav_graph.xml）中，给目标Activity的跳转动作绑定动画：

<activity
    android:id="@+id/detailActivity"
    android:name=".ui.DetailActivity"
    android:label="详情页">
    <action
        android:id="@+id/action_main_to_detail"
        app:destination="@id/detailActivity"
        app:enterAnim="@anim/zoom_in"
        app:exitAnim="@anim/zoom_out"
        app:popEnterAnim="@anim/zoom_in"
        app:popExitAnim="@anim/zoom_out" />
</activity>

3. 在Compose中触发带缩放动画的导航 #

使用Jetpack Compose的导航组件，直接通过navController触发跳转即可自动应用配置好的缩放动画：

@Composable
fun MainScreen(navController: NavHostController) {
    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
        Button(onClick = {
            navController.navigate("detailActivity")
        }) {
            Text(text = "跳转到详情页")
        }
    }
}

// 导航宿主配置
@Composable
fun AppNavHost() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "mainScreen") {
        composable("mainScreen") {
            MainScreen(navController = navController)
        }
        activity("detailActivity") {
            // 详情页Compose内容
            DetailScreen()
        }
    }
}

4. 进阶：带共享元素的缩放转场 #

如果需要实现类似Flutter Hero动画的共享元素缩放，可按以下步骤操作：

主界面标记共享元素 #

Image(
    painter = painterResource(R.drawable.sample_image),
    contentDescription = "共享图片",
    modifier = Modifier
        .size(100.dp)
        .transitionName("shared_image")
)

详情界面标记同名共享元素 #

Image(
    painter = painterResource(R.drawable.sample_image),
    contentDescription = "共享图片",
    modifier = Modifier
        .fillMaxWidth()
        .height(300.dp)
        .transitionName("shared_image")
)

启动Activity时绑定共享元素转场 #

val context = LocalContext.current
val currentView = LocalView.current
Button(onClick = {
    val intent = Intent(context, DetailActivity::class.java)
    // 找到共享元素对应的View节点
    val sharedView = currentView.findViewWithTag("shared_image") ?: return@Button
    val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
        context as Activity,
        Pair(sharedView, "shared_image")
    )
    ActivityCompat.startActivity(context, intent, options.toBundle())
}) {
    Text(text = "带共享元素跳转")
}

内容的提问来源于stack exchange，提问作者aliking1400