Android Academy · leksjon

AnimatedVisibility og overganger

Animer visning og skjuling av innhold.

Leksjon 3 av 413 trinn

AnimatedVisibility og overganger er en gratis leksjon i Android Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Android Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Android Academy inneholder totalt 4 leksjoner.

Animere visning

Det føles brått å vise og skjule innhold uten overgang. Compose sin AnimatedVisibility animerer en composable når den kommer inn i og forlater oppsettet.

Legg innholdet i denne, og styr synligheten med en boolsk verdi. Når verdien endres, spiller Compose en inn- eller ut-animasjon i stedet for å vise eller skjule innholdet umiddelbart.

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

Inn- og ut-overganger

De kan velge nøyaktig hvordan innhold kommer inn og forsvinner, med parameterne enter og exit. Vanlige byggesteiner er fadeIn/fadeOut, slideIn/slideOut og expandVertically/shrinkVertically.

Kombiner dem med operatoren + for å kjøre flere samtidig.

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

Finjustere overgangsspesifikasjonen

Hver inn- og ut-overgang godtar en animationSpec, slik at De kan styre varighet og lettelse på samme måte som med animate*AsState.

Her tones innholdet inn over 300 ms og ut raskere, over 150 ms. Dette er et vanlig mønster som gjør at lukking føles rask og responsiv.

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

Utvidelse og krymping

For deler som viser mer innhold, animerer expandVertically og shrinkVertically høyden og skyver innholdet rundt jevnt til side.

Dette passer perfekt for sammenleggbare paneler, vanlige spørsmål eller deler med «vis mer».

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

updateTransition: Én tilstand, mange verdier

Når flere egenskaper skal endres samtidig basert på én tilstand, koordinerer updateTransition dem. API-et oppretter et Transition-objekt der alle underordnede animasjoner går synkront.

Definer tilstanden, og bruk deretter animateColor, animateDp og så videre for hver egenskap som en funksjon av denne tilstanden.

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))
}

Egen tidsstyring for hver egenskap i en overgang

En stor fordel med updateTransition er tidsstyring for hver enkelt egenskap. Hvert underordnet animate*-element kan angi sin egen transitionSpec, slik at farge og størrelse kan bevege seg med ulik hastighet samtidig som de koordineres av den samme tilstanden.

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: Bytte innhold

Når selve innholdet endres, og ikke bare synligheten, bruker De AnimatedContent. API-et animerer overgangen mellom det gamle og det nye innholdet, som standard ved å tone mellom dem.

Det passer perfekt for for eksempel en teller, en trinnindikator eller bytte mellom innlastings- og ferdiglastede tilstander.

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

Tilpassede AnimatedContent-overganger

Tilpass hvordan AnimatedContent bytter innhold, med transitionSpec. Et klassisk eksempel for en teller er å la den nye verdien gli opp mens den gamle glir bort, kombinert med en uttoning.

Nøkkelordet using kobler til en SizeTransform, slik at beholderen også endrer størrelse jevnt.

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

Animere elementer i lister

I en LazyColumn kan elementer som legges til, fjernes eller flyttes, animeres på plass med Modifier.animateItem() på innholdet til hvert element.

Dette gir jevn omorganisering og innsetting uten manuell bokføring.

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

Crossfade for hele skjermer

Crossfade er en enkel og målrettet hjelpefunksjon som toner mellom to tilstander. Den passer godt når De bytter mellom hele skjermer eller større tilstander i brukergrensesnittet.

Send inn den gjeldende tilstanden og en innholdslambda. Når tilstanden endres, toner Crossfade ut det gamle og inn det nye.

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

Koordinere innkommende underordnede elementer

Inne i en blokk med AnimatedVisibility får De et AnimatedVisibilityScope, som eksponerer Modifier.animateEnterExit(). Dette lar individuelle underordnede elementer kjøre sine egne inn- og ut-animasjoner i tillegg til overgangsanimajonen til det overordnede elementet.

Et panel kan for eksempel gli inn mens tittelen toner inn litt senere for å skape en lagdelt effekt.

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

Rask kontroll

De vil animere overgangen fra tallet 3 til tallet 4, slik at den nye verdien tones inn og glir på plass. Hvilket API passer best?

Besvar den i den interaktive leksjonen

Oppsummering: Synlighet og overganger

De kan nå animere innhold som vises, skjules og endres:

AnimatedVisibility animerer inn- og ut-overganger med fadeIn/Out, slideIn/Out, expand/shrink, som kan kombineres med +.
updateTransition koordinerer mange verdier fra én tilstand, hver med sin egen spesifikasjon.
AnimatedContent animerer bytte mellom forskjellig innhold; Crossfade er den enkle varianten som toner mellom dem.
Modifier.animateItem() animerer innsetting og omorganisering av elementer i lister.

Deretter: bevegelser med gester og fysikkbaserte fjæranimasjoner for naturlige, interaktive bevegelser.

Gratis å komme i gang

Lær deg Kotlin med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 36
Leksjoner: 152

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «AnimatedVisibility og overganger» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Android Academy, inkludert «AnimatedVisibility og overganger», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Android Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «AnimatedVisibility og overganger»?

Animer visning og skjuling av innhold. Du øver på Android Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Android Academy?

Ingen tidligere erfaring er nødvendig. Android Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «AnimatedVisibility og overganger»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Android Academy-leksjonen?

Ja. Alle Android Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Android Academy