Анимации переходов в Jetpack Compose Navigation

Чтобы переопределить анимации переходов в Jetpack Compose Navigation, можно использовать AnimatedNavHost вместе с AnimatedVisibilityScope. Настраивая переходы, вы можете задать собственные анимации для появления и исчезновения.

Шаг 1: Добавьте необходимые зависимости

Сначала добавьте зависимость accompanist-navigation-animation в файл build.gradle:

dependencies {
    implementation "com.google.accompanist:accompanist-navigation-animation:<version>"
}

Шаг 2: Настройка анимаций переходов

Используйте AnimatedNavHost вместе с кастомными анимациями enterTransition и exitTransition в вашем NavHost. Вот пример:

import androidx.compose.animation.*
import androidx.compose.runtime.Composable
import androidx.navigation.NavBackStackEntry
import androidx.navigation.NavHostController
import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.composable

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AppNavGraph(navController: NavHostController) {
    AnimatedNavHost(
        navController = navController,
        startDestination = "screen1"
    ) {
        composable(
            route = "screen1",
            enterTransition = { initial, target ->
                slideInHorizontally(initialOffsetX = { 1000 }) + fadeIn()
            },
            exitTransition = { initial, target ->
                slideOutHorizontally(targetOffsetX = { -1000 }) + fadeOut()
            },
            popEnterTransition = { initial, target ->
                slideInHorizontally(initialOffsetX = { -1000 }) + fadeIn()
            },
            popExitTransition = { initial, target ->
                slideOutHorizontally(targetOffsetX = { 1000 }) + fadeOut()
            }
        ) {
            Screen1(navController)
        }

        composable(
            route = "screen2",
            enterTransition = { initial, target ->
                slideInHorizontally(initialOffsetX = { 1000 }) + fadeIn()
            },
            exitTransition = { initial, target ->
                slideOutHorizontally(targetOffsetX = { -1000 }) + fadeOut()
            },
            popEnterTransition = { initial, target ->
                slideInHorizontally(initialOffsetX = { -1000 }) + fadeIn()
            },
            popExitTransition = { initial, target ->
                slideOutHorizontally(targetOffsetX = { 1000 }) + fadeOut()
            }
        ) {
            Screen2(navController)
        }
    }
}

Объяснение:

• slideInHorizontally: Сдвигает элемент в видимую область по горизонтали.
• fadeIn: Применяет эффект плавного появления.
• slideOutHorizontally: Сдвигает элемент из видимой области по горизонтали.
• fadeOut: Применяет эффект плавного исчезновения.
• enterTransition и exitTransition: Определяют анимации при переходе на экран и при выходе с экрана.
• popEnterTransition и popExitTransition: Определяют анимации для обратной навигации (например, при нажатии кнопки "назад").