flutter sdk gir utviklere en innebygd widget som heter AnimatedContainer. Som navnet antyder, er det en beholder som kan animeres på noen måte. Så dens attributter er akkurat som den vanligeContainer widget bortsett fra at når det er en endring i noen av sine attributter, det gir en sømløs måte å overgang til den endrede verdien. Jeg har spilt rundt med denne widgeten i noen tid nå og kunne eksperimentere noen animasjoner som jeg vil dele med deg senere i denne artikkelen.

før vi faktisk begynner medAnimatedContainer, vil jeg gjerne vise oppførselen til en vanligContainer widget for endring i verdier og deretter flytte tilAnimatedContainer. Ved å gjøre det, vil vi kunne forstå bedre hva AnimatedContainer bringer til bordet som Container ikke.

Vi kommer til å endreheight ogwidth attributter avContainer på noen hendelse som klikk og se hvordan overgangen vises.

i dette eksemplet skal vi endre heightog widthav vår Containerved å klikke på Container selv. Så widget treet kommer til å være bare enContainer i midten av skjermen innpakket med enGestureDetector å oppdage klikk påContainer brukeronTap tilbakeringing. Følgende er koden for det:

så hva vi gjør her er å endre verdiene av variablene containerHeight og containerWidth på trykk på Container . La oss kjøre og se atferden

du ser overgangen er brå i naturen og ikke klar i det hele tatt!

la Oss nå prøve det samme med AnimatedContainer og deretter gå videre til å prøve flere kule animasjoner med det samme.

Animert Beholderadferd

koden for dette er stort sett den samme som forrige, bortsett fra at vi må endre widgeten fra Container til AnimatedContainer. Etter å ha endret widgeten tilAnimatedContainer, må du passereDuration attributtet forAnimatedContainer. Dette angir tidsperioden eller varigheten som du vil animere virkemåten til å fullføre. Så sett Duration eiendom akkurat som nedenfor:

La oss kjøre den oppdaterte koden og observere oppførselen denne gangen

voilà !!!

det er så mye bedre å se. La oss prøve å eksperimentere med flere attributter.

Endring i farge:

da antall attributter vi animerer øker, er det bedre å bruke en boolsk for å vite hvilken tilstand beholderen er for øyeblikket. Enten det er utvidet eller ikke. Fordelen med å gjøre det er at inne setState() vi har mindre attributter å håndtere. Vi bytter bare boolsk og det blir det.

så fortsett og legg til en boolsk variabel:

bool isExpanded = false;

oppdater også AnimatedContainer widget i widgettreet som følger:

endringen her er at vi har lagt til en color attributt til AnimatedContainer og de to andre attributtene height og width er tilordnet verdier basert på om AnimatedContainer er utvidet eller ikke.

En siste endring må gjøres, dvs. oppdatere setState() som følger:

setState((){
isExpanded = !isExpanded;
});

div>

endring i borderradius:

akkurat som andre attributter kan vi også animere grensen radius av AnimatedContainer ved kjøretid. For å legge tilborderRadius egenskapen, må vi passereBoxDecoration først tildecoration attributtet og deretter inne som vi vil passereborderRadius til den. 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. Men akkurat nå er animasjonen ganske vanilje, noe som betyr at den bare animerer lineært mellom de to verdiene. Hva med å spille med kurven eller rytmen av animasjonen.

Legge til kurveattributt:

min favorittkurve er Curves.bounceOut. La oss prøve det. La oss også øke duration litt.

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 :

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.