flutter SDK tarjoaa kehittäjille sisäänrakennetun widget nimeltäänAnimatedContainer. Nimensä mukaisesti kyseessä on kontti, joka voidaan animoida jollain tavalla. Joten sen attribuutit ovat aivan kuten tavallista Container widget paitsi että aina kun jokin sen attribuuteista muuttuu, se tarjoaa saumattoman tavan siirtyä muuttuneeseen arvoon. Olen ollut leikkii tämän widget jo jonkin aikaa ja voisi kokeilla joitakin animaatioita, jotka haluaisin jakaa kanssanne myöhemmin tässä artikkelissa.
ennen kuin oikeastaan aloitamme AnimatedContainer, haluaisin näyttää tavallisen Container widget arvojen muutoksesta ja sitten siirtyä AnimatedContainer. Näin voimme ymmärtää paremmin, mitä AnimatedContainer tuo pöytään, mitä Container ei.
aiomme muuttaa height ja width attribuutit Container johonkin tapahtumaan, kuten klikkaa ja katso, miten siirtyminen näkyy.
tässä esimerkissä aiomme muuttaa height ja width meidän Container klikkaamalla Container itse. Niinpä widget-puu tulee olemaan yksinkertaisesti Container keskellä ruutua käärittynä GestureDetector tunnistaakseen Container käyttämällä onTap callback. Seuraava on koodi sille:
joten tässä muuttujatcontainerHeightjacontainerWidthContainer. Juostaan ja katsotaan käyttäytymistä
näet siirtymisen olevan luonteeltaan äkillinen eikä lainkaan selvä!
kokeillaan nyt samaa AnimatedContainer ja siirrytään sitten kokeilemaan siistimpiä animaatioita samalla.
Animated Container behavior
koodi tälle on jokseenkin sama kuin aiemmin, paitsi että meidän täytyy muuttaa widget Container jotta AnimatedContainer. Kun vekotin on vaihdettu AnimatedContainer, täytyy Duration attribuutti AnimatedContainer. Tämä määrittää ajanjakson tai keston, jonka aikana haluat animoivan toiminnon päättyvän. Aseta siis Duration ominaisuus aivan kuten alla:
ajetaan päivitetty koodi ja tarkkaillaan käyttäytymistä tällä kertaa
voilà !!!
se on niin paljon parempi nähdä. Kokeillaan lisää ominaisuuksia.
värinmuutos:
koska animoitavien attribuuttien määrä kasvaa , on parempi käyttää boolea tietääksesi, missä tilassa kontti on tällä hetkellä. Laajennetaanko sitä vai ei. Tästä on se hyöty, että sisällä setState() meillä on vähemmän attribuutteja käsiteltävänä. Vaihdetaan Boolen ja se siitä.
so go ahead and add a boolean variable:
bool isExpanded = false;
also update the AnimatedContainer widget in the widget tree seuraavasti:
muutos tähän on se, että olemme lisänneet color attribuutin AnimatedContainer ja kaksi muuta attribuuttia height ja width annetaan arvot sen perusteella, onko AnimatedContainer on laajennettu tai ei.
on tehtävä viimeinen muutos eli päivitettävä setState() seuraavasti:
setState((){
isExpanded = !isExpanded;
});
div>
muutos borderradiuksessa:
aivan kuten muutkin attribuutit, voimme myös animoidaAnimatedContainerruntime. Lisättäessä borderRadius ominaisuus, täytyy BoxDecoration ensin siirtää decoration attribuutti ja sen jälkeen siirtää borderRadius siihen. Just like how you’d set borderRadius for usual Container.
Notice that I’ve moved the color attribute inside BoxDecoration because we can’t specify color and decoration at the same time, just like Container.
This looks great so far. Mutta juuri nyt animaatio on melko ’vanilla’, eli se vain animoi lineaarisesti näiden kahden arvon välillä. Miten olisi animaation käyrällä tai rytmillä leikkiminen.
Adding curve attribute:
suosikkikäyräni on Curves.bounceOut. Kokeillaan sitä. Nostetaan myös duration hieman.
duration: Duration(
milliseconds: 1000,
),
curve: Curves.bounceOut,
As an excercise, I suggest you to also try out other curves.
Similarly, you can also experiment with other parameters of AnimatedContainer like transformmarginpadding etc. You can create complex animations when you combine multiple attributes together. I won’t be explaining these animations in this article for brevity but this is what I was able to achieve :
