Android Academy · Oppitunti

animate*AsState-perusteet

Animoikaa yksittäisiä arvoja sulavasti.

Oppitunti 2/413 vaihetta

animate*AsState-perusteet on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Animoi yksittäinen arvo

Yksinkertaisin tapa animoida Composessa on animate*AsState-perhe. Annatte sille kohdearvon, ja se palauttaa State-olion, joka animoi tasaisesti nykyarvosta kohdearvoon aina, kun kohde muuttuu.

Jokaiselle yleiselle tyypille on oma muunnelmansa: animateFloatAsState, animateDpAsState, animateColorAsState, animateOffsetAsState ja muita.

animateFloatAsState

animateFloatAsState animoi yksittäistä Float-arvoa. Yleinen käyttötapaus on peittävyys (alpha). Kun visible vaihtuu, palautettu alpha liukuu arvojen 0f ja 1f välillä.

Huomaa by-avainsana: sen avulla voit lukea animoidun State<Float>-arvon suoraan tavallisena Float-arvona.

@Composable
fun FadingLabel(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        label = "alpha"
    )
    Text(
        "Hello",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

animateDpAsState

Käyttöliittymän koot ja siirtymät käyttävät Dp-tyyppiä, joten käytä animateDpAsState-funktiota sisennysten, koon tai sijainnin animointiin.

Tässä laatikko kasvaa koosta 80dp kokoon 160dp, kun valintaa vaihdetaan. Koska välitämme animoidun Dp-arvon funktiolle size(), laatikon koko muuttuu tasaisesti.

@Composable
fun GrowingBox(big: Boolean) {
    val size by animateDpAsState(
        targetValue = if (big) 160.dp else 80.dp,
        label = "size"
    )
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
    )
}

animateColorAsState

Käytä värien animointiin animateColorAsState-funktiota. Se interpoloi väriavaruudessa, joten siirtymät näyttävät tasaisilta ja luonnollisilta eivätkä välky outojen väliin jäävien sävyjen kautta.

Tässä tilapiste animoituu punaisen ja vihreän välillä totuusarvon perusteella.

@Composable
fun StatusDot(online: Boolean) {
    val color by animateColorAsState(
        targetValue = if (online) Color(0xFF4CAF50) else Color(0xFFF44336),
        label = "status-color"
    )
    Box(
        Modifier
            .size(16.dp)
            .clip(CircleShape)
            .background(color)
    )
}

Mukauttaminen animationSpec-parametrilla

Oletuksena nämä apufunktiot käyttävät pehmeää jousta. Välitä animationSpec ajoituksen hallintaa varten. Käytä tween-funktiota kiinteään kestoon ja hidastuskäyrään.

Tämä paneeli liukuu 400 millisekunnin aikana tasaisella kiihtyvällä ja sitten hidastuvalla käyrällä.

@Composable
fun SlidingPanel(open: Boolean) {
    val offset by animateDpAsState(
        targetValue = if (open) 0.dp else 250.dp,
        animationSpec = tween(
            durationMillis = 400,
            easing = FastOutSlowInEasing
        ),
        label = "offset"
    )
    Box(Modifier.offset(x = offset)) { /* content */ }
}

Hidastuskäyrät

Hidastuskäyrä määrittää, miten animaatio kiihtyy ja hidastuu. Compose sisältää useita käyriä:

LinearEasing - vakionopeus (mekaaninen vaikutelma).
FastOutSlowInEasing - Materialin oletus; nopea alku ja pehmeä loppu.
LinearOutSlowInEasing - ruudulle saapuville elementeille.
FastOutLinearInEasing - ruudulta poistuville elementeille.

Oikean hidastuskäyrän valinta saa liikkeen tuntumaan harkitulta eikä robottimaiselta.

val progress by animateFloatAsState(
    targetValue = if (done) 1f else 0f,
    animationSpec = tween(500, easing = LinearOutSlowInEasing),
    label = "progress"
)

Jousimääritykset

Kiinteän keston sijaan voitte käyttää jousta, joka tuntuu fyysiseltä ja luonnolliselta. Jousen määrittävät dampingRatio (kuinka paljon se joustaa) ja stiffness (kuinka nopeasti se liikkuu).

Jouset ovat hyödyllisiä, koska ne mukautuvat tasaisesti myös silloin, kun kohde muuttuu kesken animaation.

val scale by animateFloatAsState(
    targetValue = if (active) 1.2f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    label = "scale"
)

Animaation päättymiseen reagoiminen

Joskus jotakin on tehtävä animaation valmistuessa, esimerkiksi kutsuttava takaisinkutsua kerran, kun arvo saavuttaa kohteensa. animate*AsState hyväksyy finishedListener-kuuntelijan juuri tätä varten.

val alpha by animateFloatAsState(
    targetValue = if (gone) 0f else 1f,
    label = "alpha",
    finishedListener = { finalValue ->
        if (finalValue == 0f) onFullyHidden()
    }
)

Animoi useita ominaisuuksia

Voit yhdistää useita animate*AsState-kutsuja ja animoida useampaa kuin yhtä ominaisuutta kerralla. Jokainen seuraa omaa arvoaan, ja yhdessä ne muodostavat näyttävämmän vaikutelman.

Tässä siru suurenee ja vaihtaa väriä, kun se valitaan.

@Composable
fun SelectableChip(selected: Boolean, text: String) {
    val scale by animateFloatAsState(if (selected) 1.1f else 1f, label = "s")
    val bg by animateColorAsState(
        if (selected) Color(0xFF3F51B5) else Color.LightGray,
        label = "bg"
    )
    Box(
        Modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(16.dp))
            .background(bg)
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) { Text(text) }
}

Jousi puhtaassa Kotlinissa

Jotta saisitte paremman tuntuman siihen, mitä jousi "tekee", tässä on pieni puhdas Kotlin -simulaatio. Se siirtää arvoa jokaisessa vaiheessa kohti kohdetta vaimennuksen avulla, aivan kuten Composen jousi lähestyy kohdearvoa useiden ruutujen aikana.

fun main() {
    var value = 0f
    val target = 100f
    var velocity = 0f
    val stiffness = 0.1f
    val damping = 0.6f
    repeat(6) { step ->
        val force = (target - value) * stiffness
        velocity = (velocity + force) * damping
        value += velocity
        println("step $step -> ${"%.1f".format(value)}")
    }
}

Int-arvon ja Offset-arvon animointi

Perhe ei rajoitu liukulukuihin ja väreihin. Käytä animateIntAsState-funktiota kokonaislukuarvoille, kuten tunnusmerkin laskurin kohdearvolle, ja animateOffsetAsState- tai animateIntOffsetAsState-funktiota 2D-sijainnin animointiin yhdellä kutsulla.

Tässä siru liukuu vinottain animoimalla IntOffset-arvoa.

@Composable
fun SlidingChip(moved: Boolean) {
    val pos by animateIntOffsetAsState(
        targetValue = if (moved) IntOffset(120, 60) else IntOffset.Zero,
        label = "pos"
    )
    Box(
        Modifier
            .offset { pos }
            .size(40.dp)
            .background(Color.Magenta)
    )
}

Pikatarkistus

Haluat animoida tasaisesti laatikon leveyttä, joka ilmoitetaan Dp-yksikköinä, kun totuusarvo muuttuu. Mikä API sopii tähän parhaiten?

Vastaa interaktiivisessa oppitunnissa

Kertaus: animate*AsState

animate*AsState-perhe on ensisijainen valintasi yksittäisen arvon animointiin:

Valitse tyypin mukainen muunnelma: animateFloatAsState, animateDpAsState, animateColorAsState jne.
Aseta targetValue; tulos animoituu sitä kohti aina arvon muuttuessa.
Hienosäädä liikettä animationSpec-parametrilla käyttämällä yhdistelmää tween ja hidastuskäyrä tai spring-funktiota.
Yhdistä useita funktioita useiden ominaisuuksien animointiin yhdessä.
Käytä finishedListener-kuuntelijaa reagoidaksesi animaation valmistumiseen.

Seuraavaksi: sisällön ilmestymisen ja katoamisen animointi AnimatedVisibility-funktion ja siirtymien avulla.

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 ”animate*AsState-perusteet” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “animate*AsState-perusteet”. 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 ”animate*AsState-perusteet”?

Animoikaa yksittäisiä arvoja sulavasti. 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 2/4.

Kuinka kauan ”animate*AsState-perusteet”-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