Adicionar suporte a animações de volta preditiva

Ao usar as APIs de retorno do sistema, você pode ativar o recebimento de animações no app e o suporte a transições personalizadas.

Depois que o recurso é ativado, seu app exibe animações de volta à tela inicial entre atividades e tarefas.

O vídeo mostra um breve exemplo de animações de volta preditiva entre atividades e de volta à tela inicial usando o app Configurações do Android.

1. Na animação, o usuário desliza para retornar à tela de configurações anterior, um exemplo de animação entre atividades.
2. Nessa tela, o usuário começa a deslizar para voltar uma segunda vez, mostrando uma prévia da tela inicial com o plano de fundo, que é um exemplo da animação de retorno à tela inicial.
3. O usuário desliza para a direita, mostrando uma animação da redução da janela até o ícone na tela inicial.
4. O usuário retornou totalmente para a tela inicial.

Saiba mais sobre como Adicionar suporte a gestos de volta preditivo.

Adicionar animações e transições personalizadas no app

É possível criar animações e transições de propriedades personalizadas no app, animações personalizadas entre atividades e animações personalizadas entre fragmentos com gestos de volta preditiva.

Adicionar transições personalizadas no Jetpack Compose

É possível usar PredictiveBackHandler para processar gestos de volta preditiva no Jetpack Compose e criar transições personalizadas no app. Esse recurso está disponível no androidx.activity:activity-compose:1.8.0-alpha01 ou em versões mais recentes.

O PredictiveBackHandler fornece um lambda de callback que expõe um Flow<BackEventCompat> que emite eventos à medida que o usuário desliza para voltar da borda. Esses eventos fornecem informações sobre a posição do toque do usuário, a borda do deslizar e, mais importante, progress, que pode ser usado para animar componentes como parte do processamento do gesto de retorno.

O snippet a seguir mostra um exemplo de uso de PredictiveBackHandler para animar uma Surface diminuindo e se afastando com o progresso do gesto:

@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(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}