Android Academy · Oppitunti

AnimatedVisibility ja siirtymät

Animoikaa sisällön näyttäminen ja piilottaminen.

Oppitunti 3/413 vaihetta

AnimatedVisibility ja siirtymät on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Ilmestymisen animointi

Sisällön äkillinen näyttäminen ja piilottaminen tuntuu töksähtävältä. Composen AnimatedVisibility animoi komposoitavan sisällön sen tullessa asetteluun ja poistuessa siitä.

Ympäröi sisältö sillä ja hallitse näkyvyyttä totuusarvolla. Kun totuusarvo muuttuu, Compose suorittaa sisääntulo- tai poistumisanimaation sen sijaan, että sisältö ilmestyisi tai katoaisi välittömästi.

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

Sisääntulo- ja poistumissiirtymät

Voit valita tarkasti, miten sisältö tulee näkyviin ja poistuu käyttämällä parametreja enter ja exit. Yleisiä rakennuspalikoita ovat fadeIn/fadeOut, slideIn/slideOut ja expandVertically/shrinkVertically.

Yhdistä ne +-operaattorilla, jolloin ne suoritetaan samanaikaisesti.

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

Siirtymän määritysten hienosäätö

Jokainen sisääntulo- ja poistumissiirtymä hyväksyy animationSpec-parametrin, joten voit hallita kestoa ja hidastuskäyrää samalla tavoin kuin animate*AsState-funktion kanssa.

Tässä sisältö häivytetään näkyviin 300 millisekunnissa ja pois nopeammin, 150 millisekunnissa. Tämä yleinen malli saa sulkemiset tuntumaan nopeilta.

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

Laajentaminen ja kutistaminen

Kun osiot paljastavat lisää sisältöä, expandVertically ja shrinkVertically animoivat korkeutta ja siirtävät ympäröivää sisältöä tasaisesti tieltä.

Tämä sopii erinomaisesti kokoon taitettaviin paneeleihin, usein kysyttyihin kysymyksiin tai "näytä lisää" -osioihin.

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

updateTransition: yksi tila, monta arvoa

Kun useiden ominaisuuksien tulee muuttua yhdessä yhden tilan perusteella, updateTransition koordinoi niitä. Se luo Transition-olion, jonka alkiot animoituvat synkronoidusti.

Määritä tila ja käytä sitten kullekin ominaisuudelle esimerkiksi animateColor- tai animateDp-funktiota tämän tilan funktiona.

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

Ominaisuuskohtainen ajoitus siirtymässä

updateTransition-funktion suuri etu on ominaisuuskohtainen ajoitus. Jokainen animate*-alkio voi määrittää oman transitionSpec-määrityksensä, joten väri ja koko voivat muuttua eri nopeuksilla samalla, kun sama tila koordinoi niitä.

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: sisällön vaihtaminen

Kun itse sisältö muuttuu eikä vain sen näkyvyys, käytä AnimatedContent-funktiota. Se animoi vanhan ja uuden sisällön välisen vaihdon ja käyttää oletuksena ristihäivytystä.

Se sopii erinomaisesti esimerkiksi laskuriin, vaiheilmaisimeen tai lataus- ja ladattu-tilan välillä vaihtamiseen.

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

AnimatedContent-siirtymien mukauttaminen

Mukauta tapaa, jolla AnimatedContent vaihtaa sisältöä, käyttämällä transitionSpec-määritystä. Laskurissa tyypillinen ratkaisu on liu'uttaa uusi arvo ylös samalla, kun vanha liukuu pois, ja yhdistää tähän häivytys.

using-avainsanalla liität mukaan SizeTransform-muunnoksen, jolloin myös säilö muuttaa kokoaan tasaisesti.

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

Luettelokohteiden animointi

LazyColumn-säilön sisällä lisätyt, poistetut tai siirretyt kohteet voivat animoitua paikoilleen käyttämällä Modifier.animateItem()-muokkainta kunkin kohteen sisällössä.

Tämä mahdollistaa sulavan uudelleenjärjestämisen ja lisäämisen ilman manuaalista tilan seurantaa.

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

Kokonaisten näyttöjen ristihäivytys

Crossfade on yksinkertainen ja tarkasti rajattu apufunktio, joka häivyttää kahden tilan välillä. Se sopii erinomaisesti kokonaisista näytöistä tai merkittävistä käyttöliittymän tiloista toiseen vaihtamiseen.

Välitä sille nykyinen tila ja sisältölambda. Kun tila muuttuu, Crossfade häivyttää vanhan sisällön pois ja uuden näkyviin.

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

Sisääntulevien alkiolasten koordinointi

AnimatedVisibility-lohkon sisällä käytössäsi on AnimatedVisibilityScope, joka tarjoaa Modifier.animateEnterExit()-muokkaimen. Sen avulla yksittäiset alkiolapset voivat käyttää omia sisääntulo- ja poistumisanimaatioitaan vanhemman siirtymän lisäksi.

Paneeli voi esimerkiksi liukua näkyviin samalla, kun sen otsikko häivytetään hieman myöhemmin kerroksittaisen vaikutelman luomiseksi.

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

Pikatarkistus

Haluat animoida siirtymän luvusta 3 lukuun 4 siten, että uusi arvo häivytetään ja liu'utetaan näkyviin. Mikä API sopii tähän parhaiten?

Vastaa interaktiivisessa oppitunnissa

Kertaus: näkyvyys ja siirtymät

Osaat nyt animoida sisällön ilmestymistä, katoamista ja muuttumista:

AnimatedVisibility animoi sisääntuloa ja poistumista käyttäen fadeIn/Out-, slideIn/Out- ja expand/shrink-animaatioita, jotka voidaan yhdistää +-operaattorilla.
updateTransition koordinoi useita arvoja yhdestä tilasta käsin, ja kullakin arvolla voi olla oma määrityksensä.
AnimatedContent animoi eri sisältöjen väliset vaihdot; Crossfade on sen yksinkertainen häivytysmuunnelma.
Modifier.animateItem() animoi luettelon kohteiden lisäämisen ja uudelleenjärjestämisen.

Seuraavaksi: eleet ja fysiikkaan perustuvat jousianimaatiot luonnollista ja vuorovaikutteista liikettä varten.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”AnimatedVisibility ja siirtymät” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “AnimatedVisibility ja siirtymät”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”AnimatedVisibility ja siirtymät”?

Animoikaa sisällön näyttäminen ja piilottaminen. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”AnimatedVisibility ja siirtymät”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy