Miksi animaatiot ovat tärkeitä
Liike, joka ohjaa ja ilahduttaa käyttäjiä.
Miksi animaatiot ovat tärkeitä on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.
Tarkoituksenmukainen liike
Animaatiot ovat muutakin kuin silmänruokaa. Hyvässä Android-sovelluksessa liike ohjaa huomiota, selittää muutoksia ja saa käyttöliittymän tuntumaan reagoivalta ja elävältä.
Tällä kurssilla opitte Jetpack Composen animaatio-rajapinnat yhden rivin animate*AsState-apureista AnimatedVisibility-komponenttiin, siirtymiin ja fysiikkapohjaisiin jousiin.
Tässä ensimmäisessä oppitunnissa käsitellään sitä, miksi ja milloin kannattaa animoida, jotta liikkeellä on aina selkeä tarkoitus.
Compose animoi deklaratiivisesti
Composessa animaatioita ei käynnistetä ja pysäytetä manuaalisesti ruutu kerrallaan. Sen sijaan kuvaatte tavoitearvon, ja Compose animoi siihen tasaisesti aina arvon muuttuessa.
Tässä laatikon väriä ohjaa yksi totuusarvotila. Napautus vaihtaa tilan, ja väri siirtyy automaattisesti uuteen arvoon.
@Composable
fun ColorBox() {
var selected by remember { mutableStateOf(false) }
val color by animateColorAsState(
targetValue = if (selected) Color.Green else Color.Gray,
label = "box-color"
)
Box(
Modifier
.size(120.dp)
.background(color)
.clickable { selected = !selected }
)
}Käyttäjän toimien palautepalaute
Yksi liikkeen tärkeimmistä tehtävistä on palautteen antaminen. Kun käyttäjä napauttaa painiketta tai vaihtaa kytkimen asentoa, pieni animaatio vahvistaa, että sovellus vastaanotti toiminnon.
Välittömät ja töksähtävät muutokset tuntuvat rikkinäisiltä; nopea 150–300 ms:n siirtymä tuntuu viimeistellyltä. Tässä painike kutistuu hieman painamisen aikana.
@Composable
fun PressableButton(onClick: () -> Unit) {
var pressed by remember { mutableStateOf(false) }
val scale by animateFloatAsState(
targetValue = if (pressed) 0.92f else 1f,
label = "press-scale"
)
Button(
onClick = onClick,
modifier = Modifier.graphicsLayer {
scaleX = scale; scaleY = scale
}
) { Text("Tap me") }
}Tilamuutosten selittäminen
Kun käyttöliittymä muuttuu, animaatio auttaa käyttäjää ymmärtämään, mitä juuri tapahtui. Sisään häivytyvä ja liukuva kohde tulkitaan ”uudeksi”, kun taas ulos häipyvä kohde tulkitaan ”poistetuksi”.
Ilman liikettä sisältö voi ilmestyä tai kadota äkillisesti, jolloin käyttäjä ei tiedä, ilmestyikö jokin, katosiko se vai siirtyikö se.
@Composable
fun Banner(visible: Boolean) {
AnimatedVisibility(
visible = visible,
enter = fadeIn() + slideInVertically(),
exit = fadeOut() + slideOutVertically()
) {
Text("Saved successfully!")
}
}Jatkuvuus ja tilan hahmottaminen
Liike säilyttää jatkuvuuden. Kun kortti laajenee tai elementti siirtyy uuteen paikkaan, muutoksen animointi auttaa käyttäjää hahmottamaan sijaintinsa käyttöliittymässä.
Compose voi animoida asettelun muutokset automaattisesti Modifier.animateContentSize()-muuntimella, jolloin laatikko kasvaa tai pienenee tasaisesti sisällön muuttuessa.
@Composable
fun ExpandableCard(expanded: Boolean) {
Column(
Modifier
.fillMaxWidth()
.animateContentSize()
.padding(16.dp)
) {
Text("Title", style = MaterialTheme.typography.titleMedium)
if (expanded) {
Text("Here is the longer body that appears when expanded.")
}
}
}Kesto ja ajoitus ovat tärkeitä
Hyvä animaatio on nopea. Useimpien käyttöliittymäsiirtymien pitäisi kestää noin 150–400 ms. Liian hitaana sovellus tuntuu kankealta, ja liian nopeana liikettä ei huomaa.
Compose mahdollistaa keston ja etenemisnopeuden säätämisen tween-funktion ja easing-käyrän avulla. Easing tekee liikkeestä luonnollisen kiihdyttämällä ja hidastamalla sitä.
val offset by animateDpAsState(
targetValue = if (open) 0.dp else 200.dp,
animationSpec = tween(
durationMillis = 300,
easing = FastOutSlowInEasing
),
label = "panel-offset"
)Älkää liioitelko
Animaatio on tehokas työkalu, joten sitä on helppo käyttää liikaa. Liiallinen liike on häiritsevää, hidastaa käyttäjää ja voi jopa aiheuttaa epämukavuutta.
Nyrkkisäännöt:
- Animoikaa viestintää, älkää koristelua varten.
- Pitäkää siirtymät lyhyinä ja hienovaraisina.
- Älkää animoiko kaikkea näytöllä samanaikaisesti.
- Älkää koskaan estäkö käyttäjää toimimasta animaation aikana.
Huomioikaa esteettömyys
Jotkin käyttäjät ottavat järjestelmäasetuksissa käyttöön Poista animaatiot käytöstä -asetuksen liikeherkkyyden vuoksi. Harkitseva sovellus kunnioittaa tätä valintaa.
Voitte tarkistaa, onko animaatioiden skaalaus asetettu nollaan, ja vähentää tai poistaa käytöstä tarpeettoman liikkeen sen mukaisesti.
@Composable
fun rememberReduceMotion(): Boolean {
val context = LocalContext.current
val scale = Settings.Global.getFloat(
context.contentResolver,
Settings.Global.ANIMATOR_DURATION_SCALE,
1f
)
return scale == 0f
}Compose-animaation työkalupakki
Compose tarjoaa tasoittain rakentuvan animaatio-API-kokonaisuuden. Tutustut niihin tämän kurssin aikana:
animate*AsState- animoi yhtä arvoa (väriä, kokoa tai liukulukua).AnimatedVisibility- animoi sisällön ilmestymistä ja katoamista.updateTransition- koordinoi useita arvoja yhdessä.AnimatedContent- häivyttää sisällön vaihdon eri sisältöjen välillä.Animatablejaspring- matalan tason fysiikkaan perustuva hallinta.
Aloittakaa korkean tason API:sta ja siirtykää alemmas vain, kun tarvitsette enemmän hallintaa.
Animaatio seuraa tilaa
Kaiken avain on seuraava ajattelumalli: Composessa animaatiot seuraavat tilaa. Kun muutatte arvoa, animaatio-API interpoloi käyttöliittymää tasaisesti kohti uutta arvoa jokaisella ruudulla.
Tämä tarkoittaa, että aikajanaa tarvitsee yleensä kirjoittaa harvoin. Ilmoitatte, että "tämän ominaisuuden tulee olla X", ja Compose huolehtii puolestanne väliin jäävistä ruuduista.
@Composable
fun FadingText(highlighted: Boolean) {
val alpha by animateFloatAsState(
targetValue = if (highlighted) 1f else 0.4f,
label = "text-alpha"
)
Text(
"Status",
modifier = Modifier.graphicsLayer { this.alpha = alpha }
)
}Lyhyt puhdas Kotlin -lämmittely
Animaatiot interpoloivat arvojen välillä. Pohjimmiltaan kyse on vain matematiikasta: arvo t välillä 0–1 yhdistää alku- ja loppuarvon. Tämä idea (lineaarinen interpolointi eli lerp) on kaikkien kirjoittamienne animaatioiden perusta.
Tämä pieni puhdas Kotlin -koodinpätkä näyttää käsitteen, jota Compose soveltaa monta kertaa sekunnissa.
fun lerp(start: Float, end: Float, t: Float): Float =
start + (end - start) * t
fun main() {
for (i in 0..4) {
val t = i / 4f
println("t=$t -> ${lerp(0f, 100f, t)}")
}
}Pikatarkistus
Mikä on Jetpack Composen animaatioiden keskeinen ajattelumalli?
Kertaus: merkityksellinen liike
Tiedätte nyt, miksi animaatioilla on merkitystä ja mikä niiden taustalla oleva malli on:
- Liike antaa palautetta, selittää muutoksia ja säilyttää jatkuvuuden.
- Composen animaatiot ovat deklaratiivisia ja seuraavat tilaa.
- Pidätte siirtymät lyhyinä (≈150–400 ms) ja tarkoituksenmukaisina; älkää liioitelko niiden käyttöä.
- Huomioitte käyttäjät, jotka vähentävät liikettä esteettömyyssyistä.
- Aloitatte korkean tason API:ista:
animate*AsState,AnimatedVisibility, siirtymät ja jouset.
Seuraavaksi: yksittäisten arvojen animointi animate*AsState -perheellä.
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
Usein kysytyt kysymykset
Onko oppitunti ”Miksi animaatiot ovat tärkeitä” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Miksi animaatiot ovat tärkeitä”. 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 ”Miksi animaatiot ovat tärkeitä”?
Liike, joka ohjaa ja ilahduttaa käyttäjiä. 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 1/4.
Kuinka kauan ”Miksi animaatiot ovat tärkeitä”-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
- Miksi animaatiot ovat tärkeitä
- animate*AsState-perusteet
- AnimatedVisibility ja siirtymät
- Ele- ja jousianimaatiot