flutter SDK ger utvecklare en inbyggd widget som heter AnimatedContainer. Som namnet antyder är det en behållare som kan animeras på något sätt. Så dess attribut är precis som den vanliga Container widget förutom att när det finns en förändring i någon av dess attribut, ger det ett sömlöst sätt att övergå till det ändrade värdet. Jag har spelat runt med denna widget för en tid nu och kunde experimentera några animationer som jag skulle vilja dela med dig senare i den här artikeln.
innan vi faktiskt börjar med AnimatedContainer, skulle jag vilja visa beteendet hos en vanlig Container widget för ändring av värden och sedan flytta till AnimatedContainer. Genom att göra det kan vi bättre förstå vad AnimatedContainer tar med till tabellen som Container inte gör.
Vi kommer att ändraheight ochwidth attribut förContainer på någon händelse som Klicka och se hur övergången visas.
i det här exemplet kommer vi att ändra height och width I vårt Container när du klickar på Container själv. Så widgetträdet kommer helt enkelt att vara ett Container I mitten av skärmen insvept med ett GestureDetector för att upptäcka klicket på Container med onTap återuppringning. Följande är koden för det:
Så vad vi gör här är att ändra värdena för variablernacontainerHeightochcontainerWidthpå kranen påContainer. Låt oss springa och se beteendet
du ser övergången är abrupt i naturen och inte klar alls!
låt oss nu försöka samma sak med AnimatedContainer och fortsätt sedan med att prova mer coola animationer med samma.
animerat Behållarbeteende
koden för detta är ungefär densamma som tidigare förutom att vi måste ändra widgeten från Container till AnimatedContainer. När du har ändrat widgeten till AnimatedContainer måste du skicka attributet Duration för AnimatedContainer. Detta anger den tidsperiod eller den varaktighet som du vill att animeringsbeteendet ska slutföras. Så ställ in egenskapen Duration precis som nedan:
låt oss köra den uppdaterade koden och observera beteendet den här gången
voil Ukrainian !!!
det är så mycket bättre att se. Låt oss försöka experimentera med fler attribut.
färgförändring:
eftersom antalet Attribut vi animerar ökar är det bättre att använda en boolesk för att veta vilket tillstånd behållaren är just nu. Oavsett om det är utökat eller inte. Fördelen med att göra det är att inuti setState() vi har mindre attribut att hantera. Vi byter bara boolean och det blir det.
så fortsätt och Lägg till en boolesk variabel:
bool isExpanded = false;
uppdatera också AnimatedContainer widget i widgetträdet enligt följande:
ändringen här är att vi har lagt till ett color attribut till AnimatedContainer och de andra två attributen height och width tilldelas värden baserat på om AnimatedContainer expanderas eller inte.
en sista ändring måste göras, dvs uppdatering av setState() enligt följande:
setState((){
isExpanded = !isExpanded;
});
förändring i borderradius:
precis som andra attribut kan vi också animera gränsradien för AnimatedContainer vid körning. För att lägga till borderRadius egenskapen måste vi skicka BoxDecoration först till decoration attributet och sedan inuti vilket vi skickar borderRadius till 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 just nu är animationen ganska ’vanilj’, vilket betyder att den bara animerar linjärt mellan de två värdena. Vad sägs om att spela med animationens kurva eller rytm.
lägga till kurva attribut:
min favoritkurva är Curves.bounceOut. Låt oss prova det. Låt oss också öka duration lite.
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 :
