From 47647217f1ad95b134a239544589a3664da7c426 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 18 Aug 2024 21:40:10 +0800 Subject: [PATCH] Refactor(Navigation): Optimize navigation bar switching transition animation --- .../toolbox/navigation/OxygenNavHost.kt | 7 ++-- .../toolbox/navigation/StarNavigation.kt | 28 ++++++++++++++-- .../toolbox/navigation/ToolStoreNavigation.kt | 28 ++++++++++++++-- .../toolbox/navigation/ToolsNavigation.kt | 33 ++++++++++++++++++- .../top/fatweb/oxygen/toolbox/ui/OxygenApp.kt | 3 +- 5 files changed, 91 insertions(+), 8 deletions(-) diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/OxygenNavHost.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/OxygenNavHost.kt index cc4c3f9..b990688 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/OxygenNavHost.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/OxygenNavHost.kt @@ -10,7 +10,8 @@ fun OxygenNavHost( modifier: Modifier = Modifier, appState: OxygenAppState, onShowSnackbar: suspend (message: String, action: String?) -> Boolean, - startDestination: String + startDestination: String, + isVertical: Boolean ) { val navController = appState.navController NavHost( @@ -29,9 +30,11 @@ fun OxygenNavHost( onBackClick = navController::popBackStack ) toolStoreScreen( + isVertical = isVertical, onNavigateToToolView = navController::navigateToToolView ) toolsScreen( + isVertical = isVertical, onShowSnackbar = onShowSnackbar, onNavigateToToolView = navController::navigateToToolView, onNavigateToToolStore = { appState.navigateToTopLevelDestination(TopLevelDestination.ToolStore) } @@ -40,7 +43,7 @@ fun OxygenNavHost( onBackClick = navController::popBackStack ) starScreen( - + isVertical = isVertical ) } } \ No newline at end of file diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/StarNavigation.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/StarNavigation.kt index 017a7b1..eea2421 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/StarNavigation.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/StarNavigation.kt @@ -1,5 +1,9 @@ package top.fatweb.oxygen.toolbox.navigation +import androidx.compose.animation.slideInHorizontally +import androidx.compose.animation.slideInVertically +import androidx.compose.animation.slideOutHorizontally +import androidx.compose.animation.slideOutVertically import androidx.navigation.NavController import androidx.navigation.NavGraphBuilder import androidx.navigation.NavOptions @@ -10,9 +14,29 @@ const val STAR_ROUTE = "star_route" fun NavController.navigateToStar(navOptions: NavOptions) = navigate(STAR_ROUTE, navOptions) -fun NavGraphBuilder.starScreen() { +fun NavGraphBuilder.starScreen( + isVertical: Boolean +) { composable( - route = STAR_ROUTE + route = STAR_ROUTE, + enterTransition = { + when (initialState.destination.route) { + TOOL_STORE_ROUTE, TOOLS_ROUTE -> + if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth }) + else slideInVertically(initialOffsetY = { fullHeight -> fullHeight }) + + else -> null + } + }, + exitTransition = { + when (targetState.destination.route) { + TOOL_STORE_ROUTE, TOOLS_ROUTE -> + if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth }) + else slideOutVertically(targetOffsetY = { fullHeight -> fullHeight }) + + else -> null + } + } ) { StarRoute() } diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolStoreNavigation.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolStoreNavigation.kt index 28c4cc4..9b15c26 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolStoreNavigation.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolStoreNavigation.kt @@ -1,5 +1,9 @@ package top.fatweb.oxygen.toolbox.navigation +import androidx.compose.animation.slideInHorizontally +import androidx.compose.animation.slideInVertically +import androidx.compose.animation.slideOutHorizontally +import androidx.compose.animation.slideOutVertically import androidx.navigation.NavController import androidx.navigation.NavGraphBuilder import androidx.navigation.NavOptions @@ -8,13 +12,33 @@ import top.fatweb.oxygen.toolbox.ui.tool.ToolStoreRoute const val TOOL_STORE_ROUTE = "tool_store_route" -fun NavController.navigateToToolStore(navOptions: NavOptions? = null) = navigate(TOOL_STORE_ROUTE, navOptions) +fun NavController.navigateToToolStore(navOptions: NavOptions? = null) = + navigate(TOOL_STORE_ROUTE, navOptions) fun NavGraphBuilder.toolStoreScreen( + isVertical: Boolean, onNavigateToToolView: (username: String, toolId: String, preview: Boolean) -> Unit ) { composable( - route = TOOL_STORE_ROUTE + route = TOOL_STORE_ROUTE, + enterTransition = { + when (initialState.destination.route) { + TOOLS_ROUTE, STAR_ROUTE -> + if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> -fullWidth }) + else slideInVertically(initialOffsetY = { fullHeight -> -fullHeight }) + + else -> null + } + }, + exitTransition = { + when (targetState.destination.route) { + TOOLS_ROUTE, STAR_ROUTE -> + if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> -fullWidth }) + else slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight }) + + else -> null + } + } ) { ToolStoreRoute( onNavigateToToolView = onNavigateToToolView diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolsNavigation.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolsNavigation.kt index 5f8f0ec..0b60335 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolsNavigation.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolsNavigation.kt @@ -1,5 +1,9 @@ package top.fatweb.oxygen.toolbox.navigation +import androidx.compose.animation.slideInHorizontally +import androidx.compose.animation.slideInVertically +import androidx.compose.animation.slideOutHorizontally +import androidx.compose.animation.slideOutVertically import androidx.navigation.NavController import androidx.navigation.NavGraphBuilder import androidx.navigation.NavOptions @@ -11,12 +15,39 @@ const val TOOLS_ROUTE = "tools_route" fun NavController.navigateToTools(navOptions: NavOptions) = navigate(TOOLS_ROUTE, navOptions) fun NavGraphBuilder.toolsScreen( + isVertical: Boolean, onShowSnackbar: suspend (message: String, action: String?) -> Boolean, onNavigateToToolView: (username: String, toolId: String, preview: Boolean) -> Unit, onNavigateToToolStore: () -> Unit ) { composable( - route = TOOLS_ROUTE + route = TOOLS_ROUTE, + enterTransition = { + when (initialState.destination.route) { + TOOL_STORE_ROUTE -> + if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth }) + else slideInVertically(initialOffsetY = { fullHeight -> fullHeight }) + + STAR_ROUTE -> + if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> -fullWidth }) + else slideInVertically(initialOffsetY = { fullHeight -> -fullHeight }) + + else -> null + } + }, + exitTransition = { + when (targetState.destination.route) { + TOOL_STORE_ROUTE -> + if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth }) + else slideOutVertically(targetOffsetY = { fullHeight -> fullHeight }) + + STAR_ROUTE -> + if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> -fullWidth }) + else slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight }) + + else -> null + } + } ) { ToolsRoute( onShowSnackbar = onShowSnackbar, diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt index db7353f..30142be 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt @@ -173,7 +173,8 @@ fun OxygenApp(appState: OxygenAppState) { startDestination = when (appState.launchPageConfig) { LaunchPageConfig.Tools -> TOOLS_ROUTE LaunchPageConfig.Star -> STAR_ROUTE - } + }, + isVertical = appState.shouldShowBottomBar ) } }