Flutter SDK biedt ontwikkelaars met een ingebouwde widget met de naam AnimatedContainer . Zoals de naam al doet vermoeden, het is een container die kan worden geanimeerd op een bepaalde manier. Dus zijn attributen zijn net als de gebruikelijkeContainer widget, behalve dat wanneer er een verandering in een van de attributen, Het biedt een naadloze manier van overgang naar de gewijzigde waarde. Ik heb spelen rond met deze widget voor enige tijd nu en kon experimenteren met een aantal animaties die ik zou willen delen met u later in dit artikel.

voordat we beginnen met AnimatedContainer, wil ik het gedrag van een gebruikelijke Container widget voor verandering in waarden tonen en dan naar AnimatedContainergaan. Door dit te doen, zullen we beter kunnen begrijpen wat AnimatedContainer naar de tabel brengt wat Container niet doet.

We gaan de height en width attributen van de Container wijzigen op een gebeurtenis zoals klik en zie hoe de overgang verschijnt.

in dit voorbeeld veranderen we de height en width van onze Container door te klikken op de Container zelf. De widgetboom wordt dus gewoon een Container in het midden van het scherm verpakt met een GestureDetector om de klik op de Container te detecteren met behulp van onTap callback. Hier volgt de code:

dus wat we hier doen is het veranderen van de waarden van de variabelencontainerHeightencontainerWidthop de tap vanContainer. Laten we het gedrag

u ziet dat de overgang abrupt van aard is en helemaal niet helder!

laten we nu hetzelfde proberen met AnimatedContainer en dan verder gaan met het proberen van meer coole animaties met dezelfde.

geanimeerd Containergedrag

de code hiervoor is vrijwel hetzelfde als de vorige behalve dat we de widget moeten veranderen van Container naar AnimatedContainer. Na het veranderen van de widget naar AnimatedContainer, moet u het Duration attribuut doorgeven voor de AnimatedContainer. Hiermee geeft u de periode of de duur op waarover u het animatiegedrag wilt voltooien. Stel de eigenschap Duration in, net als hieronder:

laten we de bijgewerkte code uitvoeren en het gedrag deze keer observeren

voilà !!!

dat is zoveel beter om te zien. Laten we proberen te experimenteren met meer attributen.

verandering in kleur:

aangezien het aantal attributen dat we animeren toeneemt , is het beter om een boolean te gebruiken om te weten welke status de container op dit moment is. Of het nu wordt uitgebreid of niet. Het voordeel hiervan is dat we binnen setState() minder attributen hebben om mee om te gaan. We schakelen de boolean om en dat is het.

dus ga je gang en voeg een Booleaanse variabele toe:

bool isExpanded = false;

ook het AnimatedContainer widget in de widgetboom als volgt bijwerken:

de verandering hier is dat we een color attribuut hebben toegevoegd aan de AnimatedContainer en de andere twee attributen height en width zijn toegewezen waarden gebaseerd op of de AnimatedContainer is uitgebreid of niet.

een laatste wijziging moet worden gedaan, d.w.z. het bijwerken van de setState() als volgt:

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

Wijzigen in borderRadius:

Net als andere attributen kunnen wij ook het animeren van de border radius van de AnimatedContainer tijdens runtime. Voor het toevoegen van de borderRadius eigenschap, moeten we BoxDecoration eerst doorgeven aan het decoration attribuut en dan binnen waarin we de borderRadius eraan doorgeven. 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. Maar op dit moment is de animatie vrij ‘vanille’, wat betekent dat het alleen lineair animeert tussen de twee waarden. Hoe zit het met het spelen met de curve of het ritme van de animatie.

curve attribuut toevoegen:

mijn favoriete curve is Curves.bounceOut. Laten we dat proberen. Laten we ook de duration Een beetje verhogen.

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 :

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.