Android Academy · Lezione

AnimatedVisibility e transizioni

Animi la visualizzazione e l'occultamento dei contenuti

Lezione 3 di 413 passaggi

AnimatedVisibility e transizioni è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Animare la comparsa

Mostrare e nascondere i contenuti bruscamente può risultare sgradevole. AnimatedVisibility di Compose anima un composable quando entra o esce dal layout.

Inserisca il contenuto al suo interno e controlli la visibilità con un valore booleano. Quando il booleano cambia, Compose riproduce un'animazione di entrata o di uscita invece di mostrare o rimuovere il contenuto istantaneamente.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Transizioni di entrata e di uscita

Può scegliere esattamente come il contenuto entra ed esce utilizzando i parametri enter e exit. Tra i blocchi di costruzione più comuni figurano fadeIn/fadeOut, slideIn/slideOut e expandVertically/shrinkVertically.

Li combini con l'operatore + per eseguirne diversi contemporaneamente.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Regolare la specifica della transizione

Ogni transizione di entrata o di uscita accetta un animationSpec, quindi può controllare durata ed easing proprio come con animate*AsState.

Qui il contenuto compare con una dissolvenza nell'arco di 300ms e scompare più rapidamente, in 150ms: un comportamento comune che rende le chiusure immediate e reattive.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Espandere e ridurre

Per le sezioni che mostrano contenuti aggiuntivi, expandVertically e shrinkVertically animano l'altezza, spostando gradualmente il contenuto circostante.

È perfetto per pannelli comprimibili, elementi di FAQ o sezioni "mostra altro".

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: uno stato, molti valori

Quando più proprietà devono cambiare insieme in base a un unico stato, updateTransition le coordina. Crea un oggetto Transition i cui elementi figli vengono animati in sincronia.

Definisca lo stato, quindi utilizzi animateColor, animateDp e così via per ogni proprietà in funzione di quello stato.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Temporizzazione per proprietà in una transizione

Un grande vantaggio di updateTransition è la temporizzazione specifica per ogni proprietà. Ogni elemento figlio animate* può fornire il proprio transitionSpec, così colore e dimensioni possono muoversi a velocità diverse pur restando coordinati dallo stesso stato.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: sostituire i contenuti

Quando cambia il contenuto in sé, non solo la sua visibilità, utilizzi AnimatedContent. L'API anima il passaggio dal contenuto precedente a quello nuovo, per impostazione predefinita con una dissolvenza incrociata.

È ideale per elementi come un contatore, un indicatore di avanzamento o il passaggio dallo stato di caricamento a quello caricato.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

Transizioni personalizzate di AnimatedContent

Personalizzi il modo in cui AnimatedContent sostituisce i contenuti con transitionSpec. Per un contatore, un effetto classico consiste nel far scorrere verso l'alto il nuovo valore mentre quello precedente scorre via, abbinando il tutto a una dissolvenza.

La parola chiave using associa un SizeTransform, in modo che anche il contenitore si ridimensioni gradualmente.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Animare gli elementi di un elenco

All'interno di una LazyColumn, gli elementi aggiunti, rimossi o spostati possono animarsi nella nuova posizione utilizzando Modifier.animateItem() sul contenuto di ciascun elemento.

In questo modo riordinamento e inserimento risultano fluidi senza dover gestire manualmente lo stato.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Dissolvenza incrociata per intere schermate

Crossfade è un helper semplice e mirato che applica una dissolvenza tra due stati, ideale per passare da una schermata intera a un'altra o tra stati principali dell'interfaccia.

Gli passi lo stato corrente e una lambda di contenuto; quando lo stato cambia, Crossfade fa scomparire gradualmente il contenuto precedente e comparire quello nuovo.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Coordinare gli elementi figli in entrata

All'interno di un blocco AnimatedVisibility è disponibile un AnimatedVisibilityScope, che espone Modifier.animateEnterExit(). Ciò consente ai singoli elementi figli di avere una propria animazione di entrata o di uscita, in aggiunta alla transizione del genitore.

Ad esempio, un pannello può scorrere all'interno mentre il titolo compare con una dissolvenza leggermente ritardata, creando un effetto a più livelli.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Verifica rapida

Desidera animare il passaggio dal numero 3 al numero 4, facendo comparire il nuovo valore con una dissolvenza e uno scorrimento. Quale API è più adatta?

Rispondi nella lezione interattiva

Riepilogo: visibilità e transizioni

Ora sa animare la comparsa, la scomparsa e il cambiamento dei contenuti:

AnimatedVisibility anima entrata e uscita con fadeIn/Out, slideIn/Out, expand/shrink, combinabili con +.
updateTransition coordina molti valori a partire da un unico stato, ciascuno con la propria specifica.
AnimatedContent anima il passaggio tra contenuti diversi; Crossfade è la variante con la semplice dissolvenza.
Modifier.animateItem() anima gli inserimenti e il riordinamento degli elementi di un elenco.

Prossimo argomento: gesti e animazioni spring basate sulla fisica per ottenere un movimento naturale e interattivo.

Gratis per iniziare

Impara Kotlin con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 36
Lezioni: 152

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «AnimatedVisibility e transizioni» è gratuita?

Sì — il testo completo di «AnimatedVisibility e transizioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «AnimatedVisibility e transizioni»?

Animi la visualizzazione e l'occultamento dei contenuti Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «AnimatedVisibility e transizioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy