Как добавить поддержку анимаций с предпросмотром для жеста "Назад"

При использовании системных API для возврата назад вы можете включить анимацию в приложении и поддержку пользовательских переходов.

После того как вы включите эту функцию, в приложении будут показываться анимации возврата на главный экран, перехода между объектами activity и перехода между задачами.

В видео показан пример анимации предпросмотра для жеста "Назад" при переходе между действиями и возврате на главный экран в приложении "Настройки" на Android.

1. В ней пользователь возвращается к предыдущему экрану настроек, проводя по экрану назад. Это пример анимации между действиями.
2. Теперь на предыдущем экране пользователь начинает проводить пальцем назад во второй раз, показывая предварительный просмотр главного экрана с его обоями — пример анимации возврата домой.
3. Пользователь продолжает проводить вправо, и на экране появляется анимация, показывающая, как окно уменьшается до значка на главном экране.
4. Пользователь вернулся на главный экран.

Подробнее о том, как добавить поддержку предпросмотра для жеста "Назад"…

Добавьте собственные переходы и анимацию в приложении

Вы можете создавать собственные анимации и переходы свойств в приложении, собственные анимации между действиями и собственные анимации между фрагментами с помощью жестов прогнозирования назад, используя Compose или Views. Чтобы узнать, как создавать переходы с помощью представлений, прочитайте статью Как добавить поддержку анимации предпросмотра для жеста "Назад" в представлениях.

Как добавить собственные переходы в Jetpack Compose

Вы можете использовать PredictiveBackHandler для обработки жестов "Назад" в Jetpack Compose, чтобы создавать собственные переходы в приложении. Эта функция доступна в androidx.activity:activity-compose:1.8.0-alpha01 и более поздних версиях.

PredictiveBackHandler предоставляет лямбда-выражение обратного вызова, которое возвращает Flow<BackEventCompat>, генерирующий события, когда пользователь проводит пальцем от края экрана. Эти события предоставляют информацию о положении касания пользователя, крае пролистывания и, что наиболее важно, progress, который можно использовать для анимации компонентов в рамках обработки жеста назад.

В следующем фрагменте кода показано, как использовать PredictiveBackHandler для анимации уменьшения масштаба и удаления Surface по мере выполнения жеста.

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture.
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture.
            // Animate scale and xOffset back to 1f and 0f respectively.
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}
PredictiveBackSnippets.kt