Improve navigation animations

app/src/main/java/com/starry/myne/ui/common/NoBooksAvailable.kt

@@ -16,25 +16,19 @@
 
 package com.starry.myne.ui.common
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.airbnb.lottie.compose.LottieAnimation
@@ -44,24 +38,15 @@ import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.starry.myne.R
-import com.starry.myne.ui.theme.figeronaFont
 
 @Composable
 fun NoBooksAvailable(text: String) {
-
     Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(MaterialTheme.colorScheme.background)
-            .padding(bottom = 70.dp)
-            .verticalScroll(rememberScrollState()),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+        modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        val compositionResult: LottieCompositionResult =
-            rememberLottieComposition(
-                spec = LottieCompositionSpec.RawRes(R.raw.no_books_available_lottie)
-            )
+        val compositionResult: LottieCompositionResult = rememberLottieComposition(
+            spec = LottieCompositionSpec.RawRes(R.raw.no_library_items_lottie)
+        )
         val progressAnimation by animateLottieCompositionAsState(
             compositionResult.value,
             isPlaying = true,
@@ -70,27 +55,22 @@ fun NoBooksAvailable(text: String) {
         )
 
         Spacer(modifier = Modifier.weight(1f))
-
         LottieAnimation(
             composition = compositionResult.value,
-            progress = progressAnimation,
-            modifier = Modifier.size(280.dp),
+            progress = { progressAnimation },
+            modifier = Modifier.size(300.dp),
             enableMergePaths = true
         )
 
-        Spacer(modifier = Modifier.height(4.dp))
-
-        Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
-            Text(
-                modifier = Modifier.padding(horizontal = 14.dp),
-                text = text,
-                color = MaterialTheme.colorScheme.onBackground,
-                fontFamily = figeronaFont,
-                fontSize = 16.5.sp,
-                fontWeight = FontWeight.SemiBold,
-            )
-        }
-
-        Spacer(modifier = Modifier.weight(1.68f))
+        Text(
+            text = text,
+            fontWeight = FontWeight.Medium,
+            fontSize = 18.sp,
+            textAlign = TextAlign.Center,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 24.dp)
+        )
+        Spacer(modifier = Modifier.weight(1.4f))
     }
 }

app/src/main/java/com/starry/myne/ui/navigation/NavAnimation.kt

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) [2022 - Present] Stɑrry Shivɑm
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+package com.starry.myne.ui.navigation
+
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.LinearEasing
+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.slideOutHorizontally
+
+// Duration of the navigation animation
+private const val NAVIGATION_ANIM_DURATION = 360
+
+private const val BOTTOM_NAV_ANIM_DURATION = 400
+
+/**
+ * Enter transition for the navigation animation
+ */
+fun enterTransition() = slideInHorizontally(
+    initialOffsetX = { NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.5).toInt(),
+        easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1f)
+    )
+) + fadeIn(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearOutSlowInEasing
+    )
+)
+
+/**
+ * Exit transition for the navigation animation
+ */
+fun exitTransition() = slideOutHorizontally(
+    targetOffsetX = { -NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.5).toInt(),
+        easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1f)
+    )
+) + fadeOut(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearOutSlowInEasing
+    )
+)
+
+/**
+ * Enter transition for the pop navigation animation
+ */
+fun popEnterTransition() = slideInHorizontally(
+    initialOffsetX = { -NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.2).toInt(),
+        easing = CubicBezierEasing(0.6f, 0.05f, 0.19f, 0.95f)
+    )
+) + fadeIn(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION / 2,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearEasing
+    )
+)
+
+/**
+ * Exit transition for the pop navigation animation
+ */
+fun popExitTransition() = slideOutHorizontally(
+    targetOffsetX = { NAVIGATION_ANIM_DURATION },
+    animationSpec = tween(
+        durationMillis = (NAVIGATION_ANIM_DURATION * 1.2).toInt(),
+        easing = CubicBezierEasing(0.6f, 0.05f, 0.19f, 0.95f)
+    )
+) + fadeOut(
+    animationSpec = tween(
+        durationMillis = NAVIGATION_ANIM_DURATION / 2,
+        delayMillis = NAVIGATION_ANIM_DURATION / 4,
+        easing = LinearEasing
+    )
+)
+
+fun bottomNavEnter() = fadeIn(animationSpec = tween(durationMillis = BOTTOM_NAV_ANIM_DURATION))
+fun bottomNavExit() = fadeOut(animationSpec = tween(durationMillis = BOTTOM_NAV_ANIM_DURATION))
+fun bottomNavPopEnter() = fadeIn(animationSpec = tween(durationMillis = BOTTOM_NAV_ANIM_DURATION))
+fun bottomNavPopExit() = fadeOut(animationSpec = tween(durationMillis = BOTTOM_NAV_ANIM_DURATION))
+

app/src/main/java/com/starry/myne/ui/navigation/NavGraph.kt

@@ -16,12 +16,6 @@
 
 package com.starry.myne.ui.navigation
 
-import androidx.compose.animation.core.FastOutSlowInEasing
-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.slideOutHorizontally
 import androidx.compose.foundation.background
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -44,34 +38,6 @@ import com.starry.myne.ui.screens.settings.composables.SettingsScreen
 import com.starry.myne.ui.screens.welcome.composables.WelcomeScreen
 
 
-private const val NAVIGATION_ANIM_DURATION = 300
-private const val FADEIN_ANIM_DURATION = 400
-
-private fun enterTransition() = slideInHorizontally(
-    initialOffsetX = { NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeIn(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-private fun exitTransition() = slideOutHorizontally(
-    targetOffsetX = { -NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeOut(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-private fun popEnterTransition() = slideInHorizontally(
-    initialOffsetX = { -NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeIn(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-private fun popExitTransition() = slideOutHorizontally(
-    targetOffsetX = { NAVIGATION_ANIM_DURATION }, animationSpec = tween(
-        durationMillis = NAVIGATION_ANIM_DURATION, easing = FastOutSlowInEasing
-    )
-) + fadeOut(animationSpec = tween(NAVIGATION_ANIM_DURATION))
-
-
 @Composable
 fun NavGraph(
     startDestination: String,
@@ -95,18 +61,18 @@ fun NavGraph(
 
         /** Home Screen */
         composable(route = BottomBarScreen.Home.route,
-            enterTransition = { fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION)) },
+            enterTransition = { bottomNavEnter() },
             exitTransition = {
                 if (initialState.destination.route == Screens.BookDetailScreen.route) {
                     exitTransition()
-                } else fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavExit()
             },
             popEnterTransition = {
                 if (targetState.destination.route == Screens.BookDetailScreen.route) {
                     popEnterTransition()
-                } else fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavPopEnter()
             },
-            popExitTransition = { fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION)) }) {
+            popExitTransition = { bottomNavPopExit() }) {
             HomeScreen(navController, networkStatus)
         }
 
@@ -129,18 +95,18 @@ fun NavGraph(
 
         /** Categories Screen */
         composable(route = BottomBarScreen.Categories.route,
-            enterTransition = { fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION)) },
+            enterTransition = { bottomNavEnter() },
             exitTransition = {
                 if (initialState.destination.route == Screens.CategoryDetailScreen.route) {
                     exitTransition()
-                } else fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavExit()
             },
             popEnterTransition = {
                 if (targetState.destination.route == Screens.CategoryDetailScreen.route) {
                     popEnterTransition()
-                } else fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavPopEnter()
             },
-            popExitTransition = { fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION)) }) {
+            popExitTransition = { bottomNavPopExit() }) {
             CategoriesScreen(navController)
         }
 
@@ -161,18 +127,18 @@ fun NavGraph(
 
         /** Library Screen */
         composable(route = BottomBarScreen.Library.route,
-            enterTransition = { fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION)) },
+            enterTransition = { bottomNavEnter() },
             exitTransition = {
                 if (initialState.destination.route == Screens.BookDetailScreen.route) {
                     exitTransition()
-                } else fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavExit()
             },
             popEnterTransition = {
                 if (targetState.destination.route == BottomBarScreen.Library.route) {
                     popEnterTransition()
-                } else fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavPopEnter()
             },
-            popExitTransition = { fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION)) }) {
+            popExitTransition = { bottomNavPopExit() }) {
             LibraryScreen(navController)
         }
 
@@ -197,18 +163,18 @@ fun NavGraph(
 
         /** Settings Screen */
         composable(route = BottomBarScreen.Settings.route,
-            enterTransition = { fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION)) },
+            enterTransition = { bottomNavEnter() },
             exitTransition = {
                 if (initialState.destination.route == Screens.OSLScreen.route || initialState.destination.route == Screens.AboutScreen.route) {
                     exitTransition()
-                } else fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavExit()
             },
             popEnterTransition = {
                 if (initialState.destination.route == Screens.OSLScreen.route || initialState.destination.route == Screens.AboutScreen.route) {
                     popEnterTransition()
-                } else fadeIn(animationSpec = tween(FADEIN_ANIM_DURATION))
+                } else bottomNavPopEnter()
             },
-            popExitTransition = { fadeOut(animationSpec = tween(FADEIN_ANIM_DURATION)) }) {
+            popExitTransition = { bottomNavPopExit() }) {
             SettingsScreen(navController)
         }
 

app/src/main/java/com/starry/myne/ui/screens/categories/composables/CategoryDetailScreen.kt

@@ -33,7 +33,6 @@ import androidx.compose.material.ModalBottomSheetState
 import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.rememberModalBottomSheetState
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -42,7 +41,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalHapticFeedback
@@ -53,7 +51,6 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavController
-import coil.annotation.ExperimentalCoilApi
 import com.starry.myne.R
 import com.starry.myne.helpers.NetworkObserver
 import com.starry.myne.helpers.book.BookLanguage
@@ -72,10 +69,7 @@ import kotlinx.coroutines.launch
 import java.util.Locale
 
 
-@OptIn(
-    ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class,
-    ExperimentalComposeUiApi::class, ExperimentalCoilApi::class
-)
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun CategoryDetailScreen(
     category: String, navController: NavController, networkStatus: NetworkObserver.Status
@@ -144,10 +138,7 @@ fun CategoryDetailScreen(
 
 }
 
-@ExperimentalMaterialApi
-@ExperimentalCoilApi
-@ExperimentalMaterial3Api
-@ExperimentalComposeUiApi
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun CategoryDetailScaffold(
     category: String,