make modalsheet main enter/exit animations configurable

hrach · Oct 4, 2024 · a6f87e2 · a6f87e2
1 parent 86beb9f
commit a6f87e2
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 5 deletions.
diff --git a/demo/src/main/kotlin/dev/hrach/navigation/demo/NavHost.kt b/demo/src/main/kotlin/dev/hrach/navigation/demo/NavHost.kt
@@ -1,10 +1,23 @@
 package dev.hrach.navigation.demo
 
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.FastOutLinearInEasing
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
@@ -29,9 +42,14 @@ internal fun NavHost(
 	modalSheetNavigator: ModalSheetNavigator,
 	bottomSheetNavigator: BottomSheetNavigator,
 ) {
+	val density = LocalDensity.current
 	NavHost(
 		navController = navController,
 		startDestination = Destinations.Home,
+		enterTransition = { SharedXAxisEnterTransition(density) },
+		exitTransition = { SharedXAxisExitTransition(density) },
+		popEnterTransition = { SharedXAxisPopEnterTransition(density) },
+		popExitTransition = { SharedXAxisPopExitTransition(density) },
 	) {
 		composable<Destinations.Home> { Home(navController) }
 		composable<Destinations.List> { List() }
@@ -40,14 +58,62 @@ internal fun NavHost(
 		modalSheet<Destinations.Modal2> { Modal2() }
 		bottomSheet<Destinations.BottomSheet> { BottomSheet(navController) }
 	}
-	ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background)
+	ModalSheetHost(
+		modalSheetNavigator = modalSheetNavigator,
+		containerColor = MaterialTheme.colorScheme.background,
+		enterTransition = { SharedYAxisEnterTransition(density) },
+		exitTransition = { SharedYAxisExitTransition(density) },
+	)
 	BottomSheetHost(
-		bottomSheetNavigator,
-		shape = RoundedCornerShape( // optional, just an example of bottom sheet custom property
+		navigator = bottomSheetNavigator,
+		shape = RoundedCornerShape(
+			// optional, just an example of bottom sheet custom property
 			topStart = CornerSize(12.dp),
 			topEnd = CornerSize(12.dp),
 			bottomStart = CornerSize(0.dp),
 			bottomEnd = CornerSize(0.dp),
 		),
 	)
 }
+
+private val SharedXAxisEnterTransition: (Density) -> EnterTransition = { density ->
+	fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
+
+private val SharedXAxisPopEnterTransition: (Density) -> EnterTransition = { density ->
+	fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideInHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { (-30).dp.roundToPx() }
+		}
+}
+
+private val SharedXAxisExitTransition: (Density) -> ExitTransition = { density ->
+	fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
+		slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { (-30).dp.roundToPx() }
+		}
+}
+
+private val SharedXAxisPopExitTransition: (Density) -> ExitTransition = { density ->
+	fadeOut(animationSpec = tween(durationMillis = 90, easing = FastOutLinearInEasing)) +
+		slideOutHorizontally(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
+
+private val SharedYAxisEnterTransition: (Density) -> EnterTransition = { density ->
+	fadeIn(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideInVertically(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
+
+private val SharedYAxisExitTransition: (Density) -> ExitTransition = { density ->
+	fadeOut(animationSpec = tween(durationMillis = 210, delayMillis = 90, easing = LinearOutSlowInEasing)) +
+		slideOutVertically(animationSpec = tween(durationMillis = 300)) {
+			with(density) { 30.dp.roundToPx() }
+		}
+}
diff --git a/modalsheet/src/main/kotlin/dev/hrach/navigation/modalsheet/ModalSheetHost.kt b/modalsheet/src/main/kotlin/dev/hrach/navigation/modalsheet/ModalSheetHost.kt
@@ -176,14 +176,17 @@ public fun ModalSheetHost(
 					.background(if (transition.targetState == null || transition.currentState == null) Color.Transparent else containerColor),
 				contentAlignment = Alignment.TopStart,
 				transitionSpec = block@{
+					@Suppress("UNCHECKED_CAST")
 					val initialState = initialState ?: return@block ContentTransform(
-						fadeIn(),
+						enterTransition(this as AnimatedContentTransitionScope<NavBackStackEntry>),
 						fadeOut(), // irrelevant
 						0f,
 					)
+
+					@Suppress("UNCHECKED_CAST")
 					val targetState = targetState ?: return@block ContentTransform(
 						fadeIn(), // irrelevant
-						fadeOut(),
+						exitTransition(this as AnimatedContentTransitionScope<NavBackStackEntry>),
 						0f,
 					)