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

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

Видео 1. Анимация при использовании функции "предпросмотр для жеста "Назад""

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

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

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

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

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

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

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

В Jetpack Compose можно использовать PredictiveBackHandler для обработки прогнозирующих жестов "Назад" при создании собственных переходов в приложении. Эта функция доступна в версии 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
        ) {}
    }
}