animate*AsState yksinkertaisiin interpolointeihin
Animoikaa yksittäinen arvo automaattisesti.
animate*AsState yksinkertaisiin interpolointeihin on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Jetpack Compose Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Animointi helposti
Compose voi animoida muutokset puolestasi. Yksinkertaisin työkalu on animate*AsState-perhe, joka siirtää arvon tasaisesti vanhasta uuteen. ✨
Mitä animateDpAsState tekee
Kun tavoitearvo muuttuu, animateDpAsState palauttaa State-arvon, joka liukuu kohti tavoitetta muutaman ruudun aikana hyppäämisen sijaan.
val size by animateDpAsState(targetValue = if (big) 200.dp else 100.dp)Lue sitä tavallisen State-arvon tapaan
Animoitu arvo on tavallinen State, jonka luet by-operaattorilla. Käytä sitä Modifierissä, niin käyttöliittymä seuraa animaatiota jokaisella ruudulla.
Box(Modifier.size(size).background(Color.Blue))Kokonainen apufunktioiden perhe
Jokaiselle tyypille on oma funktionsa: animateFloatAsState, animateColorAsState, animateDpAsState ja muita. Valitse arvoa vastaava funktio, jonka haluat animoida.
Animoi väri
Käytä animateColorAsState-funktiota värien pehmeään vaihtamiseen. Muuta totuusarvoa ja seuraa, kuinka tausta siirtyy tasaisesti sävystä toiseen. 🎨
val color by animateColorAsState(if (on) Color.Green else Color.Gray)Animoi läpinäkyvyyttä
Häivytyksiä varten animoi liukulukua ja anna se alpha-arvolle. Arvo 0f tarkoittaa näkymätöntä ja 1f täysin peittävää.
val a by animateFloatAsState(if (visible) 1f else 0f)
Box(Modifier.alpha(a))Valitse nopeus
Anna animationSpec ajoituksen hallintaa varten. Tweenillä voit määrittää keston millisekunteina ja hidastuskäyrän.
animateDpAsState(target, animationSpec = tween(durationMillis = 500))Jousto pomppimiseen
Vaihda käyttöön spring-määritys, jos haluat luonnollisen, fysiikkaan perustuvan liikkeen. Säädä dampingRatio- ja stiffness-arvoja lisätäksesi hieman leikkisää joustoa.
animateDpAsState(target, animationSpec = spring(dampingRatio = 0.4f))Se reagoi tilaan
Sinun ei tarvitse kutsua start- tai stop-funktiota. Kun target value muuttuu uudelleenkoostamisen aikana, animaatio käynnistyy automaattisesti uudelleen kohti uutta tavoitetta.
Pehmeä, ei lineaarinen
Oletushidastus tekee liikkeestä elävän nopeuttamalla sitä ensin ja hidastamalla lopuksi. Easing-käyrät, kuten FastOutSlowInEasing, estävät robottimaisen tasaisen liikkeen.
Reagoi valmistumiseen
Haluatko reagoida liikkeen päättyessä? Anna finishedListener-lambda, joka suoritetaan kerran lopullisella arvolla animaation asettuessa paikalleen.
animateDpAsState(target) { final -> /* done */ }Pikatarkistus
Mikä määritys antaa liikkeelle luonnollisen ja joustavasti pomppivan fysiikan tuntuman?
Kertaus: yksi arvo kerrallaan
Opit käyttämään animate*AsState-perhettä: muuta tavoitetta, lue animoitu State ja valitse tween tai spring. Se on nopein tapa lisätä sulavaa yhden arvon liikettä. 🎉
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
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”animate*AsState yksinkertaisiin interpolointeihin” ilmainen?
Kyllä – oppitunnin ”animate*AsState yksinkertaisiin interpolointeihin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Jetpack Compose Academy-kurssin, päivitä CoddyKit PROhon. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”animate*AsState yksinkertaisiin interpolointeihin”?
Animoikaa yksittäinen arvo automaattisesti. Harjoittelet Jetpack Compose Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Jetpack Compose Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Jetpack Compose 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 ”animate*AsState yksinkertaisiin interpolointeihin”-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ä Jetpack Compose Academy-oppitunnilla?
Kyllä. Jokainen Jetpack Compose 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
- animate*AsState yksinkertaisiin interpolointeihin
- AnimatedVisibility ja Crossfade
- updateTransition koordinoituun liikkeeseen
- Eleohjatut animaatiot