Aggiungere il supporto per le animazioni predittive per la schiena

Quando utilizzi le API di sistema per il gesto Indietro, puoi attivare la ricezione di animazioni in-app e supportare le transizioni personalizzate.

Video 1: animazioni di Indietro predittivo

Dopo l'attivazione, l'app mostra le animazioni per il ritorno alla home page, tra attività e tra task.

Il video mostra un breve esempio di animazioni Indietro predittivo per il passaggio da un'attività all'altra e il ritorno alla schermata Home utilizzando l'app Impostazioni di Android.

  1. Nell'animazione, l'utente scorre indietro per tornare alla schermata delle impostazioni precedente, un esempio di animazione tra attività.
  2. Ora, nella schermata precedente, l'utente inizia a scorrere indietro una seconda volta, mostrando un'anteprima della schermata Home con il relativo sfondo, un esempio di animazione di ritorno alla home.
  3. L'utente continua a scorrere verso destra, mostrando un'animazione della finestra che si riduce all'icona nella schermata Home.
  4. L'utente è tornato completamente alla schermata Home.

Scopri di più su come aggiungere il supporto dei gesti Indietro predittivi.

Aggiungi transizioni e animazioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate delle proprietà in-app, animazioni personalizzate tra attività e animazioni personalizzate tra frammenti con gesti Indietro predittivi utilizzando Compose o Views. Per scoprire come creare transizioni utilizzando le visualizzazioni, consulta Aggiungi il supporto per le animazioni Indietro predittivo nelle visualizzazioni.

Aggiungi transizioni personalizzate in Jetpack Compose

Puoi utilizzare PredictiveBackHandler per gestire i gesti Indietro predittivi in Jetpack Compose per creare transizioni in-app personalizzate. Questa funzionalità è disponibile nella versione androidx.activity:activity-compose:1.8.0-alpha01 o successive.

PredictiveBackHandler fornisce una funzione lambda di callback che espone un Flow<BackEventCompat> che emette eventi quando l'utente scorre indietro dal bordo. Questi eventi forniscono informazioni sulla posizione del tocco dell'utente, sul bordo di scorrimento e, soprattutto, su progress, che può essere utilizzato per animare i componenti durante la gestione del gesto Indietro.

Lo snippet seguente mostra un esempio di utilizzo di PredictiveBackHandler per animare un Surface che si riduce e si allontana con l'avanzamento del 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 { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}