flutter SDK biztosít a fejlesztők egy beépített widget nevű AnimatedContainer. Ahogy a neve is sugallja, ez egy konténer, amely valamilyen módon animálható. Tehát az attribútumai olyanok, mint a szokásos Container widget, azzal a különbséggel, hogy amikor bármelyik attribútumában változás történik, zökkenőmentes módot biztosít a megváltozott értékre való áttérésre. Már egy ideje játszom ezzel a widgettel, és kísérletezhetek néhány animációval, amelyeket később szeretnék megosztani veled ebben a cikkben.

mielőtt ténylegesen elkezdenénk AnimatedContainer, szeretném megmutatni a szokásos viselkedését Containerwidget az értékek megváltoztatásához, majd lépjen a AnimatedContainer. Ezzel jobban megérthetjük, hogy a AnimatedContainermit hoz az asztalra, amit a Container nem.

meg fogjuk változtatni a heightés widthattribútumok a Container néhány esemény, mint kattintson, és nézze meg, hogyan jelenik meg az átmenet.

ebben a példában meg fogjuk változtatni aheightéswidthaContaineraContainer a Container magát. Tehát a widget fa lesz egyszerűen egy Container a képernyő közepén csomagolva egy GestureDetector felismerni a kattintás a Container segítségével onTap visszahívás. A következő a kód erre:

tehát amit itt csinálunk, az a változók értékeinek megváltoztatása containerHeight and containerWidth a Container csapján . Nézzük meg a viselkedést

látja, hogy az átmenet hirtelen jellegű, és egyáltalán nem világos!

most próbáljuk meg ugyanazt a dolgotAnimatedContainer majd lépni próbál több jó animációk ugyanaz.

animált konténer viselkedés

ennek kódja nagyjából megegyezik az előzővel, azzal a különbséggel, hogy a widgetetContainer – rőlAnimatedContainer – re kell változtatnunk. Miután megváltoztatta a widgetet AnimatedContainer értékre, át kell adnia a Duration attribútumot a AnimatedContainerattribútumhoz. Ez határozza meg azt az időtartamot vagy időtartamot, amely alatt az animálási viselkedést be szeretné fejezni. Tehát állítsa be a Duration tulajdonságot, mint alább:

futtassuk le a frissített kódot, és figyeljük meg a viselkedést ezúttal

voil !!!

ezt sokkal jobban látni. Próbáljunk kísérletezni több attribútummal.

színváltozás:

mivel az animált attribútumok száma növekszik , jobb, ha logikai értéket használunk, hogy tudjuk, milyen állapotban van a tároló. Akár bővül, akár nem. Ennek az az előnye, hogy belül setState() kevesebb attribútummal kell foglalkoznunk. Csak átkapcsoljuk a logikai értéket, és ennyi.

így megy előre, és adjunk hozzá egy logikai változó:

bool isExpanded = false;

is frissíti a AnimatedContainer widget a widget fa az alábbiak szerint:

a változás itt az, hogy hozzáadtunk egy color attribútumot a AnimatedContainer és a másik két attribútum height és width vannak hozzárendelve értékek alapján, hogy a AnimatedContainer kibővült vagy sem.

egy utolsó változtatásra van szükség, azaz a setState() frissítésére az alábbiak szerint:

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

változás a borderradiusban:

a többi attribútumhoz hasonlóan a AnimatedContainer határ sugarát is animálhatjuk futás közben. A borderRadius tulajdonság hozzáadásához át kell adnunk a BoxDecoration először a decoration attribútumot, majd azon belül át kell adnunk a borderRadius attribútumot. 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. De most az animáció elég vanília, vagyis csak lineárisan animál a két érték között. Mit szólnál az animáció görbéjéhez vagy ritmusához.

görbe attribútum hozzáadása:

a kedvenc görbém aCurves.bounceOut. Próbáljuk meg. Növeljük egy kicsit a duration értéket is.

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 :

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.