flutter SDK giver udviklere en indbygget kontrol med navnet AnimatedContainer. Som navnet antyder, er det en container, der kan animeres på en eller anden måde. Så dens attributter er ligesom den sædvanlige Container kontrol, bortset fra at når der er en ændring i nogen af dens attributter, giver den en problemfri måde at skifte til den ændrede værdi. Jeg har spillet rundt med denne kontrol i nogen tid nu og kunne eksperimentere nogle animationer, som jeg gerne vil dele med dig senere i denne artikel.
før vi faktisk starter med AnimatedContainer, vil jeg gerne vise opførelsen af en sædvanlig Container kontrol for ændring i værdier og derefter flytte til AnimatedContainer. Ved at gøre det kan vi bedre forstå, hvad AnimatedContainer bringer til bordet, som Container ikke gør.
Vi skal ændreheight ogwidth attributterne forContainer på en begivenhed som klik og se, hvordan overgangen vises.
i dette eksempel vil vi ændre height og width af vores Container ved at klikke på Container selv. Så kontroltræet bliver simpelthen en Container i midten af skærmen indpakket med en GestureDetector for at opdage klik på Container ved hjælp af onTap tilbagekald. Følgende er koden for det:
så hvad vi laver her ændrer værdierne for variablernecontainerHeightogcontainerWidthpå tryk påContainer. Lad os køre og se adfærd
du ser overgangen er brat i naturen og slet ikke klar!
lad os nu prøve det samme medAnimatedContainer og derefter gå videre til at prøve flere seje animationer med det samme.
Animeret Containeradfærd
koden til dette er stort set den samme som tidligere, bortset fra at vi skal ændre kontrollen fraContainer tilAnimatedContainer. Når du har ændret kontrollen tilAnimatedContainer, skal du passereDuration attributten forAnimatedContainer. Dette angiver den tidsperiode eller den varighed, som du vil have den animerende adfærd til at fuldføre. Så indstilDuration ejendom ligesom nedenfor:
lad os køre den opdaterede kode og observere adfærd denne gang
voil Laris !!!
det er så meget mere bedre at se. Lad os prøve at eksperimentere med flere attributter.
ændring i farve:
da antallet af attributter , vi animerer, stiger, er det bedre at bruge en boolsk til at vide, hvilken tilstand beholderen er i øjeblikket. Uanset om det er udvidet eller ej. Fordelen ved at gøre det er, at inde i setState() vi har mindre attributter at håndtere. Vi skifter bare boolean, og det bliver det.
så gå videre og tilføj en boolsk variabel:
bool isExpanded = false;
opdater ogsåAnimatedContainer kontrol i kontroltræet som følger:
ændringen herover er, at vi har tilføjet en color attribut til AnimatedContainer og de to andre attributter height og width tildeles værdier baseret på, om AnimatedContainer udvides eller ej.
en endelig ændring skal udføres, dvs. opdatering af setState() som følger:
setState((){
isExpanded = !isExpanded;
});
div>
ændring i borderradius:
ligesom andre attributter kan vi også animere grænsen radius af AnimatedContainer ved runtime. For at tilføje borderRadiusegenskaben, skal vi passereBoxDecorationførst tildecorationattributten og derefter inden for hvilken vi passererborderRadius til det. 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 lige nu er animationen temmelig ‘vanilje’, hvilket betyder, at den bare animerer lineært mellem de to værdier. Hvad med at lege med animationens kurve eller rytme.
tilføjelse af kurveattribut:
min favoritkurve erCurves.bounceOut. Lad os prøve det. Lad os også øge duration lidt.
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 :
