如何在Compose Destinations库中添加转场动画？

你可以通过两种方式给Compose Destinations设置页面转场动画：全局默认动画，或者单个页面的自定义动画。

全局默认转场动画 #

直接在DestinationsNavHost中通过defaultTransitions参数配置全局生效的转场动画，覆盖默认的无动画效果：

import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import com.ramcosta.composedestinations.navigation.rememberNavHostTransitions

setContent {
    DestinationsNavHost(
        navGraph = NavGraphs.root,
        defaultTransitions = rememberNavHostTransitions(
            // 进入新页面的动画
            defaultEnterTransition = { _, _ ->
                slideInHorizontally(initialOffsetX = { it }) + fadeIn()
            },
            // 退出当前页面的动画
            defaultExitTransition = { _, _ ->
                slideOutHorizontally(targetOffsetX = { -it }) + fadeOut()
            },
            // 从返回栈弹出页面时的进入动画
            defaultPopEnterTransition = { _, _ ->
                slideInHorizontally(initialOffsetX = { -it }) + fadeIn()
            },
            // 从返回栈弹出页面时的退出动画
            defaultPopExitTransition = { _, _ ->
                slideOutHorizontally(targetOffsetX = { it }) + fadeOut()
            }
        )
    )
}

单个页面的自定义转场动画 #

如果需要给某个特定页面设置独有的转场效果，可以在该页面的@Destination注解中配置style参数：

import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import com.ramcosta.composedestinations.annotation.Destination
import com.ramcosta.composedestinations.spec.DestinationStyle

@Destination(
    style = DestinationStyle.Animated(
        enterTransition = { _, _ -> slideInVertically() + fadeIn() },
        exitTransition = { _, _ -> slideOutVertically() + fadeOut() },
        popEnterTransition = { _, _ -> slideInVertically(initialOffsetY = { -it }) + fadeIn() },
        popExitTransition = { _, _ -> slideOutVertically(targetOffsetY = { it }) + fadeOut() }
    )
)
@Composable
fun ProfileScreen() {
    // 页面内容
}

这个配置会覆盖全局的默认动画，只对当前页面生效。

注意事项 #

• 所有动画API都来自androidx.compose.animation包，确保你已经添加了对应的依赖。
• 动画的initialOffsetX/targetOffsetX等参数可以根据需求调整数值，实现不同的滑动方向和距离。

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