flutter SDK oferă dezvoltatorilor un widget încorporat numit AnimatedContainer. După cum sugerează și numele, este un container care poate fi animat într-un fel. Deci, atributele sale sunt la fel ca de obicei Container widget cu excepția faptului că ori de câte ori există o schimbare în oricare dintre atributele sale, acesta oferă un mod fără sudură de tranziție la valoarea modificată. Am jucat în jurul cu acest widget pentru ceva timp acum și ar putea experimenta unele animații pe care aș dori să împărtășesc cu voi mai târziu în acest articol.
înainte de a începe de fapt cuAnimatedContainer, aș dori să arate comportamentul unui obișnuitContainer widget pentru schimbarea valorilor și apoi trece laAnimatedContainer. Procedând astfel, vom putea înțelege mai bine ce AnimatedContainer aduce la masă ceea ce Container nu.
vom schimbaheight șiwidth atributeleContainer la un eveniment precum click și vedeți cum apare tranziția.
în acest exemplu vom schimba height și width al nostru Container făcând clic pe Container în sine. Deci, arborele widget va fi pur și simplu un Container în centrul ecranului înfășurat cu un GestureDetector pentru a detecta click pe Container folosind onTap apel invers. În urma este codul pentru că:
deci, ceea ce facem aici este schimbarea valorilor variabilelor containerHeight și containerWidth la robinetul Container . Să rulăm și să vedem comportamentul
vedeți că tranziția este bruscă în natură și deloc lucidă!
acum să încercăm același lucru cuAnimatedContainer și apoi să trecem la încercarea mai multor animații interesante cu aceleași.
comportament Container animat
codul pentru acest lucru este destul de mult la fel ca anterior, cu excepția faptului că avem nevoie pentru a schimba widget-ul de laContainer laAnimatedContainer. După schimbarea widgetului înAnimatedContainer, trebuie să trecețiDuration atribut pentruAnimatedContainer. Aceasta specifică perioada de timp sau durata pe care doriți comportamentul animare pentru a finaliza. Deci, setați Duration proprietate la fel ca mai jos:
să rulăm codul actualizat și să observăm comportamentul de data aceasta
voil inkt !!!
care este mult mai bine de văzut. Să încercăm să experimentăm cu mai multe atribute.
schimbarea culorii:
pe măsură ce numărul de atribute pe care le animăm crește , este mai bine să folosiți un boolean pentru a ști ce stare este containerul în acest moment. Fie că este extins sau nu. Beneficiul de a face acest lucru este că în interiorul setState() vom avea mai puține atribute pentru a face față. Vom comuta doar boolean și că va fi.
deci, mergeți mai departe și adăugați o variabilă booleană:
bool isExpanded = false;
actualizați șiAnimatedContainer widget în arborele widget după cum urmează:
schimbarea aici este că am adăugat un color atribut la AnimatedContainer și celelalte două atribute height și width sunt atribuite valori bazate pe dacă AnimatedContainer este extins sau nu.
trebuie făcută o modificare finală, adică actualizarea setState() după cum urmează:
setState((){
isExpanded = !isExpanded;
});
schimbare în borderradius:
la fel ca alte atribute putem anima, de asemenea, raza de frontieră a AnimatedContainer în timpul rulării. Pentru a adăugaborderRadius proprietate, va trebui să treacăBoxDecoration mai întâi ladecoration atribut și apoi în interiorul căruia vom treceborderRadius să-l. 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. Dar acum animația este destul de vanilată, ceea ce înseamnă că doar animă liniar între cele două valori. Ce zici de joc cu curba sau ritmul de animație.
adăugarea atributului curbei:
curba mea preferată esteCurves.bounceOut. Să încercăm asta. De asemenea, să creștem duration un pic.
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 :
